zoukankan      html  css  js  c++  java
  • 倒计时

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>北京时间</title>
    </head>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
            color: red;
        }
        #time,#time2,#time3{
            width: 800px;
            height: 100px;
            line-height: 100px;
            font-size: 30px;
            font-family: "微软雅黑";
            position: absolute;
            margin: auto;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.4);
            box-shadow: 0px 0px 10px #000;
            text-align: center;
        }
        #time{
            top: 0;
        }
        #time2{
            top: 30%;
        }
        #time3{
            top: -30%;
        }
    </style>
    <body>
        <div id="time"></div>
        <div id="time2"></div>
        <div id="time3"></div>
    </body>
    <script>
        window.onload = function(){
            times();
            function times(){
                showTime();    
                function minSecond(i){
                    if(i<10){
                        i = "0" + i; 
                    }
                    return i;
                }
                function showTime(){
                    var bjtime = new Date();
                    var bjyear = bjtime.getFullYear();
                    var bjmonth = bjtime.getMonth()+1;
                    var bjday = bjtime.getDate();
                    var week = bjtime.getDay();
                    var hours = bjtime.getHours();
                    var min = bjtime.getMinutes();
                    var seconds = bjtime.getSeconds();
                    min = minSecond(min);
                    seconds = minSecond(seconds);
                    var weekday = ["","","","","",""];
                    
                    document.getElementById("time").innerHTML ="现在是北京时间:" + bjyear +"年-"+ bjmonth +"月-"+ bjday +"日-" + "星期" + weekday[week] + "-" + hours +":" + min +":"+ seconds  ;
                    setInterval(showTime,1000);
                }
            }
    
            var curtime = new Date();
            var endtime = new Date("2016,10,1");
            var lefttimeday = Math.floor((endtime.getTime() - curtime.getTime())/(24*60*60*1000));
            document.getElementById("time2").innerHTML = "距离国庆还有:" + lefttimeday + "";
    
    
    
    
            showTime2();
            
            function showTime2(){
                var nowtime = new Date();
                var endtime2 = new Date("2017/1/1,00:00:00");
                var chatime = parseInt((endtime2.getTime() - nowtime.getTime())/1000);
                var d = parseInt(chatime/(24*60*60));
                var h = parseInt(chatime/(60*60)%24);
                var m = parseInt(chatime/60%60);
                var s = parseInt(chatime%60);
                document.getElementById("time3").innerHTML = "距离元旦还有:" + d + "" + h + "小时" + m + "分钟" + s + ""; 
                if(chatime<=0){
                    document.getElementById("time3").innerHTML = "身份证到期了";
                }else{
                    setInterval(showTime2,1000);
                }
            }
        }
    </script>
    </html>

  • 相关阅读:
    Vue源码探究-数据绑定的实现
    vue 数组遍历方法forEach和map的原理解析和实际应用
    vue 微信内H5调起支付
    uni-app官方教程学习手记
    vue-cli3 搭建的前端项目基础模板
    vue.js响应式原理解析与实现
    vue-waterfall2 基于Vue.js 瀑布流组件
    解决lucene更新删除无效的问题
    spring项目启动报错
    js监听页面copy事件添加版权信息
  • 原文地址:https://www.cnblogs.com/mymission/p/5864241.html
Copyright © 2011-2022 走看看