简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > js的农历新年倒计时表功能的实现
Blogger Information
Blog 40
fans 1
comment 0
visits 32707
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
js的农历新年倒计时表功能的实现
李明伟的博客
Original
802 people have browsed it

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>

运行实例 »

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


Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！