小项目-倒计时时钟

最新推荐文章于 2024-05-16 23:30:28 发布

lhh_12345

最新推荐文章于 2024-05-16 23:30:28 发布

阅读量298

点赞数

分类专栏： Javascript 文章标签：倒计时时钟

本文链接：https://blog.csdn.net/lhh_12345/article/details/53376169

版权

Javascript 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<style type="text/css">
div{ width:200px; height:100px; background-color:black; margin:0 auto; padding-top:20px;color:#fff;font-family:"微软雅黑"; text-align:center;}
span{ background:#fff; margin:20px;color:#000;}
button{ width:160px; height:40px;background:green;color:#fff; outline:none; border:none; border-radius:10px; margin:20px 0 0 0;}
</style>
</head>

<body>
<div>
<span>01</span>分钟<span>40</span>秒
<button type="button">启动</button>
</div>
<script type="text/javascript">
var btn=document.getElementsByTagName("button");
var spans=document.getElementsByTagName("span");

btn[0].addEventListener("click",function(){
	
	function changeTime(){
	var time0=parseInt(spans[0].childNodes[0].nodeValue);//获取文本节点中的字符串并将其转化为数字
	var time1=parseInt(spans[1].childNodes[0].nodeValue);
		if(time1>0){
			time1 --;
			spans[1].innerHTML = time1;
			}
		else if(time1==0&&time0!=0){  
			spans[0].innerHTML = 0;
			spans[1].innerHTML = 60;
		    time1=parseInt(spans[1].childNodes[0].nodeValue);//重新写入span[0]之后，time1发生改变，需要再获取一次
			}
		else if(time1==0&&time0==0){
			clearInterval(clear);
			}
		}
	if(btn[0].innerHTML=="启动"){
	   clear=setInterval(changeTime,1000);	
	   btn[0].style.background="red";
	   btn[0].innerHTML="取消";
	}
	else{
	   clearInterval(clear);
	   btn[0].style.background="green";
	   btn[0].innerHTML="启动";	
	}
		
},false);
</script>
</body>

说明：该项目中需要注意的是定时器函数中的条件变化

源码：

<style>
body,div{margin:0;padding:0;}
body{color:#fff;font:16px/1.5 \5fae\8f6f\96c5\9ed1;}
#countdown{width:300px;text-align:center;background:#1a1a1a;margin:10px auto;padding:20px 0;}
input{border:0;width:283px;height:50px;cursor:pointer;margin-top:20px;background:url(img/btn-1.png) no-repeat;}
input.cancel{background-position:0 -50px;}
span{color:#000;width:80px;line-height:2;background:#fbfbfb;border:2px solid #b4b4b4;margin:0 10px;padding:0 10px;}
</style>
<script>
window.onload = function ()
{
	var oCountDown = document.getElementById("countdown");	
	var aInput = oCountDown.getElementsByTagName("input")[0];
	var timer = null;
	
	aInput.onclick = function ()
	{
		this.className == "" ? (timer = setInterval(updateTime, 1000), updateTime()) : (clearInterval(timer));
		this.className = this.className == '' ? "cancel" : '';	
	};
	
	function format(a)
	{
		return a.toString().replace(/^(\d)$/,'0$1')
	}
	
	function updateTime ()
	{
		var aSpan = oCountDown.getElementsByTagName("span");
		var oRemain = aSpan[0].innerHTML.replace(/^0/,'') * 60 + parseInt(aSpan[1].innerHTML.replace(/^0/,''));
		if(oRemain <= 0)
		{
			clearInterval(timer);
			return
		}
		oRemain--;
		aSpan[0].innerHTML = format(parseInt(oRemain / 60));
		oRemain %= 60;
		aSpan[1].innerHTML = format(parseInt(oRemain));
	}
}
</script>
</head>
<body>
<div id="countdown">
	<span>01</span>分钟<span>40</span>秒
	<input type="button" value="" />
</div>
</body>

lhh_12345

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
小项目-倒计时时钟

div{ width:200px; height:100px; background-color:black; margin:0 auto; padding-top:20px;color:#fff;font-family:"微软雅黑"; text-align:center;}span{ background:#fff; margin:20px;color:#000;}button{ width
复制链接

扫一扫

专栏目录