通过JavaScript倒计时

最新推荐文章于 2022-12-27 14:59:32 发布

有品位的程序员

最新推荐文章于 2022-12-27 14:59:32 发布

阅读量365

点赞数 2

分类专栏： JavaScript HTML5/CSS3 文章标签： javascript html

本文链接：https://blog.csdn.net/The_Handsome_Sir/article/details/106409299

版权

HTML5/CSS3 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

JavaScript

14 篇文章 1 订阅

订阅专栏

精简版

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
<script>
    var t = 9;
    function time(){
        if(t>=0){
            setTimeout(function(){
                document.getElementById("clock").innerHTML = t;
                t--;
                time();
            },1000);
        }
    }
</script>
<h1 id="clock"></h1>
<input type="button" value="倒计时开始" onclick="time()">
</body>
</html>

花里胡哨版

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
</head>
<body>
<script>
var t = 9;
function time(){
	if(t>=0){
		setTimeout(function(){
			setStyle();
			document.getElementById("clock").innerHTML = t;
			t--;
			time();
		},1000);
	}
}
function setStyle(){
	this.r = Math.floor(Math.random()*255);
	this.g = Math.floor(Math.random()*255);
	this.b = Math.floor(Math.random()*255);
	document.body.style.color='rgb('+ this.r +','+ this.g +','+ this.b ;
}
</script>
<h1 id="clock"></h1>
<input type="button" value="倒计时开始" onclick="time()">
</body>
</html>

效果
在这里插入图片描述

有品位的程序员

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
通过JavaScript倒计时

<!DOCTYPE html><html><head> <meta charset="utf-8"> </head><body><script>var t = 9;function time(){ if(t>=0){ setTimeout(function(){ setStyle(); document.getElementById("clock").innerHTML = t;
复制链接

扫一扫

专栏目录