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,一经查实,立即删除!

相关文章

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;没有方…

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

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

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…

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…

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

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

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

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

函数求值需要运行所有线程_精读《深度学习 - 函数式之美》

1 引言函数式语言在深度学习领域应用很广泛&#xff0c;因为函数式与深度学习模型的契合度很高&#xff0c;The Beauty of Functional Languages in Deep Learning — Clojure and Haskell 就很好的诠释了这个道理。通过这篇文章可以加深我们对深度学习与函数式编程的理解。2…

Ubuntu下无法看到共享文件夹的解决办法

参考&#xff1a;Ubuntu下无法看到共享文件夹的解决办法 作者&#xff1a;一只青木呀 发布时间&#xff1a;2020-08-07 10:09:04 网址&#xff1a;https://blog.csdn.net/weixin_45309916/article/details/107856157 今天早上起来突然发现共享文件夹的查看不到了&#xff0c;找…

实现图书增删的代码_不仅仅是图书信息管理系统

点击蓝字 关注我们不仅仅是图书信息管理系统基于双链表&#xff0c;采用面向对象编程方法制作的图书管理系统❞效果演示root用户&#xff1a;账号&#xff1a;0&#xff0c;密码&#xff1a;0普通用户&#xff1a;账号&#xff1a;1001&#xff0c;密码&#xff1a;666666图书信…

Ubuntu18.04换源更新国内源

参考&#xff1a;Ubuntu18.04更新国内源 作者&#xff1a;一只青木呀 发布时间&#xff1a;2020-08-05 10:24:11 网址&#xff1a;https://blog.csdn.net/weixin_45309916/article/details/107808268 树莓派换源博文&#xff1a;https://blog.csdn.net/zhuguanlin121/article/d…

Vmware15的安装(ps解决:重装Vmware出现无法安装服务Vmware Authorization Service)

参考&#xff1a;Linux之Vmware的安装 作者&#xff1a;一只青木呀 发布时间&#xff1a; 2020-07-09 22:13:14 网址&#xff1a;https://blog.csdn.net/weixin_45309916/article/details/107238658 目录1.前言2.打开Vmware虚拟机安装包安装解决&#xff1a;重装Vmware出现无法…

内存,RAM(DDR),ROM(EEPROM、flash),存储卡(emmc,sd,tf)以及Cache的区别与联系

参考&#xff1a;内存&#xff0c;RAM&#xff0c;ROM&#xff0c;Cache的区别与联系 作者&#xff1a;一只青木呀 发布时间&#xff1a;2020-09-26 09:55:40 网址&#xff1a;https://blog.csdn.net/weixin_45309916/article/details/108808106 参考&#xff1a;EEPROM和flash…

idea 项目jar反编译java_带你上手阿里开源的 Java 诊断利器:Arthas

本文适合有 Java 基础知识的人群。本文作者&#xff1a;HelloGitHub-秦人HelloGitHub 推出的《讲解开源项目》系列&#xff0c;今天给大家带来一款阿里开源的 Java 诊断利器 Arthas 项目—— Arthas项目源码地址&#xff1a;https://github.com/alibaba/arthas一、简介 为什么要…

Windows如何开启虚拟化,以安装虚拟机?

参考&#xff1a;Windows如何开启虚拟化&#xff0c;以安装虚拟机&#xff1f; 作者&#xff1a;一只青木呀 发布时间&#xff1a;2020-08-28 20:58:45 网址&#xff1a;https://blog.csdn.net/weixin_45309916/article/details/108286787 设置BIOS 安装 Ubuntu 时报错&#x…

Ubuntu 16.04安装教程及虚拟机设置

摘自&#xff1a;Ubuntu 16.04安装教程及设置 作者&#xff1a;一只青木呀 发布时间&#xff1a; 2020-07-09 22:36:50 网址&#xff1a;https://blog.csdn.net/weixin_45309916/article/details/107239119 配合这篇博文&#xff1a;安装ubuntu20.04并进行优化——安装vim,gcc,…

PureMVC(AS3)剖析:设计模式(二)

PureMVC&#xff08;AS3&#xff09;剖析&#xff1a;设计模式&#xff08;二&#xff09; 模式 上一篇中介绍了PureMVC中使用的3种设计模式&#xff1a;单例模式、观察者模式、外观模式。本篇将继续介绍剩下的3种设计模式&#xff1a; l 使用中介者&#xff08;Mediator&…

FileZilla的下载与安装以及简单使用(Ubuntu和Windows之间互传文件需要下载——客户端)

参考&#xff1a;FileZilla的下载与安装以及简单使用&#xff08;有图解超简单&#xff09; 作者&#xff1a;一只青木呀 发布时间&#xff1a; 2020-08-04 13:20:59 网址&#xff1a;https://blog.csdn.net/weixin_45309916/article/details/107782070?ops_request_misc%257B…

基于Matlab的循环码实验报告,基于MATLAB的循环码实验报告

及g(x)|C(x)上述定理告诉了构造(n&#xff0c;k)循环码的方法如下&#xff1a; ① 对xn-1 (在二元域中等效于对xn1)实行因式分解, 找出其中的(n-k)次因式。② 以找出的(n-k)次因式为循环码生成多项式g(x)&#xff0c;与信息多项式m(x)相乘&#xff0c;即得码多项式&#xff1a;…