ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

JavaScript(二十六)倒计时demo

2019-03-14 18:51:21  阅读:261  来源: 互联网

标签:hao demo JavaScript innerHTML 倒计时 parseInt sec res var


倒计时效果展示图

全部代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .b {
            width: 80px;
            height: 100px;
            border: 1px solid silver;
            float: left;
            margin: 10px 10px;
            text-align: center;
            line-height: 100px;
        }
    </style>

</head>
<body>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>

<script>
    var b = document.getElementsByClassName("b");
    //定义一个固定时间
    var timego = new Date("2020 4-26 00:00:00");
    var timenow = setInterval(function () {
        //获取当前时间
        var localtime = new Date();
        /*getTime()  获取当前时间到1970总毫秒数*/
        var timeres = timego.getTime() - localtime.getTime();
        var sec = parseInt(timeres / 1000);   //总秒数
        var secth = sec % 60;  //秒
        var minth = parseInt(sec / 60) % 60;  //分
        var houth = parseInt(sec / 3600) % 24;   //小时
        var datth = parseInt(sec / (3600 * 24)) % 31;    //天
        var month = parseInt(sec / (3600 * 24 * 31)) % 12;   //月
        var yeath = parseInt(sec / (3600 * 24 * 31 * 12)) % 100;//年

        b[0].innerHTML = yeath + "年";
        b[1].innerHTML = month + "月";
        b[2].innerHTML = datth + "日";
        b[3].innerHTML = houth + "时";
        b[4].innerHTML = minth + "分";
        b[5].innerHTML = secth + "秒";

        var hao = (timeres % 1000);
        var res = "";
      /*  if (hao < 10) {
            res = "00" + hao;
        }
        else if (hao > 10 && hao < 100) {
            res = "0" + hao;
        }
        else{
            res=hao;
        }*/
        res=(hao<10?"00"+hao:hao>10&&hao<100?"0"+hao:hao);
        b[6].innerHTML =res+"毫秒";
    }, 1)


</script>


</body>
</html>

 

标签:hao,demo,JavaScript,innerHTML,倒计时,parseInt,sec,res,var
来源: https://blog.csdn.net/We_jia/article/details/87892440

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有