Date和应用

最新推荐文章于 2024-07-15 14:11:16 发布

Little-Gao

最新推荐文章于 2024-07-15 14:11:16 发布

阅读量212

点赞数

分类专栏： JavaScript 文章标签： javascript Date

本文链接：https://blog.csdn.net/sinat_24227777/article/details/75574973

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

 
 目录 

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>