- 浏览: 180636 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (134)
- java笔记 (25)
- Android开发 (3)
- Mybatis笔记 (1)
- oracle (9)
- javaScript (23)
- struts2 (2)
- jquery (6)
- java多线程 (6)
- 全文检索lucene (1)
- solr4.4 (5)
- solr4.9 (1)
- css 要点 (2)
- fmt格式化 (1)
- 百度地图 (1)
- 显示层jsp (2)
- ant (3)
- 脑袋放水 (2)
- 播放器 (1)
- log日志 (1)
- Spring (1)
- 设计模式 (2)
- httpservlet (1)
- seo (1)
- eclipse使用技巧 (1)
- 正则表达式 (2)
- 我的异常解决方案 (2)
- 集群服务器 (2)
- java网络编程 (3)
- Eclipse快捷键 (1)
- 图片和Base64互转 (1)
- maven (0)
- jsoup 网络爬虫 (1)
- 安全防范 (1)
- 非关系型数据库 (1)
- 在线工具 (1)
- HTML5学习 (1)
- Apache-Mina (1)
最新评论
-
wenjiao8204322:
不好意思说错了,是变量替换后,如果是英文和数字,是不换行的,如 ...
html 转换成pdf -
wenjiao8204322:
楼主你好,有问题、一直难以解决,我们项目上线后,就遗留在这就是 ...
html 转换成pdf -
jacking124:
scoreName 这个属性是做什么的!
jquery.raty-评级插件 -
高军威:
yixiandave 写道高军威 写道alvin198761 ...
Java中的五种实现方法【单例模式】 -
yixiandave:
高军威 写道alvin198761 写道53./** 54. ...
Java中的五种实现方法【单例模式】
粗略的整理下
解决需求:
1.解决一个页面多个倒计时
2.每隔一段时间与服务器校验一次时间
3.页面倒计时完毕后,先与服务器校验是否倒计时完毕,完毕则调用回调函数,否则继续倒计时
倒计时js函数:
HTML:
调用:
解决需求:
1.解决一个页面多个倒计时
2.每隔一段时间与服务器校验一次时间
3.页面倒计时完毕后,先与服务器校验是否倒计时完毕,完毕则调用回调函数,否则继续倒计时
倒计时js函数:
/** * 倒计时函数 * @param ids 元素id * @param ifinvest 回调函数 * */ function counts(ids,ifinvest){ var interval,a=0,time,startt,tenderid; this.startcout=function(){ startt = document.getElementById(ids).getAttribute("date-start"); var nowtime = document.getElementById(ids).getAttribute("date-now"); tenderid = document.getElementById(ids).getAttribute("tender-id"); time = this.getSecond(startt,nowtime); if (!interval) interval = setInterval(this.go, 1000); } this.go=function(){ a++; --time; var str=""; //-------------- d = Math.floor(time / 86400), h = Math.floor((time % 86400) / 3600), m = Math.floor(((time % 86400) % 3600) / 60), s = Math.floor(((time % 86400) % 3600) % 60); if(a==300 || time <= 0){//每300秒与服务器校验时间 a=0; $.ajax({//与服务器校验时间 url : "web/getsysdatetime.do", type : "post", dataType : 'json', success : function(data) { var oStartDate = js_patch_getdate(startt+""); var oNowDate = js_patch_getdate(data+""); var startTime = oStartDate.getTime(); var nowTime = oNowDate.getTime(); time = (startTime-nowTime)>0?(startTime-nowTime)/1000:0; if(time<=0){ clearInterval(interval);//清除倒计时 ifinvest.starts();//成功的回调函数 } }, error:function(XMLHttpRequest, textStatus, errorThrown){ clearInterval(interval);//清除倒计时 } }); } if (time>0){ str = "<span class='day'>"+js_patch_fillZero(d, 2)+"</span>天<span class='day'>"+js_patch_fillZero(h, 2)+"</span>时<span class='day'>"+js_patch_fillZero(m, 2)+"</span>分<span class='day'>"+js_patch_fillZero(s, 2)+"</span>秒"; }else{ str = "<span class='day'>00</span>天<span class='day'>00</span>时<span class='day'>00</span>分<span class='day'>00</span>秒"; } document.getElementById(ids).innerHTML = str; } this.getSecond=function(startdate,nowdate) { var oStartDate = js_patch_getdate(startdate+""); var oNowDate = js_patch_getdate(nowdate+""); var startTime = oStartDate.getTime(); var nowTime = oNowDate.getTime(); var second = (startTime-nowTime)>0?(startTime-nowTime)/1000:0; return second; } } /** * 将字符串格式的日期(如:20150415092645)转换成js Date对象 * 注意Date对象的初始化方式 * */ function js_patch_getdate(stime) { var datetime = new Date( parseFloat(stime.substr(0, 4)), parseFloat(stime.substr(4, 2) - 1), parseFloat(stime.substr(6, 2)), parseFloat(stime.substr(8, 2)), parseFloat(stime.substr(10, 2)), parseFloat(stime.substr(12, 2))); return datetime; } /** * 格式化 * */ function js_patch_fillZero(num, digit) { var str = '' + num; while (str.length < digit) { str = '0' + str; } return str; }
HTML:
<div id="timer0" tender-id="${tendermap.tender_id}" date-start="${tendermap.buy_start_time}" date-now="${starttime}"> <span class="day">00</span>天<span class="day">00</span>时<span class="day">00</span>分<span class="day">00</span>秒 </div>
调用:
//一般放到 $(document).ready(function() {});中 if(document.getElementById("timer0")!=null){ var ifstarts = new if_startinvest("timer0", document.getElementById("timer0").getAttribute("tender-id")); var counts_1 = new counts("timer0",ifstarts); counts_1.startcout(); }
发表评论
-
js常用的对象扩展方法
2016-02-16 17:03 1373/** * js bug:解决 javascript ... -
js日期溢出
2015-06-17 17:15 888//有溢出问题 function js_patch_ge ... -
向上滚动到浏览器顶部固定住,向下滚动出浏览器顶部回复原状
2015-05-06 15:55 1226js代码: //当滚动到浏览器顶部时 浮动固定 不随网页滚 ... -
网页 返回头部
2015-01-09 14:36 676网上各种各样的眼花缭乱,索性自己写一个,这只是个简单的例子, ... -
页面复制文本信息
2015-01-05 12:56 666<!DOCTYPE html PUBLIC &quo ... -
IE 玛德好霸道,就你特殊
2014-10-24 15:31 430尼玛一. document.getElementsByNa ... -
js代码
2014-10-22 16:19 0$(document).ready(function() { ... -
得到浏览器尺寸,判断浏览器内核
2014-10-09 13:24 1082效果图: 代码部分: <!DOCTYPE ht ... -
Js汉字和Unicode编码互转 Unicode加密 Unicode解密
2014-08-11 15:19 1173加密是为了保护源代码;解密是为了看到源代码 参考文档: htt ... -
js运算bug,等等
2014-06-23 15:48 0/** * js bug:解决 javascript ... -
Ajax表单提交的特殊字符处理
2014-05-09 11:32 778封装成json格式在提交就没有为题了 W3 ... -
复选框 浏览器兼容问题解决方案
2014-01-03 10:41 822需求,会员注册,勾选统一注册协议复选框,按钮变 亮可用, 不勾 ... -
选中复选框后按钮可用,不选中不可用
2013-11-29 10:37 1356<input type="checkbox ... -
CSS中的绝对定位与相对定位
2013-11-26 16:35 587... -
Jquery 收藏本站代码
2013-10-29 15:45 1611//收藏本站代码 jQuery.fn.addFavo ... -
ie6和ie7下z-index bug的解决办法
2013-09-24 14:43 1028在CSS中,显然,只能通过代码改变层级,这个属性就是z-ind ... -
【转】jsp、freemarker、velocity比较
2013-09-11 14:27 1024在java领域,表现层技术主要有三种:jsp、freemark ... -
常用js方法
2013-07-29 11:12 979·1.回车触发事件 onkeydown="if(ev ... -
图片上下无间隙滚动
2013-07-19 17:52 1097图片上下无间隙滚动↓↓↓↓↓↓ -
JS实现文本不间断上线滚动效果【转】
2013-07-04 10:04 1146其实这种js控制文本上下不间断滚动的例子不少,但是常常找的不是 ...
相关推荐
在JavaScript(JS)中,实现一个页面多个倒计时功能是一项常见的需求,特别是在电商网站上,如淘宝和京东,用于显示商品秒杀活动的倒计时。这种功能能够吸引用户注意力,增加活动的紧迫感,从而提高转化率。本文将...
这个基本的倒计时功能可以适应大多数需求,但还可以根据需要进行扩展,例如添加时间格式化、处理闰秒、支持多个倒计时同时进行、自定义结束动作等。通过深入理解JavaScript的`Date`对象和事件循环机制,你可以创建更...
首先,我们需要定义一个倒计时函数,它接受目标时间(毫秒)作为参数。此函数应包含一个内部循环,每秒执行一次,更新显示的倒计时数值。 ```javascript function countdown(targetTime) { const intervalId = ...
类似于团购网站的倒计时代码,同一页面可批量调用多个。实时倒计时,兼容各大主流浏览器!
综上所述,"js多产品倒计时代码"是一个实用的JavaScript编程实例,它展示了如何用定时器和遍历技巧来实现多个独立倒计时,并提供了丰富的扩展可能性,对初学者理解JavaScript事件驱动编程和时间处理非常有帮助。...
综上所述,"js倒计时源代码"涉及到JavaScript基础、`Date`对象、时间差计算、时间格式化、HTML与JavaScript交互、事件监听等多个知识点。通过分析`timer.html`文件,你可以学习到如何创建一个基本的JavaScript倒计时...
本文将详细讲解如何使用jQuery实现多个倒计时插件同时计时的功能,这对于创建如考试倒计时、活动倒计时等多种场景都非常有用。 首先,我们需要一个基础的jQuery倒计时插件。这个插件通常包含以下核心功能: 1. **...
"带关闭倒计时的广告代码网页居中悬浮"是一种这样的技术,它结合了JavaScript(JS)编程语言的功能,实现了广告的动态显示、居中定位以及倒计时关闭的特性。下面我们将深入探讨这个技术的各个方面。 首先,我们来...
标题 "html JavaScript js倒计时跳转页面" 涉及到的是网页开发中的一个常见功能,即在特定时间后自动跳转至另一个页面。这个功能通常由JavaScript实现,配合HTML来显示倒计时效果。JavaScript是一种轻量级的解释型...
在这个特定的场景中,我们讨论的是一个基于jQuery的多功能网页倒计时插件。这个插件旨在为网页提供灵活的倒计时功能,包括但不限于手机短信验证码的60秒或120秒倒计时,以及固定日期时间的倒计时。 首先,让我们...
【描述】"这是一款简单的带有动画效果js+css3实现的3秒倒计时动画特效,网页倒计时js代码。"这段描述指出这个特效是基于JavaScript和CSS3的,具有简化的动画效果,并且特别提到了其倒计时时间为3秒。这意味着开发...
6. **多个倒计时管理**:如果页面上存在多个倒计时,我们需要维护一个数组或者对象来分别管理每个倒计时的状态,确保每个倒计时都能正确显示并独立更新。 7. **用户体验优化**:为了提供良好的用户体验,倒计时的...
在提供的压缩包文件中,"js倒计时"可能包含了一个完整的JS倒计时实现,你可以查看源代码学习更多细节,比如如何将倒计时数据显示在网页上,或者如何处理时区问题。通过深入理解这些代码,你将能更好地掌握JS实现倒...
本资源“20191023 daojishi.zip”专注于使用jQuery和JavaScript实现一个页面上同时显示多个天时分秒倒计时,并且支持循环倒计时的实现方法。这里我们将详细探讨如何利用这两种技术来创建这样的功能。 首先,jQuery...
在JavaScript编程中,实现页面上的多个日期时间倒计时效果是一项常见的需求,特别是在涉及活动或拼团场景的应用中。本文将深入探讨如何使用JavaScript来创建这样的功能,特别关注如何处理日期函数以及在页面上管理多...
为了演示这个过程,文章中还提供了一个倒计时组件的示例代码。这个示例中定义了一个计算属性showtime来控制倒计时的显示,以及一个countDown方法来处理倒计时逻辑。在countDown方法中,通过setInterval设定1秒钟执行...
【标题】"基于django的...总的来说,这个基于django的网页倒计时项目涵盖了Django框架的应用、前后端交互、时间处理、动态网页设计和Linux服务器管理等多个IT知识点,对于学习和提升Web开发技能是个不错的实践案例。
此目录下应包含实际的JavaScript代码,可能是一个或多个.js文件。主要的倒计时逻辑和jQuery功能将在此处实现,包括计算剩余时间、设置和清除定时器、更新DOM元素等。 9. **DOM操作**: 使用jQuery的`.html()`, `....
在`js/main.js`文件中,我们可以定义一个函数来初始化广告的倒计时,并添加事件监听器来处理广告关闭和时间到达时的行为。以下是一个基本示例: ```javascript document.addEventListener('DOMContentLoaded', ...
- 如果需要在同一页面上展示多个倒计时,可以使用循环结构,针对每个倒计时元素创建一个独立的倒计时实例。 - 每个倒计时元素可以通过特定的class或data属性来区分,例如`...