博客列表 >js的农历新年倒计时表功能的实现

js的农历新年倒计时表功能的实现

李明伟的博客
李明伟的博客原创
2019年01月22日 14:08:02793浏览

js的农历新年倒计时表功能的实现

第一步——编写HTML与css代码

<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>倒计时</title>
<script src="jq_3.3.1_mi.js"></script>
</head>
<style>
#box{
margin:10px auto;
background: pink;
width: 600px;
height: 400px;
text-align: center;
}
p{
line-height: 400px;
color:lightyellow;
}
</style>
<body>
<div id="box">
<p></p>
</div>
</body>
</html>

第二步——设置时间的终点(此案例为农历新年的日期)

var newyear = new Date(2019,1,5,0,0,0,0);

 Date()函数中的参数依次为年,月,日,时,分,秒,毫秒

若不给与参数值则默认为当前的时间。

第三步——定义一个变量,它的值为所设置的时间终点与当前时间的差的毫秒数,并通过这个值得出天数,小时,秒。

var data = newyear.getTime()-myday.getTime();
var D = Math.floor(data/1000/60/60/24);
var H = Math.floor(data/1000/60/60%24);
var M = Math.floor(data/1000/60%60);
var S = Math.floor(data/1000%60);

getTIME()函数用于获取当前时间距1970年1月1日的毫秒数。

Math.floor用于获取将数向下取整。例如13.9取13。

第四步——将这些值按照倒计时的格式传值给html中的p标签

var p = document.getElementsByTagName('p')[0];
p.innerHTML = "2019年农历春节倒计时:"+D+"天"+H+"时"+M+"分"+S+"秒";

第五步——设置一个定时器循环执行第三与第四步从而实现倒计时功能

var timer = setInterval(function(){
var myday = new Date();
var data = newyear.getTime()-myday.getTime();
var D = Math.floor(data/1000/60/60/24);
var H = Math.floor(data/1000/60/60%24);
var M = Math.floor(data/1000/60%60);
var S = Math.floor(data/1000%60);
var p = document.getElementsByTagName('p')[0];
p.innerHTML = "2019年农历春节倒计时:"+D+"天"+H+"时"+M+"分"+S+"秒";
},1000);

setInterval()设置定时器的函数。

全部代码:

实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>倒计时</title>
    <script src="jq_3.3.1_mi.js"></script>
</head>
    <style>
        #box{
            margin:10px auto;
            background: pink;
            width: 600px;
            height: 400px;
            text-align: center;
        }
        p{
            line-height: 400px;
            color:lightyellow;
        }
    </style>
<body>
    <div id="box">
            <p></p>
    </div>
</body>
</html>
<script>
    var newyear = new Date(2019,1,5,0,0,0,0);
        var timer = setInterval(function(){
            var myday = new Date();
            var data = newyear.getTime()-myday.getTime();
            var D = Math.floor(data/1000/60/60/24);
            var H = Math.floor(data/1000/60/60%24);
            var M = Math.floor(data/1000/60%60);
            var S = Math.floor(data/1000%60);
            var p = document.getElementsByTagName('p')[0];
            p.innerHTML = "2019年农历春节倒计时:"+D+"天"+H+"时"+M+"分"+S+"秒";
        },1000);
            
    </script>

运行实例 »

点击 "运行实例" 按钮查看在线实例


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议