本文分享了两个实用的JavaScript小程序：秒表和进度条。通过讲解window.setInterval的使用，帮助初学者理解如何实现定时更新UI的效果。
今天才开始想起来在这里发布做的一些js小程序。
在带领学生学习的过程中，我也不断的在温习和补完自己，今天开始，就把自己上课时带着大家做的一些小程序，逐渐的上传上来。
今天讲的是主要讲的是javascript的核心对象，带领着大家做了一个秒表和一个进度条，主要讲的就是window.setInterval的使用
这个是进度条相关的代码：
<html>
<head>
<script type="text/javascript">
var index = 0;
var flag;
function show()
{
flag = window.setInterval("add()",100);
}
function add()
{
if(index >= 800)
{
window.clearInterval(flag);
}
else
{
index += 4;
document.getElementById("d1").style.width = index + "px";
document.getElementById("d2").innerHTML = "已加载" + parseInt((index/800)*100) + "/100";
}
}
</script>
</head>
<body>
<div style="border:1px blue solid;width:800px;height:25px">
<div style="width:0px;height:23px;background-color:#FF99CC" id="d1"></div>
</div>
<div id="d2" style="font-size:9pt"></div>
<input type="button" value="加载" onclick="show();">
</body>
</html>
这个是秒表的代码：
<script language="javascript" type="text/javascript">
var x=0;
var y=0;
var z=0;
var aa;
function ontime()
{
document.getElementById("time").value = x + ":"+ y + ":" + z;
if(event.srcElement.value =="暂停")
{
window.clearInterval(aa);
}
else if(event.srcElement.value =="开始")
{
aa = window.setInterval(add, 10);
}
//已知 window.setInterval(函数，空隔时间) 每隔多长时间执行一次
}
function add()
{
if(z < 99)
{
z=z+1;
//alert(z);
}
else if(y < 59)
{
y+=1;
z = 0;
}
else
{
x += 1;
y = 0;
z = 0;
}
document.getElementById("time").value = x + ":"+ y + ":" + z;
}
function stop()
{
window.clearInterval(aa);
}
</script>
<body>
<input type="text" value="" id="time" />
<input type="button" value="开始" onClick="ontime()" />
<input type="button" value="暂停" onClick="ontime()" />
</body>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
