setTimeout和setInterval函数的试用

最新推荐文章于 2022-07-30 12:12:31 发布

iteye_19217

最新推荐文章于 2022-07-30 12:12:31 发布

阅读量123

点赞数

分类专栏： javascript 文章标签： XHTML HTML

javascript 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个网页实时显示当前时间和自动更新功能，包括时间显示、页面跳转计时器、文本输入框控制按钮状态等。通过JavaScript实现定时任务、事件监听和页面元素操作，展示了网页动态交互的基本原理。

<!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>时间</title>
<script type="text/javascript">
var i=5;
var d=null;
var ttt=null;//页面跳转
function test(){

if(i>0)
document.getElementById("b").value=i;
else{
	clearInterval(d) ;
	document.getElementById("b").disabled=false;
	document.getElementById("b").value='提交';
}
--i;
}
var t=null;
function but(type){
var now=new Date();
var year=now.getYear();
var month=now.getMonth();
var date=now.getDate();
var day=now.getDay();
var hour=now.getHours();
var minu=now.getMinutes();
var sec=now.getSeconds();
var week;
month=month+1;
if(month<10) month="0"+month;
if(date<10) date="0"+date;
if(hour<10) hour="0"+hour;
if(minu<10) minu="0"+minu;
if(sec<10) sec="0"+sec;

switch (day){
case 1:
week="星期一";
break;
case 2:
week="星期二";
break;
case 3:
week="星期三";
break;
case 4:
week="星期四";
break;
case 5:
week="星期五";
break;
case 6:
week="星期六";
break; 
default:
week="星期天"
break;
}
var q=now.getMilliseconds();   
if(q<10)
{   
    q="00"+now.getMilliseconds();   
}   
if(q>=10 && q<100)
{   
    q="0"+now.getMilliseconds();   
}   
var time="";
time='现在时间：'+year+"年"+month+"月"+date+"日 "+week+" "+hour+":"+minu+":"+sec+":"+q;
if(type=='but'){
	document.getElementById("i").value=time;
 t=setTimeout("but('but')",100);
}
if(type=='auto'){
var div=document.getElementById("d");
div.innerHTML="<span style='color:red'>"+time+"</span>";
}


}
var si=null;
function run(){
si=setInterval("but('auto')",100);
d=setInterval("test()",1000);
ttt=setInterval("goTo()",1000);
}
function end(){
clearInterval(si) ;
}
function endbut(){
	clearTimeout(t) ;
	}
////页面跳转js
	var tt=5;
function goTo(){

	var t1=document.getElementById("t1");
	t1.innerHTML="<span style='color:red'>"+tt+"</span>";
	var t2=document.getElementById("t2");
	var n="";
	var ii=0
	for(ii=0;ii<tt;ii++){
	n+='*';
		}
	t2.innerHTML="<span style='color:blue;font-size:30px;vertical-align:middle;'>"+n+"</span>";
	tt--;

	if(tt<0)clearInterval(ttt) ;
}


</script>
</head>

<body onload="run(); ">
<label>自动运行的时间</label><br>
<div id="d" style="float: left;"></div><div style="float: left;"><input type="button" name="stop" value="stop" onclick="return end();"/><input type="button" name="stop" value="start" onclick="return run();"/></div>
<div style="clear: both;">==================================================================</div>
<label>代开始停止按钮的时间</label><br>
<div><input type="text" id="i" name="n" size="50"/><input type="button" value="start" onclick="return but('but');"/>
<input type="button" name="stop" value="stop" onclick="return endbut();"/></div>
<div>=============================================================</div>
<label>提交按钮等待5秒可用</label><br>
<input type="button" id="b" value="提交" disabled="disabled" style="height: 25px;width: 50px;"/>
<div style="clear: both;"><div>=============================================================</div>
<label>页面跳转时间等待</label><br>
页面正在跳转，<label id="t1"></label>请稍后<label id="t2" style="vertical-align:text-bottom;"></label>
<div style="clear: both;">==================================================================</div>

</body>
</html>