javascript学習四:事件処理

13390 ワード

JavaScript

具体的な内容はコードとコメントを見てください.
onclick、onmouseoverの使用

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>js01_hello</title>
    <meta name="author" content="Administrator" />
    <script type="text/javascript"> function clickD(obj) { alert(obj.innerHTML);//  “      ” } function mouseD(obj) { //         ， js           xx.style.     obj.style.color = "#f00"; //             ，   css   -   ，       ，font-size-->fontSize obj.style.fontSize = "18px"; } function outD(obj) { obj.style.color = "#000"; obj.style.fontSize = "16px"; } </script>
</head>
<body>
    <div onclick="clickD(this)" style="cursor: pointer">      </div>
    <div onmouseover="mouseD(this)" onmouseout="outD(this)">        </div>
</body>
</html>

withメソッドの使用

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>js01_hello</title>
    <meta name="author" content="Administrator" />
    <script type="text/javascript"> with(document) { //               document     ，   write(xxx)   document.write(xxx); write("aaa<br/>"); write("bbb<br/>"); write("ccc<br/>"); //  alert    ，     document   ，    ，        。 alert("abc"); } </script>
</head>
<body>
</body>
</html>

set Timeoutの使用

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>js01_hello</title>
    <meta name="author" content="Administrator" />
    <script type="text/javascript"> function cd() { // 3      bigger    ,setTimeout                   //setTimeout        ，        ，    setInterval setTimeout("bigger()",3000); } function bigger() { //  html    id txt    var node = document.getElementById("txt"); node.style.fontSize = "200px"; } </script>
</head>
<body>
    <div id="txt" style="cursor: pointer">  </div>
    <div onclick="cd()">      </div>
</body>
</html>

set Interval、clear Intervalの使用
初期のintervalはいくつかの浮遊広告に使用されています.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>js01_hello</title>
    <meta name="author" content="Administrator" />
    <script type="text/javascript"> var timeId; function cd() { // 3      bigger    ,setTimeout                   //setInterval                timeId = setInterval("bigger()",500); } function sd(){ clearInterval(timeId); } function bigger() { //  html    id txt    var node = document.getElementById("txt"); var size = parseInt(node.style.fontSize); if(size) { size+=10; } else { size = "14"; } node.style.fontSize = size+"px"; } </script>
</head>
<body>
    <div id="txt">  </div>
    <div onclick="cd()" style="cursor: pointer">      </div>
    <div onclick="sd()" style="cursor: pointer">    </div>
</body>
</html>

Android Studioを初めて使う時に知っておくべきすべての構成