1.1 结合date()和setTimeOut()实现简单的时钟效果

Posted 2020-07-17 没有比脚更长的路

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了1.1 结合date()和setTimeOut()实现简单的时钟效果相关的知识，希望对你有一定的参考价值。

一、简单的时钟效果

首先要熟悉日期函数date()以及其常用的方法

getFullYear() 返回完整的年份比如：2016

getMonth() 返回月份（从0开始，需+1）

getDate() 返回日期

getHours() 返回小时数

getMinutes() 返回分钟数

getSeconds() 返回秒数

getDay() 返回星期几（0-6,0是星期天，1是星期一）

写一个简单的html页面，用来展示时钟效果

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>时钟效果</title>
    <meta charset="utf-8" />
    <style>
        div{
            color:white;
            margin:0 auto;
            text-align:center;
            font-size:40px;
            width:500px;
            height:200px;
            background:orangered;
            padding-top:10px;
            line-height:150%;
        }
    </style>
   
</head>
<body>
    <div id="htime">显示当前时间</div>
</body>
</html>

运行效果如下：

加入js代码：

<script>
        window.onload = function () {
            getTime();
        }
        function getTime() {
            var now = new Date();
            var year = now.getFullYear();
            var month = now.getMonth() + 1;//月份要加一
            var date = now.getDate();
            var hour = now.getHours();
            var minute = now.getMinutes();
            minute = minute > 10 ? minute : ("0" + minute);
            var second = now.getSeconds();
            second = second > 10 ? second : ("0" + second)

            var w = now.getDay();//星期几

            //星期
            var week = new Array(7);
            week[0] = "星期日";
            week[1] = "星期一";
            week[2] = "星期二";
            week[3] = "星期三";
            week[4] = "星期四";
            week[5] = "星期五";
            week[6] = "星期六";

            document.getElementById("htime").innerHTML = year + "年" + month + "月" + date + "日 " + "</br>" + hour + "时" + minute + "分" + second + "秒" + "</br>" + week[w];
            setTimeout(getTime, 500);//500毫秒执行一次

        }
    </script>

运行效果如下：

二、高考倒计时

 //距离高考仅剩多少天
        function gkLast() {
            var curTime = new Date();
            var gkTime = new Date(2016, 5, 6);//设置高考时间 月份是从0开始的奥，所以此处是5而非6
            var lastTime = gkTime.getTime() - curTime.getTime();//getTime()获取毫秒数
            //1天=24小时 1小时=60分钟  1分钟=60秒  1秒=1000毫秒
            var days = Math.ceil(lastTime / (24 * 60 * 60 * 1000));//Math.ceil() 向上取整，比如1.1=2；2.0=2；3.7=4；
            document.getElementById("htime").innerHTML = "距离高考仅有"+days+"天";
        }

三、抢购活动倒计时

  function QiangGou() {
            var now = new Date();//获取当前时间
            var endTime = new Date(2016, 5, 1);//抢购结束时间2016/6/1 此处注意月份
            var lastTime = (endTime.getTime() - now.getTime())/1000;//剩余的秒数
            var day = Math.floor(lastTime / (60 * 60 * 24));//天数
            var hour = Math.floor(lastTime / (60 * 60) % 24);//小时
            var minute = Math.floor(lastTime / 60 % 60);//分钟
            var sencond = Math.floor(lastTime % 60);//秒数
            document.getElementById("htime").innerHTML = "距离活动结束还有" + day + "天" + hour + "小时" + minute + "分钟" + sencond + "秒";
            if (lastTime<=0) {
                document.getElementById("htime").innerHTML = "活动已结束";
            }
            setTimeout(QiangGou, 500);//500毫秒执行一次
        }

以上是关于1.1 结合date()和setTimeOut()实现简单的时钟效果的主要内容，如果未能解决你的问题，请参考以下文章

250张png图片实现动画实现方案事件

自执行函数与setTimeout结合计算

毕业设计/Matlab系列基于PCA和BP神经网络相结合的图像压缩技术

JavaScript函数setInterval()和setTimeout()正确的写法