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

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

模拟页面:

bVY0Hr?w=324&h=217

(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时间。这是为什么呢?如图

bVY0H2?w=445&h=258

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/266338.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

全国计算机等级考试题库二级C操作题100套(第60套)

第60套&#xff1a; 给定程序中&#xff0c;函数fun的功能是:将形参指针所指结构体数组中的三个元素按num成员进行升序排列。 请在程序的下划线处填入正确的内容并把下划线删除&#xff0c;使程序得出正确的结果。 注意&#xff1a;源程序存放在考生文件夹下的BLANK1.C中。 不…

opencv在python环境下的安装_python环境下安装opencv库的方法

注意&#xff1a;安装opencv以前须要先安装numpy&#xff0c;matplotlib等python 1、安装方法windows 方法1、在线安装函数 1.先安装opencv-python测试 pip install opencv-python --userspa个人python版本是3.6.8&#xff0c;能够看到opencv安装的默认版本是 opencv_python-4.…

接口的创建及使用

接口是全局变量和公共的抽象方法集合。它也是一种定义数据类型的方式&#xff0c;与类相比 相同之处&#xff1a;都是成员变量和成员方法也可以形成继承关系。 不同之处&#xff1a;接口中的属性都是常量&#xff08;final&#xff09;接口中的方法是抽象方法&#xff08;没有方…

博客的未来仍然光明

博客的未来仍然光明 博客&#xff0c;能够实现欲望表达&#xff0c;自我实现&#xff0c;同时又能阶段性的形成自己的著作&#xff0c;取得一定的收益。目前在博客圈里不缺好作者&#xff0c;不缺平台&#xff0c;不缺读者&#xff0c;缺氛围。我们更需要的是&#xff0c;一个帮…

movielens推荐系统_基于内容推荐(二)

A content-based movie recommender system using MovieLens tags &#xff08;用标签构建一个简单的电影推荐系统&#xff09;现在有很多电影。如果没有某种推荐系统&#xff0c;您会担心&#xff0c;随着时间的流逝&#xff0c;用户可能会被他们不关心的电影所淹没。因此&…

全国计算机等级考试题库二级C操作题100套(第61套)

第61套&#xff1a; 函数fun的功能是进行字母转换。若形参ch中是小写英文字母,则转换成对应的大写英文字母&#xff1b;若ch中是大写英文字母&#xff0c;则转换成对应的小写英文字母&#xff1b;若是其它字符则保持不变&#xff1b;并将转换后的结果作为函数值返回。 请在程序…

phpcms毛遂

1.showmessage()showmessage(L(operation_success),?mlink&clink&aedit,, edit);edit>关闭对象showmessage(L(operation_failure));showmessage(L(operation_false),HTTP_REFERER);2.formValidator3.update()$dataarray(nickname>$_POST[nickname],contact>$…

android java 指针,opencv android:向我的代码中添加cascade分类器后出现空指针异常

我在casecadeclassifier.java类中收到空指针异常在这里:Mat objects_mat objects;detectMultiScale_4(nativeObj, image.nativeObj, objects_mat.nativeObj, scaleFactor);这是我的日志:02-11 20:53:15.209 10968-10968/? E/SystemUpdate-ReflectUtils: getClass android.pro…

HALCON 1D Measure 算子初识

基本上1D Measure都是建立一个ROI(region of interest&#xff0c;感兴趣区域)&#xff0c;然后在感兴趣区域提取出边界的测量。常见的ROI有矩形ROI和圆环ROI。 下图为一个矩形ROI&#xff0c;中间的Profile Line为横截线&#xff0c;Center是行和列的坐标&#xff0c;Phi指定了…

python可视化界面编程 pycharm_pycharm开发一个简单界面和通用mvc模板(操作方法图解)...

文章首先使用pycharm的 PyQt5 Designer 做一个简单的界面&#xff0c;然后引入所谓的“mvc框架”。 一、设计登录界面 下面开始第一个话题&#xff0c;使用pycharm的 PyQt5 Designer 做一个简单的界面。 上一篇最后&#xff0c;在pycharm中配置了PyQt5 Designer 和 uic&#xf…

全国计算机等级考试题库二级C操作题100套(第62套)

第62套&#xff1a; 给定程序中&#xff0c;函数fun的功能是&#xff1a;把形参s所指字符串中下标为奇数的字符右移到下一个奇数位置&#xff0c;最右边被移出字符串的字符绕回放到第一个奇数位置&#xff0c;下标为偶数的字符不动&#xff08;注&#xff1a;字符串的长度大于…

编译apache过程中出现如下错误及解决办法

在编译apache的过程中出现如下错误&#xff1a;no SSL-C headers foundconfigure: error: ...No recognized SSL/TLS toolkit detected解决办法&#xff1a;安装openssl-devel转载于:https://blog.51cto.com/tibet/1153481

tensorflow学习笔记七----------卷积神经网络

卷积神经网络比神经网络稍微复杂一些&#xff0c;因为其多了一个卷积层(convolutional layer)和池化层(pooling layer)。 使用mnist数据集&#xff0c;n个数据&#xff0c;每个数据的像素为28*28*1784。先让这些数据通过第一个卷积层&#xff0c;在这个卷积上指定一个3*3*1的fe…

matlab strfind用法,findstr和strfind区别

matlab中这两个字符串查找的函数findstr(), strfind()表明上看起来用法相似&#xff0c;效果也相似。一. findstr(s1,s2)--在较长的字符串中查找较短的字符串出现的次数&#xff0c;并返回其位置&#xff0c;因此无论s1,s2哪个为长字符串&#xff0c;位置在前在后都没有关系。例…

python发邮件给女朋友代码_python实现邮件发送完整代码(带附件发送方式)

实例一&#xff1a;利用SMTP与EMAIL实现邮件发送&#xff0c;带附件&#xff08;完整代码&#xff09; __author__ Administrator #codinggb2312 from email.Header import Header from email.MIMEText import MIMEText from email.MIMEMultipart import MIMEMultipart import…

Ubuntu识别USB设备

参考&#xff1a;如何解决Ubuntu无法识别USB设备 作者&#xff1a;一只青木呀 发布时间&#xff1a;2020-08-28 21:02:00 网址&#xff1a;https://blog.csdn.net/weixin_45309916/article/details/108286829 目录1、U盘识别2、识别转换解决Ubuntu无法识别USB3.0方法一&#xf…

用ElasticSearch存储日志

介绍 如果你使用elasticsearch来存储你的日志&#xff0c;本文给你提供一些做法和建议。 如果你想从多台主机向elasticsearch汇集日志&#xff0c;你有以下多种选择&#xff1a; Graylog2 安装在一台中心机上&#xff0c;然后它负责往elasticsearch插入日志&#xff0c;而且你可…

解除单个文件的与svn服务器的关联

有些文件和个人开发环境有关不需要和svn服务器做同步&#xff0c;可以取消其和svn服务的关联。 右键选中要取消关联的文件&#xff0c;右键菜单 Tortoise SVN ---> unversion and add to ignore list 确定后&#xff0c;文件图标会变成一把小剪刀&#xff0c;说明已经…

java xml出错,Java xml出现错误 javax.xml.transform.TransformerException: java.lang.NullPointerException...

Java xml出现错误 javax.xml.transform.TransformerException: java.lang.NullPointerException解决办法&#xff1a;利用Java操作XML&#xff0c;在操作XML过程中&#xff0c;执行到最后一步&#xff0c;在利用Transformer进行XML转换时出现NullPointerException错误&#xff…

Ubuntu磁盘扩容及启动问题整理

参考&#xff1a;Ubuntu磁盘扩容及启动问题整理 作者&#xff1a;一只青木呀 发布时间&#xff1a; 2020-12-08 10:42:19 网址&#xff1a;https://blog.csdn.net/weixin_45309916/article/details/110850358 也可参照正点原子的&#xff1a;Ubuntu磁盘空间不足&#xff1f;一招…