php网页多个倒计时,怎么实现一个页面有多个倒计时同时进行
后台返回时间,一个页面中有多个表格每个表格中有一行用来显示后台给的时间,比如说后台给一号表格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网页多个倒计时,怎么实现一个页面有多个倒计时同时进行相关推荐
- div内嵌网页ajax,Div里面载入另一个页面的实现(取代框架)(AJax)(转)
随着框架越来越不火了,HTML5就不对框架支持了,iframe也只有url了,Div就担当了此大任 DIV+CSS在页面部局确实也很让人满意,使用也更方便 今天突然遇到一个问题,那就是需要导入另一个页 ...
- 如何将一个HTML页面嵌套在另一个页面中
如何将一个HTML页面嵌套在另一个页面中 2010-05-05 16:45 559人阅读 评论(1) 收藏 举报 这个在做网页中常要用到,有些通用的内容可集中放在一个页面文件中,其它要用到这些内容的页 ...
- 如何将一个HTML页面嵌套另一个页面中
如何将一个HTML页面嵌套另一个页面中 这个在做网页中常要用到,有些通用的内容可集中放在一个页面文件中,其它要用到这些内容的页面只需要包含(引用)这个通用文件即可.这样便于维护,如果有很多网页,当通用 ...
- h5 iframe嵌套页面_如何将一个HTML页面嵌套在另一个页面中
展开全部 这个在做网页中常e69da5e887aa62616964757a686964616f31333339666636要用到,有些通用的内容可集中放在一个页面文件中,其它要用到这些内容的页面只需要 ...
- 如何解决用谷歌浏览器调试代码接口请求的时候,跳转网页切换网页的时候,上一个页面的接口请求记录被清除消失的问题
经常我们在测试接口的返回报文的时候,可能是存在于不同网页的跳转过程中,但是浏览器默认的设置是只要一跳转页面,上一个页面的请求记录就没了,是不是很烦人,有时候我们还有以迅雷不及掩耳盗铃之势把浏览器的接口 ...
- python爬虫如何从一个页面进入另一个页面-爬虫入门(一)——如何打开一个网页...
做了一段时间自然语言处理的项目,体会到了爬虫的乐趣,甚至一度产生了学好爬虫真的可以为所欲为的美妙错觉.因此决定开个坑,记录自己的爬虫学习过程,也督促自己学习更高深的爬虫姿势.目前我只用到了最基础的爬虫 ...
- 用HTML+CSS做一个漂亮简单的个人网页~个人相册介绍个人主页模板(6个页面) ~学生HTML个人网页作业作品~
用HTML+CSS做一个漂亮简单的个人网页 ~ 个人相册介绍个人主页模板(6个页面) 学生HTML个人网页作业作品 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作 ...
- append的使用+抽奖(作弊)+打开关闭另一个页面+倒计时
就是一个单元格,下面标注什么科目,点击,在单元格里显示 <!DOCTYPE html> <html lang="en"> <head> ...
- 用HTML+CSS做一个漂亮简单的个人网页~个人相册介绍个人主页模板(6个页面) ~学生HTML个人网页作业作品~...
用HTML+CSS做一个漂亮简单的个人网页 ~ 个人相册介绍个人主页模板(6个页面) 学生HTML个人网页作业作品 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作 ...
最新文章
- 无头结点单链表的逆置_第1章第2节练习题11 就地逆置单链表
- 概率图模型(PGM) —— 贝叶斯网络(Bayesian Network)
- LibreOJ 6283 数列分块入门 7(区间加区间乘区间求和)
- Yolo训练自己的数据集,将json格式转换成txt文件格式
- JSP从入门到实战视频教程
- AI和数学领域的咖啡甜心(一):DeepFace基础
- 计算机制图和应用cad哪个好,cad制图笔记本电脑排行,cad制图用哪款笔记本电脑好...
- 数据结构和算法学习之路-----必要的数学知识
- 转:使用Python写一个m3u8多线程下载器
- 【Mac 教程系列第 10 篇】如何在 Mac 上破解带有密码的 ZIP 压缩文件
- java 拼音识别_JAVA实现汉字转拼音
- Sack Panic漏洞TCP MSS机制(二)(together with myself)
- 二维码生成工具微信小程序源码下载
- C++ array
- 室内设计优美语句_关于软装设计的优美句子
- 计算机职业工资排名2015,2015国内城市工资排行 十大高薪职业出炉
- python编写TCP和UDP测试工具
- 机器学习_XGB模型训练内存溢出解决方案
- 十万个怎么办 - 外企HR支招 (摘自 开复学生网)
- Linux系统下录音方法
热门文章
- mysql数据库详解(续一)
- 大数据面临的挑战:当大数据遭遇云计算
- No resource found that matches the given name 'android:Widget.Material.A解决方案
- Restangular的使用
- python 细枝末节
- BYZ原创天语w806测评--入手2天,总结优点、缺点.
- 重启唯一的窗体实例,以及调用系统重启函数失败解决办法
- 嵌入式Linux系统基础知识
- StringBuilder-C#字符串对象
- 学习笔记(15):Python网络编程并发编程-进程理论