网络编程

基于jQuery实现美观且实用的倒计时实例代码
网络编程 2025/8/24 佚名
3 2

倒计时效果有着广泛的应用，比如奥运会倒计时、高考倒计时和放假倒计时等，本章节分享一个比较美观且实用的倒计时效果。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>倒计时效果代码</title>
<style type="text/css">
* {
 padding:0;
 margin:0;
}
.colockbox {
 width:250px;
 height:30px;
 overflow:hidden;
 color:#000000;
 background:url(mytest/jQuery/colockbg.png) no-repeat;
 margin:0px auto;
}
.colockbox span {
 float:left;
 display:block;
 width:40px;
 height:29px;
 line-height:29px;
 font-size:20px;
 font-weight:bold;
 text-align:center;
 color:#ffffff;
 margin-right:22px;
}
</style>
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.8.3.js">


以上代码实现了我们的要求，可以实现秒到天的倒计时效果，下面就介绍一下实现过程。


一.实现原理:


原理比较简单，就是取得到期时间的时间戳减去当前时间的时间戳，就是两者之间相差的秒数，然后通过这个秒数除以3600就是相差的小时数，然后再除以24，然后使用Math.floor()函数进行下舍入，就是相差的天数，下面获取小时、分钟和秒都是此原理。使用定时器函数每隔一秒调用一次相应的函数就实现了倒计时的效果。


二.代码注释:


1.$(function(){}）,当文档结构完全加载完毕再去执行函数中的代码。

2.countDown("2016/2/3 6:30:59","#colockbox1")，调用函数，第一个参数是到期的时间，第二个是div的id属性值。

3.function countDown(time,id){}，声明此函数。

4.var day_elem=$(id).find('.day')，获取div下class属性值为day的对象。

5.var hour_elem=$(id).find('.hour')，获取div下class属性值为hour的对象。

6.var minute_elem=$(id).find('.minute')，获取div下class属性值为minute的对象。

7.var second_elem=$(id).find('.second')，获取div下class属性值为second的对象。

8.var end_time=new Date(time).getTime()，获取到期事件的时间戳。

9.var sys_second=(end_time-new Date().getTime())/1000，获取到期时间和当前时间相差的秒数。

10.var timer=setInterval(function(){}，1000），每隔一秒执行一次函数。

11.if(sys_second>1) ，如果相差的秒大于1。

12.sys_second-=1，秒减一。

13.var day=Math.floor((sys_second/3600)/24)，获取相差的天数。

14.var hour=Math.floor((sys_second/3600)%24)，获取相差的小时数，注意后面是取模运算。

15.var minute=Math.floor((sys_second/60)%60)，获取相差的分钟数。

16.var second=Math.floor(sys_second%60)，获取相差的秒数。

17.$(day_elem).text(day)，将天写入span元素。

18.$(hour_elem).text(hour<10"0"+hour:hour)，将小时写入span，如果小时数小于10，前面加0，后面同样的道理。

19.clearInterval(timer)，如果相差的秒数到0，就停止计时器函数setInterval的执行。


以上内容是小编给大家分享的基于jQuery实现美观且实用的倒计时实例代码，希望本文分享能够给大家带来帮助。
标签：
jquery倒计时,jquery实现倒计时,jquery倒计时代码
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
白云城资源网 Copyright www.dyhadc.com
www.dyhadc.com 白云城资源网
129,905影音资源
244,626技术资源
111,817软件资源
578,645站长资源

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 更多链接
白云城资源网 Copyright www.dyhadc.com