后台返回时间,一个页面中有多个表格每个表格中有一行用来显示后台给的时间,比如说后台给一号表格10分钟的倒计时时间,给2号表格15分钟的倒计时时间,那我要怎么做才能使得这两个倒计时都能进行??我自己模拟了一个静态的假的倒计时,但是一直没办法让两个时间都能倒计时。

模拟页面:

(ps:这里的10分50秒我后面有转化成00:00的格式,这两个数据都是假的,在html里填充进去的)

html代码:

倒计时

离预约失效的时间:

10分50秒,

离预约失效的时间:

3分58秒,

js代码:

var remainTime = $("body").find(".time").text();

var clock = remainTime.split(",");

var countDownTimes = [];

clock.pop();

for (var i = 0; i < clock.length; i++) { //获取总时间

var second = clock[i].slice(-4, -1); //秒数

var minu = clock[i].slice(0, 2); //分钟数

/* 以下的if都是为了将X分x秒转换成00:00格式 */

if (second.substr(0, 1) === '分') {

second = second.slice(1, 3);

}

if (second.substr(1, 1) == '分') {

second = second.slice(2, 3);

}

if (second < 0) {

second = 60 + parseInt(second);

second = second.toString();

minu = parseInt(minu);

minu = minu - 1;

minu = minu.toString();

}

if (minu.substr(minu.length - 1, 1) == '分') {

minu = minu.slice(0, 1);

}

if (minu.length == 1 || minu.length == 0) {

minu = "0" + minu;

}

if (second.length == 1) {

second = "0" + second;

}

time = minu + ":" + second;

countDownTimes[i] = parseInt(minu * 60 + second * 1); //开始:转换成总秒数

/* cutTime(countDownTime); */

}

for (var j = 0; j < countDownTimes.length; j++) {

var countDownTime = countDownTimes[j];

cutTime(countDownTime);

}

function cutTime(countDownTime) {

var timer = setInterval(function () {

if (countDownTime >= 0) {

showTime(countDownTime);

countDownTime--;

} else {

clearInterval(timer);

alert("计时结束,给出提示");

}

}, 1000);

}

function showTime(countDownTime) {

var minute = Math.floor(countDownTime / 60);

var seconds = countDownTime - 60 * minute;

minute = minute.toString();

seconds = seconds.toString();

if (minute.length == 1) {

minute = "0" + minute;

}

if (seconds.length == 1) {

seconds = "0" + seconds;

}

time = minute + ":" + seconds;

/* 显示时间 */

console.log(time);

$("span#2").text(time);

}

非常不理解的是我如果把time这个东西填充进上面随便一个b标签里,都只能显示一个时间就是后面这个div的时间,但是如果我是在控制台里打印time,就会显示两个时间,因为我有两个div时间。这是为什么呢?如图

