您的位置：首页 > Web前端 > JavaScript

<香港科技大学html+css+js课堂笔记>week3--DOM模型基础第二部分

2016-03-23 22:00 681 查看
8.鼠标事件：

onclick

onmousedown

onmouseup

onmouseover

onmouseout

Eg:

<html><body><script>

function change_colour( new_colour ) {

document.getElementById("myDiv")

.style.background=new_colour;

}

</script>

<div id="myDiv"

style="position:absolute; background:yellow;

left:300; top:100; width:300; font­size:52pt"

onmouseover="change_colour('red');"

onmouseout="change_colour('yellow');">

Move your mouse over this ...

then move it out...

</div>

</body></html>

9.timer计时器：

setTimeout， setInterval

clearTimeout ，clearInterval

1>setTimeout(do_something, time):

过了time毫秒的时间，执行do_something()函数事件,只执行一次；

2>clearTimeout(the_timer):

解除计数器。

3>setInterval(do_something, time):

过一段time毫秒的时间，执行do_something()函数事件,不断重复执行。

4>clearInterval(the_timer):

接触计数器，定时器。

Eg1:

<html><head><script>

var the_timer, x_position = 0, the_image;

function set_timer() {

the_image = document.getElementById("stones_img");

x_position = x_position + 1;

the_image.style.left = x_position;

the_timer = setTimeout(set_timer, 50); }

</script></head>

<body onload="set_timer()">

<img src="stones.png" id="stones_img"

style="position:absolute; left:0">

<button onclick="clearTimeout(the_timer)">

Stop!</button>

</body></html>

Eg2:

<html><head><script>

var the_timer, x_position = 0, the_image;

function do_timer(){

the_image = document.getElementById("stones_img");

x_position = x_position + 1;

the_image.style.left = x_position;

}

</script></head>

<body onload="the_timer=setInterval(do_timer, 50)">

<img src="stones.png" id="stones_img"

style="position:absolute; left:0">

<button onclick="clearInterval(the_timer)">

Stop!</button>

</body></html>

10.加入和去除事件监听：

1>使用html加入事件监听器：

Eg:

<html><head><script>

function do_something() {alert("Page has loaded");}

</script></head>

<body onload="do_something()"></body>

</html>

2>使用js加入事件监听器：

Eg1:

<html><body id="theBody">

<script>

function do_something() { alert("Page has loaded") }

window.onload = do_something; //方法1

</script>

</body></html>

Eg2:

<html><body>

<script>

function do_something() { alert("Page has loaded") }

window.addEventListener("load", do_something); //方法2

</script>

</body></html>

3>用js去除事件监听：

var theBody = document.getElementById("theBody");

theBody.removeEventListener("load", do_something);

Eg:

<html><body>

<button id="btn0" onclick=" alert('Hello!') ">

Click Me!</button><br>

<button id="btn1">Remove Listener</button>

<script>

function do_something() { alert('Clicked'); }

var btn0 = document.getElementById("btn0");

btn0.addEventListener("click", do_something);

var btn1 = document.getElementById("btn1");

btn1.addEventListener("click", function() {

btn0.removeEventListener("click", do_something);

});

</script></body></html>



11.更多的js函数：

1>声明函数：

方法1：

var functionTwo = function() {

. . . code here . . .

}

方法2：

var functionTwo = function thisFunc() {

. . . code here . . .

}

2>将一个函数名作为参数传递给另一个函数：

Eg:

<!doctype html>

<html>

<head>

<script>

function check(a, b){

if (b!=0) return true;

else return false;

}

function myDivide( fn, num, div ) {

if (fn(num, div)) {

alert("It's OK!");

return num/div;

} else {

alert("Not OK!");

}

}

result=myDivide(check, 44, 1);

</script>

</head>

</html>

3>在一个函数中将另一个函数作为返回值返回：

Eg:

<!doctype html>

<html>

<head>

<script>

function counter() {

var count = 0;

return function() {

count++;

alert(count);

}

}

var count = counter();

count();

count();

count();

</script>

</head>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航