Timer设计
思路: 有一个开始计时按钮,一个结束计时按钮,一个文本框.
setTimeout()可以让文本框的数字每秒多1.
不能采取for, while的循环,因为时间没法精确控制. 所以采用setTimeout
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta. http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Timer</title>
<script. type="text/javascript">
<!-- 不能识别js的浏览器略过代码
// js 代码写这里
var the_timeout;
function upDate()
{
var number = window.document.the_form.the_time.value;
number = parseInt(number) + 1;
//默认文本框是string,所以不转换成数字的话,成为字符串相加了.
window.document.the_form.the_time.value = number;
the_timeout = setTimeout("upDate();",1000);
}
//这里upDate函数把文本框里面的值加1, 然后再隔1000毫秒以后再次调用自己.
如何访问到文本框的值还是用DOM
// ..... -->
</script>
</head>
<body>
<form. name="the_form">
<input type="text" name="the_time" value="0" />
<p>
<input type="button" value="Start timer" nClick = "clearTimeout(the_timeout); upDate();" />
//这里type要是button,不能是submit.
//为防止每次click就启动一个timeout,这样会越点越快,所以在点的时候就clearTimeout一下.就是把以前可
能已经存在的timeout清除.
<input type="button" value="Stop Timer" nClick = "clearTimeout(the_timeout);" />
</p>
</form>
</body>
</html>
很显然也可以依此写一个clock
图片的slide show
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta. http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Timed Slide Show</title>
<script. type="text/javascript">
<!-- 不能识别js的浏览器略过代码
// js 代码写这里
var the_images = new Array();
the_images[0] = new Image();
the_images[0].src = "1.jpg";
the_images[1] = new Image();
the_images[1].src = "2.jpg";
the_images[2] = new Image();
the_images[2].src = "3.jpg";
the_images[3] = new Image();
the_images[3].src = "4.jpg";
the_images[4] = new Image();
the_images[4].src = "5.jpg";
//存储一个图片对象的数组
var the_timeout;
var index = 0;
function rotateImage(index)
{ //注意index做为参数,这样就不会因为别的函数可能也用index还产生危险.
window.document.my_image.src = the_images[index].src;
//DOM
index++;
if (index >= the_images.length)
{
index = 0;
}
var function_string = "rotateImage("+index+");";
the_timeout = setTimeout(function_string,1000);
//不能写成setTimeout("rotateImage(index);");
}
// ..... -->
</script>
</head>
<body>
<img name= "my_image" src ="1.jpg" />
<form>
<input type= "button" value = "开始播放" nClick ="clearTimeout(the_timeout); rotateImage(0);"
/>
<input type= "button" value = "停止播放" nClick ="clearTimeout(the_timeout);" />
</form>
</body>
</html>
引用
刪除
wel3kxial / 2008-04-17 18:52:11