Date和应用

来源：互联网发布：创维电视网络唤醒编辑：程序博客网时间：2024/06/01 09:34

目录

01、显示当前时间

02、倒计时

01、显示当前时间

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>Date</title>    <style type="text/css">        body,div{            margin: 0;            padding: 0;            font-family: "Microsoft YaHei", "微软雅黑", tahoma, arial, simsun, "宋体";            font-size: 28px;        }        #div{            margin: 10px auto;            width: 800px;            height: 50px;            line-height: 50px;            text-align: center;            border: 1px solid red;            background:-webkit-linear-gradient(top left,#FFBAB3,#00b7ee,#4CD964);        }    </style></head><body>    <div id="div"></div>    <script type="text/javascript">        //获取当前自己电脑的时间；不能做重要的用途，例如淘宝秒杀        //var time=new Date();        //console.log(time);        //Date.html:13 Thu Jul 20 2017 14:53:24 GMT+0800 (中国标准时间)        //时间格式数据(对象数据类型的)        //2017年07月20日 星期四 14时53分24秒        var oDiv=document.getElementById('div');        oDiv.innerHTML="北京时间："+formatTime();        varsetTime=setInterval(function(){            oDiv.innerHTML="北京时间："+formatTime();        },1000);        function formatTime(){            var time=new Date();            var year=time.getFullYear();            var month=time.getMonth()+1;//0-11代表我们的1-12月            var day=time.getDate();            var w=time.getDay();//0-6之间，代表周日-周六            var wStr="日一二三四五六",week=wStr.charAt(w);            var hours=time.getHours();            var minutes=time.getMinutes();            var seconds=time.getSeconds();            var mlSeconds=time.getMilliseconds();//毫秒            return year+"年"+zero(month)+'月'+zero(day)+'日  星期'+week+'  '+zero(hours)+'时'+zero(minutes)+'分'+zero(seconds)+'秒';        }        function zero(val){            return val<10?'0'+val:val;        }    </script></body></html>

02、倒计时

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>倒计时</title>    <style type="text/css">        body,div{            margin: 0;            padding: 0;            font-family: "Microsoft YaHei", "微软雅黑", tahoma, arial, simsun, "宋体";            font-size: 28px;        }        #div{            margin: 10px auto;            width: 800px;            height: 50px;            line-height: 50px;            text-align: center;            border: 1px solid red;            background:-webkit-linear-gradient(top left,#FFBAB3,#00b7ee,#4CD964);        }    </style></head><body>    <div id="div"></div>    <script type="text/javascript">        //把时间格式的字符串变成我们的标准时间格式        //var str=new Date("2017-07-20 17:50:00");        //对字符串的格式有要求        //中间用'-'在IE6-8下不兼容，需要改成'/'        var oDiv=document.getElementById('div');        var targetTime="2017/07/20 19:50:00";        var str=getSpanTime(targetTime);        oDiv.innerHTML="距离下课："+str;        //每隔一秒，更新一次        setInterval(function(){            var str=getSpanTime(targetTime);            oDiv.innerHTML="距离下课："+str;        },1000);        /**         * 倒计时， 计算当前时间 与 目标时间的时间差         * @param targetTime 目标时间         * @returns {string} 返回倒计时         */        function getSpanTime(targetTime){            //getTime:获取距离1970年1月1日午夜(00:00)之间的毫秒差            var tarTime=new Date(targetTime);            var curTime=new Date();            var tarSpan=tarTime.getTime();            var curSpan=curTime.getTime();            var difTime=tarSpan-curSpan;//当前时间距离目标时间的毫秒差            //接下来我们用毫秒差算出包含多少个小时、分钟、秒就好            //1、算出总毫秒中包含的小时有几个            var hour=Math.floor(difTime/(1000*60*60));            //2、算出当前这几个小时占了多少毫秒            var hourMs=hour*60*60*1000;            //3、接下来算分钟的时候，需要把小时占用的减去            var spanMS=difTime-hourMs;            //4、开始算s中包含多少分钟            var minute=Math.floor(spanMS/(1000*60));            //5、算这么多分钟占用多少毫秒            var minuteMs=minute*60*1000;            //6、算秒的时候把分钟占用的也减去            spanMS=spanMS-minuteMs;            //7、算剩下的包含多少秒            var second=Math.floor(spanMS/1000);            return zero(hour)+':'+zero(minute)+':'+zero(second);        }        /**         * 补零，参数小于10，前面就补零         * @param val 需要补零的参数         * @returns {string} 返回结果         */        function zero(val){            return val<10?'0'+val:val;        }    </script></body></html>

阅读全文

0 0