实现一个网页同时调用多个倒计时 jquery/js
最近需要网页添加多个倒计时. 查阅网络,基本上都是千遍一律的不好用. 自己按需写了个.希望对大家有用. 有用请赞一个哦!

//js2
var plugJs={
stamp:0,
tid:1,
stampnow:Date.parse(new Date())/1000,//统一开始时间戳
intervalTime:function(){
if(plugJs.stamp > 0){
var day = Math.floor(plugJs.stamp / (60 * 60 * 24));
var hour = Math.floor(plugJs.stamp / (60 * 60)) - (day * 24);
var minute = Math.floor(plugJs.stamp / 60) - (day * 24 * 60) - (hour * 60);
var second = Math.floor(plugJs.stamp) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
if (day <= 9) day = '0' + day;
if (hour <= 9) hour = '0' + hour;
if (minute <= 9) minute = '0' + minute;
if (second <= 9) second = '0' + second;
jQuery('.t_h_'+plugJs.tid).html(hour);
jQuery('.t_m_'+plugJs.tid).html(minute);
jQuery('.t_s_'+plugJs.tid).html(second);
plugJs.stamp--;
setTimeout('if(typeof(plugJs.intervalTime) == "function"){plugJs.intervalTime();}',1000);
}
},
timer:function (stampend,tid){
plugJs.stamp = parseInt(stampend)-parseInt(plugJs.stampnow);//剩余时间戳
setTimeout('if(typeof(plugJs.intervalTime) == "function"){plugJs.intervalTime();}',1000);
}
};
jQuery(document).ready(function(){
var stampend = parseInt(jQuery('.countdown_1').attr('data-time'));//灵活读取表里的结束时间戳
plugJs.timer(stampend,'1');
});
<div class="time countdown_1" data-time="1449429731">
<span class="t_h_1">00</span>
<i class="lay_line">:</i>
<span class="t_m_1">00</span>
<i class="lay_line">:</i>
<span class="t_s_1">00</span>
</div>
<div class="time countdown_2" data-time="1449456731">
<span class="t_h_2">00</span>
<i class="lay_line">:</i>
<span class="t_m_2">00</span>
<i class="lay_line">:</i>
<span class="t_s_2">00</span>
</div>
注释:setTimeout() 只执行 code 一次。如果要多次调用,请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。
实现一个网页同时调用多个倒计时 jquery/js的更多相关文章
- jquery/js实现一个网页同时调用多个倒计时(最新的)
<div class="time countdown_1" data-time="1449429731"> <span class=" ...
- JS高级群的日常!写一个从10到0的倒计时,用console.log打印,不可以用 setInterval!本来说好的研究avalonJS最后演变成了看着大神在那边互相比拼实力。。
JS高级群的日常!写一个从10到0的倒计时,用console.log打印,不可以用 setInterval!本来说好的研究avalonJS最后演变成了看着大神在那边互相比拼实力.. 小森执行一 ...
- 【iOS】网页中调用JS与JS注入
非常多应用为了节约成本,做出同一时候在Android与iOS上都能使用的界面,这时就要使用WebView来做.Android和IOS上都有WebView,做起来非常省事.当然这时就要考虑怎样在Andr ...
- C#代码篇:代码产生一个csv文件调用有两个核心的坑
忙活了半天终于可以开工了,a物品到底要不要放进去取决于两个因素,第一是a有4kg重,只有背包大于等于4kg的时候才能装进去(也就是说当i=1,k<4时f[i,k]=0):第二是当背包的重量大于等 ...
- 浅谈一个网页打开的全过程(涉及DNS、CDN、Nginx负载均衡等)
1.概要 从用户在浏览器输入域名开始,到web页面加载完毕,这是一个说复杂不复杂,说简单不简单的过程,下文暂且把这个过程称作网页加载过程.下面我将依靠自己的经验,总结一下整个过程.如有错漏,欢迎指正. ...
- 【转】浅谈一个网页打开的全过程(涉及DNS、CDN、Nginx负载均衡等)
1.概要 从用户在浏览器输入域名开始,到web页面加载完毕,这是一个说复杂不复杂,说简单不简单的过程,下文暂且把这个过程称作网页加载过程.下面我将依靠自己的经验,总结一下整个过程.如有错漏,欢迎指正. ...
- 利用cURL会话获取一个网页
1.curl_init 作用: 初始化一个新的会话.返回一个cURL句柄,供curl_setopt(), curl_exec()和curl_close() 函数使用. 格式: curl_ ...
- C# Json反序列化 C# 实现表单的自动化测试<通过程序控制一个网页> 验证码处理类:UnCodebase.cs + BauDuAi 读取验证码的值(并非好的解决方案) 大话设计模式:原型模式 C# 深浅复制 MemberwiseClone
C# Json反序列化 Json反序列化有两种方式[本人],一种是生成实体的,方便处理大量数据,复杂度稍高,一种是用匿名类写,方便读取数据,较为简单. 使用了Newtonsoft.Json,可以自 ...
- 微信网页开发调用微信jssdk接口遇到的坑以及最终解决方法 (持续更新)
1.微信网页开发调用jssdk时报permission denied 大致是两个原因 (1)首先注册时未将你所调用的接口名字添加至jsApiList (2)第二个就是你的这个公众号没有权限使用这个ap ...
- 基于url-to-pdf-api构建docker镜像,制作一个网页另存服务
基于url-to-pdf-api构建docker镜像,制作一个网页另存服务 业务背景: 需要根据一个url路径打印这个网页的内容 解决方案: 1.使用wkhtml2pdf 2.使用puppeteer ...
随机推荐
- Prometheus 特点
1.1 Prometheus的特点 Prometheus是一个开源的完整监控解决方案,其对传统监控系统的测试和告警模型进行了彻底的颠覆,形成了基于中央化的规则计算.统一分析和告警的新模型. 相比于传统 ...
- vscode 报错command line option ‘-std=c11‘ is valid for C/ObjC but not for C++
cc1plus.exe: warning: command-line option '-std=c17' is valid for C/ObjC but not for C++ 编译运行出现警告,原因 ...
- 谷歌浏览器上elementUI的按钮文字消失了
解决方案:有个谷歌浏览器插件,好像是什么淘宝的,删掉即可
- tesseract-ocr 安装、语言库、使用 随记
前几日才听说ocr的图片识别功能.觉得很有意思.先体验一下. 地址: GitHub - tesseract-ocr/tesseract: Tesseract Open Source OCR Engin ...
- Pytorch实战学习(七):高级CNN
<PyTorch深度学习实践>完结合集_哔哩哔哩_bilibili Advanced CNN 一.GoogLeNet Inception Module:而为了减少代码的冗余,将由(卷积(C ...
- 下载安装sqlyog
sqlyog下载地址: https://github.com/webyog/sqlyog-community/wiki/Downloads 下载社区版,然后傻瓜式安装
- GIT Authentication failed for错误问题处理
1. Settings ==> Developer settings ==> Personal access tokens ==> Generate new token 生成新的 ...
- Linux df -h 显示磁盘空间满,但实际未占用满——问题分析
问题现象: 遇到一个问题,在系统上,告警提示磁盘空间不够,如下图所示: 问题分析: 1.首先使用 :du -h / --max-depth=1 命令查看各个目录的占用空间,试图找到占用较多空间的目 ...
- ASR6601:国产化lora SOC芯片兼容SX1262/SX1268
ASR6601为目前首颗国产化支持LoRaWAN低功耗广域网无线通信SoC芯片.ASR6601在单芯片上集成了通用微控制器和射频单元(SX1262),包括射频收发器,调制解调器和48 MHz 主频.A ...
- IaaS--云虚拟机(二)(何恺铎《深入浅出云计算》笔记整理)
[如何挑选合适的虚拟机型号] 1.根据类型.云厂商会提供均衡型.计算密集型.内存优化型.图形计算型等常见的虚拟机类型.这些类型对应着硬件资源的某种合理配比或针对性强化,方便你在面向不同场景时,选择最合 ...