95JS原生：现在时间和倒计时

2019-06-03 14:02:44 阅读：350 来源： 互联网

标签：原生 95JS tow 倒计时 second nowDate var math getDate

1、现在时间
```html:run
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>北京时间</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        p {
            font-size: 70px;
            text-align: center;
            font-family: 宋体;
        }
        p span {
            display: block;
            color: black;
            float:left;
        }
        p#math {
            color: red;
            height: 80px;
            width:990px;
            margin:0 auto;
        }
        p#math div {
            text-align: center;
            width: 40px;
            height: 80px;
            line-height: 80px;
            float: left;
            font-family: UniDreamLED;
        }
        img{
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<p id="char">北京时间,现在是：</p>
<p id="math"></p>
<script>
    var math = document.getElementById('math');
    function tow(n) {
        var str1="";
        n = n >= 0 && n < 10 ? '0' + n : '' + n;
        for (var i = 0; i < n.length; i++) {
            var str2=n[i];
            str2="<div>"+str2+"</div>";
            str1+=str2;
        }
        return str1;
    }
    function getDate() {
        var nowDate = new Date();
        var year = nowDate.getFullYear();
        var month = nowDate.getMonth() + 1;
        var date = nowDate.getDate();
        var hour = nowDate.getHours();
        var minute = nowDate.getMinutes();
        var second = nowDate.getSeconds();
        var str = tow(year) + "<span>年</span>"
                + tow(month) + "<span>月</span>"
                + tow(date) + "<span>日</span>"
                + tow(hour) + "<span>时</span>"
                + tow(minute) + "<span>分</span>"
                + tow(second) + "<span>秒</span>";
        math.innerHTML = str;
    }
    getDate();
    setInterval(getDate, 1000);
</script>
</body>
</html>
```


2、倒计时：
```html:run
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding:0;
        }
        p {
            font-size: 95px;
            text-align: center;
        }

        p span {
            color: red;
        }

        p span.time {
            color: black
        }
    </style>
</head>
<body>
<p>距离2020年还有</p>
<p><span></span></p>
<script>
    var oSpan = document.getElementsByTagName('span')[0];
    function tow(n) {
        return n >= 0 && n < 10 ? '0' + n : '' + n;
    }
    function getDate() {
        var oDate = new Date();//获取现在日期对象
        var oldTime = oDate.getTime();//现在距离1970年的毫秒数
        var newDate = new Date('2020/1/1 00:00:00');//获取指定日期对象
        var newTime = newDate.getTime();//2020年距离1970年的毫秒数
        var second = Math.floor((newTime - oldTime) / 1000);//未来时间距离现在的秒数
        var day = Math.floor(second / 86400);//整数部分代表的是天；一天有24*60*60=86400秒 ；
        second = second % 86400;//余数代表剩下的秒数；
        var hour = Math.floor(second / 3600);//整数部分代表小时；
        second %= 3600; //余数代表 剩下的秒数；
        var minute = Math.floor(second / 60);
        second %= 60;
        var str = tow(day) + '<span class="time">天</span>'
                + tow(hour) + '<span class="time">小时</span>'
                + tow(minute) + '<span class="time">分钟</span>'
                + tow(second) + '<span class="time">秒</span>';
        oSpan.innerHTML = str;
    }
    getDate();
    setInterval(getDate, 1000);
</script>
</body>
</html>
```

标签：原生,95JS,tow,倒计时,second,nowDate,var,math,getDate
来源： https://www.cnblogs.com/gushixianqiancheng/p/10967185.html

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

ICode9

95JS原生：现在时间和倒计时