倒计时效果有着广泛的应用,比如奥运会倒计时、高考倒计时和放假倒计时等,本章节分享一个比较美观且实用的倒计时效果。
代码实例如下:
<!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实现美观且实用的倒计时实例代码,希望本文分享能够给大家带来帮助。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
更新日志
- [ABC]蔡琴《百万琴歌[6N纯银镀膜]》[低速原抓WAV+CUE]
- 群星《国风超有戏 第7期》[FLAC/分轨][147.99MB]
- 群星《闪光的夏天 第3期》[320K/MP3][61.94MB]
- 群星《闪光的夏天 第3期》[FLAC/分轨][336MB]
- 【迷幻电音】Elea-2024-Hypnos(FLAC)
- 【民族融合】VA-2024-TheOrientCollective:GoldenSand(FLAC)
- 谭嘉仪-EyesOnMe新曲+精选2022【低速原抓WAV+CUE】
- 尚士达《莫回头》[320K/MP3][184.64MB]
- 尚士达《莫回头》[Hi-Res][24bit 48kHz][FLAC/分轨][1.27G]
- 群星《奔赴!万人现场 第3期》[320K/MP3][98.9MB]
- 谭嘉仪《Lonely》【WAV+CUE】
- 群星《红色钢琴浪漫曲》2CD【WAV+CUE】
- 凤飞飞《浮世情怀》HQCD[正版原抓WAV+CUE]
- 群星《奔赴!万人现场 第3期》[FLAC/分轨][537.75MB]
- 群星 《2024好听新歌23》十倍音质 U盘音乐 [WAV分轨][1.6G]