基于Javascript实现倒计时功能
发布于 2017-04-07 03:18:47 | 126 次阅读 | 评论: 0 | 来源: 网友投递
这里有新鲜出炉的Javascript教程，程序狗速度看过来！
JavaScript客户端脚本语言
Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。
这篇文章主要为大家详细介绍了基于Javascript实现倒计时功能的相关资料，感兴趣的小伙伴们可以参考一下
本文实例实现一个倒计时功能. 倒计时功能, 用在项目的发布时间, 或者某个活动做倒计时等等的突出时间功能的方面.
界面代码结构,先要完成好. 这个界面我就不做那么美观了,凑合就行(O(∩_∩)O哈哈~).
代码名称
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>倒计时实现</title>
<style>
ul, li {
margin: 0;
padding: 0;
list-style: none;
}
#countdown {
font-size: 50px;;
width: 350px;
margin: 0 auto;
background-image: none;
color: #fff;
padding: 100px;
font-weight: bolder;
}
#countdown ul {
display: flex;
align-items: flex-start;
justify-content: center;
}
#countdown ul li{
display: inline-block;
margin-left: 10px;
}
#countdown ul li:last-child {
margin-right: 10px;
}
#countdown ul li strong {
text-shadow: 5px 5px 5px #000;
}
#countdown ul li strong, #countdown ul li span {
display: block;
text-align: center;
}
#sec {
color: #ff0000;
text-shadow: 5px 5px 2px #ff0000;
}
</style>
</head>
<body>
<div id="countdown">
<ul>
<li>
<strong id="day">00</strong>
<span>天</span>
</li>
<li>:</li>
<li>
<strong id="hour">00</strong>
<span>时</span>
</li>
<li>:</li>
<li>
<strong id="min">00</strong>
<span>分</span>
</li>
<li>:</li>
<li>
<strong id="sec">00</strong>
<span>秒</span>
</li>
</ul>
</div>
</body>
</html>
下面做Javascript的讲解了.
首先设定一个结束时间,时间通过new Date()来进行创建. 这样才能够计算倒计时的时间.
//结束时间
var t_endtime = new Date("2016-05-22 00:00:00");
然后就是换算规则,规则的换算是常理了.
// 时间换算规则
var t_day = 60 * 60 * 24;
var t_hour = 60 * 60;
var t_min = 60;再次就是通过setInterval来计算当前时间的对比, 因为时间在一秒一秒的过去, 当前时间的获取就在setInterval中进行计算. 当然还得将计算出的结果显示到界面上.
var ele_day = document.getElementById("day");
var ele_hour = document.getElementById("hour");
var ele_min = document.getElementById("min");
var ele_sec = document.getElementById("sec");
setInterval(function () {
//获取当前时间
var t_currenttime = new Date();
//结束时间 - 当前时间 = 剩余时间
var t_result = t_endtime.getTime() - t_currenttime.getTime();
//剩余时间换算
var t_time = Math.floor( t_result / 1000 );
var t_result_day = Math.floor( t_time / t_day );
var t_result_hour = Math.floor( t_time % t_day / t_hour);
var t_result_min = Math.floor(t_time % t_day % t_hour/ t_min);
var t_result_sec = Math.floor( t_time % t_day % t_hour % t_min);
// 将时间小于10的,在值前面加入0;
if ( t_result_day < 10) {
t_result_day = "0" + t_result_day;
}
if ( t_result_hour < 10) {
t_result_hour = "0" + t_result_hour;
}
if ( t_result_min < 10) {
t_result_min = "0" + t_result_min;
}
if ( t_result_sec < 10) {
t_result_sec = "0" + t_result_sec;
}
//显示到页面上
ele_day.textContent = t_result_day;
ele_hour.textContent = t_result_hour;
ele_min.textContent = t_result_min;
ele_sec.textContent = t_result_sec;
}, 1000);
很简单, 一个倒计时功能就完成了.
以上就是本文的全部内容，希望对大家的学习有所帮助。
推荐阅读
最新资讯