用js写一个倒计时表

最新推荐文章于 2022-08-26 19:06:20 发布

a浮云

最新推荐文章于 2022-08-26 19:06:20 发布

阅读量150

点赞数 2

文章标签： js css html javascript

本文链接：https://blog.csdn.net/you_very_brave/article/details/117035058

版权

html代码布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, 			initial-scale=1.0">
    <title>倒计时</title>
</head>
<body>
    <div>
        <p>距离2021的国庆节还剩:</p>
        <span>0</span>天
        <span>0</span>小时
        <span>0</span>分钟
        <span>0</span>秒
    </div>
</body>
</html>

这里html和css布局可以根据自己的喜爱来布局

###css样式代码

<style>
    div{
        margin: 0 auto;
        width: 80%;
        font-size: 26px;
        font-weight: bold;
    }

    span{
        font-size: 26px;
        color:red;
    }

</style>

重要的如何用js代码实现数据的交互

<script>
    window.onload = function(){
    	//setInterval(handler,1000)每隔一秒执行一次
       var id= setInterval(function(){
            var toDay = new Date(); //当前时间
            var endDay = new Date(2021,10,1);//结束时间
        
        var num = Math.round((endDay.getTime() - toDay.getTime())/1000); //获取当今距离国庆的秒数

        var day = parseInt(num/(24*60*60));//获取天数
        var hour = parseInt((num-day*24*60*60)/(60*60))//获取小时
        var minute = parseInt((num - day*24*60*60 - hour*3600)/60) //获取分钟
        var sec =num - day*24*60*60 - hour*3600 - minute*60 //获取几秒
        // console.log(sec);

        var spans = document.getElementsByTagName('span')
		//获取span的节点
        spans[0].innerHTML = change(day);//获取sapn标签内的内容
        spans[1].innerHTML = change(hour);
        spans[2].innerHTML = change(minute);
        spans[3].innerHTML = change(sec);
            if(num<0){
                clearInterval(id)//清楚setInterval的，停止执行
               for(var i=0;i<spans.length;i++){

                   spans[i].innerHTML ='00'
                   document.getElementsByTagName('p')[0].innerHTML='已经过了那个时间了'
               }
                
            }
    
        },1000)
        //将小于10的字符前加上0
        function change(num){
            if(num<10){
               return '0'+num
            }else{
               return ''+num 
            }
        }
       
    }
</script>

效果如下

http://47.95.251.111/js-demo/%e5%80%92%e8%ae%a1%e6%97%b6/%e6%97%b6%e9%92%9f.html.

a浮云

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
用js写一个倒计时表

html代码布局<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <
复制链接

扫一扫