html5+javascript 简单的倒计时功能

最新推荐文章于 2024-06-12 11:55:25 发布

zhanganbo

最新推荐文章于 2024-06-12 11:55:25 发布

阅读量1k

点赞数

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

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

代码名称

<!DOCTYPE html>

<head>

<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>

<ul>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</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);

zhanganbo

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html5+javascript 简单的倒计时功能

代码名称倒计时实现 ul, li { margin: 0; padding: 0; list-style: none; } #countdown {
复制链接

扫一扫

专栏目录