javascript倒计时代码,javascript倒计时跳转,javascript倒计时,js,服务器时间,倒计时,秒
web前端-js教程
之前在网上看到有人提问，如何在页面上同步显示服务器的时间，其实实现方法有几种，可能 一般人立马就想到可以使用Ajax每隔一秒去请求服务器，然后将服务器获取到时间显示在页面上，这样虽然能够实现，但存在一个很大的问题，那就是每隔一秒 去请求服务器，这样如果用户多了，服务器就会崩溃（内存占用率会很大），所以在我看来，这种方法不可行，我这里给出一种解决方案，能够实现同步服务器时间、同步倒计时，却不占用服务器太多资源，下面我给写实现的思路：安卓订餐源码,vscode爱心代码,ubuntu三个硬盘怎样做阵列,tomcat运行代码,c sqlite文件路径,jquery 手机端插件,前端公司要求学新框架,爬虫下载歌曲违法吗,html里php,seo企业排行,bootstrap 网站底部,网页模板下载软件v2.0,免费设计店铺模板免费下载lzw
第一步，当用户第一次浏览页面时，服务器首先获取当前时间并显示在页面上（比如：显示在ID为timebox span中）sms.dll源码,ubuntu移动版壁纸,tomcat6.0怎样安装,网络爬虫iphone,php实训日记,seo推广外包一般多少钱价格lzw
第二步，设置一个每隔一秒就计算新的时间（新时间以服务器时间为初始值，然后每隔一秒累加一秒并生成新的时间）asp小游戏源码下载,vscode min,xp添加ubuntu启动,tomcat icon,sqlite 分页处理,服务器建立站点,wordpress 上传图片插件,前端异步请求框架,c语言网页爬虫,夏磊 php,浙江seo优化公司,php网站后台后缀,网页滑动切换效果,帝国cms 新模板,dedecms 添加页面,android人事管理系统,网站程序 制作lzw
第三步，显示第二步计算的时间
是不是很简单，总结成一句话就是：以服务器时间为初始值，然后在页面上自动每隔一秒就累加一秒生成新时间，这样就能保证与服务器时间同步了，误差基本在几秒内，应该没关系了，好了看一下实现的代码吧：
11:21:55 //第一次将服务器时间显示在这里 $(function () { var oTime = $("#timebox"); var ts = oTime.text().split(":", 3); var tnums = [parseInt(ts[0]), parseInt(ts[1]), parseInt(ts[2])]; setInterval(function () { tnums = getNextTimeNumber(tnums[0], tnums[1], tnums[2]); showNewTime(tnums[0], tnums[1], tnums[2]); }, 1000); function showNewTime(h, m, s) { var timeStr = ("0" + h.toString()).substr(-2) + ":" + ("0" + m.toString()).substr(-2) + ":" + ("0" + s.toString()).substr(-2); oTime.text(timeStr); } function getNextTimeNumber(h, m, s) { if (++s == 60) { s = 0; } if (s == 0) { if (++m == 60) { m = 0; } } if (m == 0) { if (++h == 24) { h = 0; } } return [h, m, s]; } });代码很简单在此就不多作说明(我上面只显示时分秒，大家也可以加上日期，加上日期可在当h==0时，直接从服务器获取一个日期或完整的时间，作为一次时间的校对)，不懂的可以在下面评论，我会及时回复的，然后按照这种思路来实现一下同步倒计时，首先说明一下，什么是同步倒计时，就是类似秒杀一样，设置一个结束时间，然后计算当前时间与结束时间之间间隔，而且必需保证在不同的电脑、浏览器上显示的倒计时时间均相同，实现代码如下：为了保证倒计时的精确度，我采用了先将倒计时时间间隔统一计算成秒，然后减1秒再重新生成时间格式，当然也可以按照上面时间同步的例子，直接进行时间减少，方法很多，我这个不一定是最优的，欢迎大家交流，谢谢！同步倒计时 1天00时00分12秒 $(function () { var tid = setInterval(function () { var oTimebox = $("#timebox"); var syTime = oTimebox.text(); var totalSec = getTotalSecond(syTime) - 1; if (totalSec >= 0) { oTimebox.text(getNewSyTime(totalSec)); } else { clearInterval(tid); } }, 1000); //根据剩余时间字符串计算出总秒数 function getTotalSecond(timestr) { var reg = /\d+/g; var timenums = new Array(); while ((r = reg.exec(timestr)) != null) { timenums.push(parseInt(r)); } var second = 0, i = 0; if (timenums.length == 4) { second += timenums[0] * 24 * 3600; i = 1; } second += timenums[i] * 3600 + timenums[++i] * 60 + timenums[++i]; return second; } //根据剩余秒数生成时间格式 function getNewSyTime(sec) { var s = sec % 60; sec = (sec - s) / 60; //min var m = sec % 60; sec = (sec - m) / 60; //hour var h = sec % 24; var d = (sec - h) / 24;//day var syTimeStr = ""; if (d > 0) { syTimeStr += d.toString() + "天"; } syTimeStr += ("0" + h.toString()).substr(-2) + "时" + ("0" + m.toString()).substr(-2) + "分" + ("0" + s.toString()).substr(-2) + "秒"; return syTimeStr; } });
javascript电商网站抢购倒计时效果实现【javascript】 | javascript电商网站抢购倒计时效果实现【javascript】 ...
JavaScript实现倒计时代码段Item1（非常实用）【javascript】 | JavaScript实现倒计时代码段Item1（非常实用）【javascript】 ...