Jquery 一个页面多个倒计时 实现
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>多个timeout</title> <script src="/Content/js/jquery-1.10.2.min.js" type="text/javascript"></script> </head>
<body> <div>
<h5 class="text-success">倒计</h5>
<!-- 已结束 -->
<p id="order_time_1" data-id="" data-starttime="2019-02-01 11:59:59" data-endtime="2019-02-02 11:30:59" class="remain-time">已结束</p>
<!-- 距多少开始 -->
<p id="order_time_2" data-id="" data-starttime="2019-03-08 11:30:00" data-endtime="2019-03-20 12:00:00" class="remain-time">距多少开始</p>
<!-- 距多少开始 -->
<p id="order_time_22" data-id="" data-starttime="2019-03-01 16:42:30" data-endtime="2019-03-20 12:00:00" class="remain-time">距多少开始3</p> <!-- 距多少结束 -->
<p id="order_time_3" data-id="" data-starttime="2019-02-01 23:59:59" data-endtime="2019-03-10 23:59:59" class="remain-time">距多少结束</p>
<!-- 距多少结束 -->
<p id="order_time_33" data-id="" data-starttime="2019-02-01 23:59:59" data-endtime="2019-03-1 16:44:00" class="remain-time">距多少结束3</p>
</div> <script type="text/javascript">
var jsq = {
startdata: [],
enddata: [],
addStart: function (key, value) {
if (typeof (jsq.startdata[key]) == 'undefined') {
jsq.startdata[key] = value;
}
},
addEnd: function (key, value) {
if (typeof (jsq.enddata[key]) == 'undefined') {
jsq.enddata[key] = value;
}
},
addAll: function () {
$(".remain-time").each(function (i) {
var key = $(this).attr("data-id");
var startValue = $(this).attr("data-starttime");
var endValue = $(this).attr("data-endtime");
//添加计时元素
if (typeof (jsq.startdata[key]) == 'undefined') {
jsq.addStart(key, startValue);
jsq.addEnd(key, endValue);
}
});
//执行检测
jsq.subAll();
},
subAll: function () {
for (var index in jsq.startdata) {
var nowTime = new Date();
var startTime = new Date(jsq.startdata[index].toString().replace(/-/g, '/'));
var endTime = new Date(jsq.enddata[index].toString().replace(/-/g, '/')); var S_timestamp = startTime.getTime() - nowTime.getTime();
var E_timestamp = endTime.getTime() - nowTime.getTime(); //console.log(startTime);
if (E_timestamp <= ) //小1秒
{
$('#order_time_' + index).text('已结束 >' + jsq.enddata[index].toString());
$('#order_time_' + index).css("color", "red");
//$("#order_time_" + key).parent().parent().parent().parent().remove(); //删除
}
else if (E_timestamp > && S_timestamp >= ) //大1秒
{
//提取时间元素
var _day = Math.floor(S_timestamp / / / / );
var _hour = Math.floor(S_timestamp / / / % );
var _min = Math.floor(S_timestamp / / % );
var _sec = Math.floor(S_timestamp / % ); if (_hour < ) {
_hour = "" + _hour;
}
if (_min < ) {
_min = "" + _min;
}
if (_sec < ) {
_sec = "" + _sec;
}
$('#order_time_' + index).text(_day + "天" + _hour + "时" + _min + "分" + _sec + "秒" + "开始");
}
else {
//提取时间元素
var _day = Math.floor(E_timestamp / / / / );
var _hour = Math.floor(E_timestamp / / / % );
var _min = Math.floor(E_timestamp / / % );
var _sec = Math.floor(E_timestamp / % ); if (_hour < ) {
_hour = "" + _hour;
}
if (_min < ) {
_min = "" + _min;
}
if (_sec < ) {
_sec = "" + _sec;
}
$('#order_time_' + index).text(_day + "天" + _hour + "时" + _min + "分" + _sec + "秒" + "结束");
}
}
}
}; $(function () {
//倒计时
setInterval('jsq.addAll()', );
});
</script>
</body>
</html>
Jquery 一个页面多个倒计时 实现的更多相关文章
- Jquery 一个页面单个倒计时 实现
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- javascript 一个关于时间排序的算法（一个页面多个倒计时排序）
上周要做一个活动页面 秒杀列表页 需要一个时间的算法排序 自己琢磨了半天想了各种算法也没搞出来,后来问了下一个后台的php同学 他写了个算法给我看了下 ,刚开始看的时候觉得这就是个纯算法,不能转化成页 ...
- jQuery实现发送验证码30s倒计时，且刷新页面时有效
在这里讲一讲这个案例的实现思路吧(个人见解)..核心思想:为防止页面刷新时倒计时失效的解决方案是:当每次刷新一次页面时都执行一个函数 即下面讲到的 setStyle() 函数.这个函数会根据当前的 c ...
- 自己改写了一个图片局部放大的jquery插件页面里面的html代码少了，同一个页面可以调用多个
自己改写了一个图片局部放大的jquery插件页面里面的html代码少了,同一个页面可以调用多个,兼容ie8以上浏览器,别忘了引用jquery,我用的jquery/1.11.0/其他版本没有测试,另外需 ...
- 通过用jQuery写一个页面，我学到了什么
概述 前几天面试,hr发来一个测试文件,让我做做看.我一看,其实就是根据PSD需求写一个页面,再加上一些互动效果即可. 刚好我之前学了切图,jquery等知识还没练手过,于是高兴的答应了. 最后花了3 ...
- jQuery实现页面监听（某一个值发生改变时触发）
使用jQuery实现页面中监听 页面中某一个值(如input输入框)发生改变时触发. <html> <head> <title>RunJS</title& ...
- [jQuery编程挑战]003 克隆一个页面元素及其相关事件
挑战: a) 绑定一个点击方法到这个div,点击后此元素会淡出消失 b) 同时克隆一个新的div元素到页面,元素内容是前面div文字内容反向书写(即,sgatbg olleh),同样也具有上面的点击事 ...
- 用jquery将多个页面中相似页面显示到一个页面并实现来回跳转
今天遇到一个问题,客户说页面来回跳转太麻烦了,需要把相似的页面做到一个页面上去. 接下来说一下记录一下解决方法. 首先这是三个页面中相似的Div: <div class="wenti& ...
- jQuery 向另一个页面传参，同时跳转到该页面
为了使参数能够传递到另外一个页面,使用ajax的跳转方式 $.ajax({ type: "POST", url:"/admin/sysjgl/sysjck/sjcs&qu ...
随机推荐
- 第一周CTF (合天CTF)
0X00 第一周 0x01 基础 50 . 下载下来发现是一个exe文件 ,尝试了一下没打开,然后把后缀名一个一个的试一试,改成txt用记事本打开,得到了一个“假冒的flag” *(别问我怎么知道的) ...
- JS属性修改
document.getElementById('p1').style.visibility='visible' document.getElementById('p1').style.visibil ...
- elasticsearch(6) 映射和分析
类似关系型数据库中每个字段都有对应的数据类型,例如nvarchar.int.date等等,elasticsearch也会将文档中的字段映射成对应的数据类型,这一映射可以使ES自动生成的,也是可以由我们 ...
- 精进之路之volatile
volatile 首先了解下Java 内存模型中的可见性.原子性和有序性. 可见性: 可见性是一种复杂的属性,因为可见性中的错误总是会违背我们的直觉.通常,我们无法确保执行读操作的线程能适时地看到其他 ...
- linux之正则
grep命令: -V 打印grep的版本号 -E 解释PATTERN作为扩展正则表达式,也就相当于使用egrep. -F 解释PATTERN作为固定字符串的列表,由换行符 ...
- 数据库between and
在此记录一下,between相当于大于等于,and相当于小于,举个例子:select * from A where modefytime between '31-3月 -16' and '1-4月 - ...
- re模块(正则表达式)
re,findall("匹配正则","内容") #所有满足条件的结果都返回到一个列表里 ret = re.search(“匹配规则”,“内容”) #返回 匹配到 ...
- mac安装brew简单方法
安装方法:命令行输入 /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/ma ...
- 华莱士的 第二个python程序之（格式化输出）
name = input("name:")age = input("age:")info ='''---------- info of %s --------- ...
- MAC--NPAPI学习(一)简要介绍NPAPI的函数
NPAPI是浏览器与插件交互的接口,下面先简要介绍一下NPAPI的函数: Mach-o entry points NPError NP_Initialize(NPNetscapeFuncs* brow ...