实现一个网页同时调用多个倒计时 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 ...
随机推荐
- Mac技术服务, 感谢 点赞打赏
首先,非常感谢大家对我的支持和鼓励. 如果需要单独解决Mac问题,您也可以选择付费服务,感谢大家的理解与支持! * 普通问题/软件安装:10元--100元每个(根据具体问题由您而定): * 普通问 ...
- linux系统下命令行方式创建KVM虚拟机
一:安装虚拟机 1:设备重启进入BIOS打开SMMU,F10保存退出. 2:进入系统安装相关组件 virt-install qemu-kvm qemu-img virt-manager libvi ...
- [工作]IT连和IT恋产品已完成第一版,准备上线运营
本文为原创文章,转载请注明出处!我的博客地址:http://www.cnblogs.com/txwd 嗯!又该写一下工作记录了,因为到目前为此,产品基本完成1.0版本了.安卓版的IT连和IT恋已经小更 ...
- Pytorch实战学习(四):加载数据集
<PyTorch深度学习实践>完结合集_哔哩哔哩_bilibili Dataset & Dataloader 1.Dataset & Dataloader作用 ※Datas ...
- zabbix编译安装,安装mysql数据库:configure: error: Not found mysqlclient library
在编译时,可能会出现题目中所示的错误,可以通过安装mysql-devel这个库解决: # yum install mysql-devel 注:如果出现"configure: error : ...
- linux下influx客户端使用
influxdb-client 通过 sudo apt-cache search influx 找到了一个客户端工具 influxdb-client - command line interface ...
- ADC采样信号RMS测量值的Verilog实现
术语"RMS"代表"Root-Mean-Squared".大多数书籍将此定义为"产生与等效直流电源相同的加热效果的交流电量",或者沿着这些线 ...
- Android Studio 生成Jar包以及是否混淆打包等ZengYuanFinn博客等你来查看
1,Android studio生成jar包的前提是要确保生成的代码是引用的module工程: 2,在需要生成jar包的build.gradle(上图倒数第三行)中添加如下代码: //生成jar包 t ...
- Spring Boot 配置 Swagger(3.0.0 版本)
添加 Swagger 依赖 <!-- https://mvnrepository.com/artifact/io.springfox/springfox-boot-starter --> ...
- Docker命令(转载)
Docker命令 参考资料 Docker文档 https://docs.docker.com 命令格式 docker <选项><命令><参数> Docker命令 ...