php网页多个倒计时,怎么实现一个页面有多个倒计时同时进行相关推荐

  1. div内嵌网页ajax,Div里面载入另一个页面的实现(取代框架)(AJax)(转)

    随着框架越来越不火了,HTML5就不对框架支持了,iframe也只有url了,Div就担当了此大任 DIV+CSS在页面部局确实也很让人满意,使用也更方便 今天突然遇到一个问题,那就是需要导入另一个页 ...

  2. 如何将一个HTML页面嵌套在另一个页面中

    如何将一个HTML页面嵌套在另一个页面中 2010-05-05 16:45 559人阅读 评论(1) 收藏 举报 这个在做网页中常要用到,有些通用的内容可集中放在一个页面文件中,其它要用到这些内容的页 ...

  3. 如何将一个HTML页面嵌套另一个页面中

    如何将一个HTML页面嵌套另一个页面中 这个在做网页中常要用到,有些通用的内容可集中放在一个页面文件中,其它要用到这些内容的页面只需要包含(引用)这个通用文件即可.这样便于维护,如果有很多网页,当通用 ...

  4. h5 iframe嵌套页面_如何将一个HTML页面嵌套在另一个页面中

    展开全部 这个在做网页中常e69da5e887aa62616964757a686964616f31333339666636要用到,有些通用的内容可集中放在一个页面文件中,其它要用到这些内容的页面只需要 ...

  5. 如何解决用谷歌浏览器调试代码接口请求的时候,跳转网页切换网页的时候,上一个页面的接口请求记录被清除消失的问题

    经常我们在测试接口的返回报文的时候,可能是存在于不同网页的跳转过程中,但是浏览器默认的设置是只要一跳转页面,上一个页面的请求记录就没了,是不是很烦人,有时候我们还有以迅雷不及掩耳盗铃之势把浏览器的接口 ...

  6. python爬虫如何从一个页面进入另一个页面-爬虫入门(一)——如何打开一个网页...

    做了一段时间自然语言处理的项目,体会到了爬虫的乐趣,甚至一度产生了学好爬虫真的可以为所欲为的美妙错觉.因此决定开个坑,记录自己的爬虫学习过程,也督促自己学习更高深的爬虫姿势.目前我只用到了最基础的爬虫 ...

  7. 用HTML+CSS做一个漂亮简单的个人网页~个人相册介绍个人主页模板(6个页面) ~学生HTML个人网页作业作品~

    用HTML+CSS做一个漂亮简单的个人网页 ~ 个人相册介绍个人主页模板(6个页面) 学生HTML个人网页作业作品 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作 ...

  8. append的使用+抽奖(作弊)+打开关闭另一个页面+倒计时

    就是一个单元格,下面标注什么科目,点击,在单元格里显示 <!DOCTYPE html> <html lang="en"> <head>     ...

  9. 用HTML+CSS做一个漂亮简单的个人网页~个人相册介绍个人主页模板(6个页面) ~学生HTML个人网页作业作品~...

    用HTML+CSS做一个漂亮简单的个人网页 ~ 个人相册介绍个人主页模板(6个页面) 学生HTML个人网页作业作品 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作 ...

最新文章

  1. 无头结点单链表的逆置_第1章第2节练习题11 就地逆置单链表
  2. 概率图模型(PGM) —— 贝叶斯网络(Bayesian Network)
  3. LibreOJ 6283 数列分块入门 7(区间加区间乘区间求和)
  4. Yolo训练自己的数据集,将json格式转换成txt文件格式
  5. JSP从入门到实战视频教程
  6. AI和数学领域的咖啡甜心(一):DeepFace基础
  7. 计算机制图和应用cad哪个好,cad制图笔记本电脑排行,cad制图用哪款笔记本电脑好...
  8. 数据结构和算法学习之路-----必要的数学知识
  9. 转:使用Python写一个m3u8多线程下载器
  10. 【Mac 教程系列第 10 篇】如何在 Mac 上破解带有密码的 ZIP 压缩文件
  11. java 拼音识别_JAVA实现汉字转拼音
  12. Sack Panic漏洞TCP MSS机制(二)(together with myself)
  13. 二维码生成工具微信小程序源码下载
  14. C++ array
  15. 室内设计优美语句_关于软装设计的优美句子
  16. 计算机职业工资排名2015,2015国内城市工资排行 十大高薪职业出炉
  17. python编写TCP和UDP测试工具
  18. 机器学习_XGB模型训练内存溢出解决方案
  19. 十万个怎么办 - 外企HR支招 (摘自 开复学生网)
  20. Linux系统下录音方法

热门文章

  1. mysql数据库详解(续一)
  2. 大数据面临的挑战:当大数据遭遇云计算
  3. No resource found that matches the given name 'android:Widget.Material.A解决方案
  4. Restangular的使用
  5. python 细枝末节
  6. BYZ原创天语w806测评--入手2天,总结优点、缺点.
  7. 重启唯一的窗体实例,以及调用系统重启函数失败解决办法
  8. 嵌入式Linux系统基础知识
  9. StringBuilder-C#字符串对象
  10. 学习笔记(15):Python网络编程并发编程-进程理论