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>

setTimeout的使用

<!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>

setInterval,clearInterval的使用

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>

你可能感兴趣的:(JavaScript)