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

//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的更多相关文章

  1. jquery/js实现一个网页同时调用多个倒计时(最新的)

    <div class="time countdown_1" data-time="1449429731"> <span class=" ...

  2. JS高级群的日常!写一个从10到0的倒计时,用console.log打印,不可以用 setInterval!本来说好的研究avalonJS最后演变成了看着大神在那边互相比拼实力。。

      JS高级群的日常!写一个从10到0的倒计时,用console.log打印,不可以用 setInterval!本来说好的研究avalonJS最后演变成了看着大神在那边互相比拼实力..   小森执行一 ...

  3. 【iOS】网页中调用JS与JS注入

    非常多应用为了节约成本,做出同一时候在Android与iOS上都能使用的界面,这时就要使用WebView来做.Android和IOS上都有WebView,做起来非常省事.当然这时就要考虑怎样在Andr ...

  4. C#代码篇:代码产生一个csv文件调用有两个核心的坑

    忙活了半天终于可以开工了,a物品到底要不要放进去取决于两个因素,第一是a有4kg重,只有背包大于等于4kg的时候才能装进去(也就是说当i=1,k<4时f[i,k]=0):第二是当背包的重量大于等 ...

  5. 浅谈一个网页打开的全过程(涉及DNS、CDN、Nginx负载均衡等)

    1.概要 从用户在浏览器输入域名开始,到web页面加载完毕,这是一个说复杂不复杂,说简单不简单的过程,下文暂且把这个过程称作网页加载过程.下面我将依靠自己的经验,总结一下整个过程.如有错漏,欢迎指正. ...

  6. 【转】浅谈一个网页打开的全过程(涉及DNS、CDN、Nginx负载均衡等)

    1.概要 从用户在浏览器输入域名开始,到web页面加载完毕,这是一个说复杂不复杂,说简单不简单的过程,下文暂且把这个过程称作网页加载过程.下面我将依靠自己的经验,总结一下整个过程.如有错漏,欢迎指正. ...

  7. 利用cURL会话获取一个网页

    1.curl_init 作用:     初始化一个新的会话.返回一个cURL句柄,供curl_setopt(), curl_exec()和curl_close() 函数使用. 格式:    curl_ ...

  8. C# Json反序列化 C# 实现表单的自动化测试<通过程序控制一个网页> 验证码处理类:UnCodebase.cs + BauDuAi 读取验证码的值(并非好的解决方案) 大话设计模式:原型模式 C# 深浅复制 MemberwiseClone

    C# Json反序列化   Json反序列化有两种方式[本人],一种是生成实体的,方便处理大量数据,复杂度稍高,一种是用匿名类写,方便读取数据,较为简单. 使用了Newtonsoft.Json,可以自 ...

  9. 微信网页开发调用微信jssdk接口遇到的坑以及最终解决方法 (持续更新)

    1.微信网页开发调用jssdk时报permission denied 大致是两个原因 (1)首先注册时未将你所调用的接口名字添加至jsApiList (2)第二个就是你的这个公众号没有权限使用这个ap ...

  10. 基于url-to-pdf-api构建docker镜像,制作一个网页另存服务

    基于url-to-pdf-api构建docker镜像,制作一个网页另存服务 业务背景: 需要根据一个url路径打印这个网页的内容 解决方案: 1.使用wkhtml2pdf 2.使用puppeteer ...

随机推荐

  1. Mac Parallels Desktop篇 安装Windows 10

    Parallels Desktop安装Windows 10系统: 1.首先下载并安装Parallels Desktop ,下载 Windows 10 系统镜像 2.打开Parallels Deskto ...

  2. 卸载K8s集群及k8s命令自动补全

    一.配置命令自动补全 yum install -y bash-completion source /usr/share/bash-completion/bash_completion source & ...

  3. 面试题 --MySQL事务

    3.1 说一说你对数据库事务的了解 事务可由一条非常简单的SQL语句组成,也可以由一组复杂的SQL语句组成.在事务中的操作,要么都执行修改,要么都不执行,这就是事务的目的,也是事务模型区别于文件系统的 ...

  4. Pytest之生成allure报告

    一.前戏 在之前我们已经学会使用 pytest-html 插件生成 html 格式的测试报告: 1 # 第一步,安装插件 2 pip install pytest-html 3 ​ 4 # 第二步,执 ...

  5. html原声启动本地服务器,用http-server启动本地服务器

    第一: 准备node.js环境: 打开cmd,输入:npm install http-server -g 第二: 安装 http-server npm install http-server -g 安 ...

  6. python运行脚本报错Non-UTF-8

    写完脚本运行报:SyntaxError: Non-UTF-8 code starting with '\xa1' in file/createuser/test.py on line 1, but n ...

  7. java学习:八大基本类型变量

    1.类 在java中用class来定义一个类,类是java程序的基本单位 类描述的是具有共性的一类事物,所以我们又可以把类称作为模板技术   如何理解共性: 具有相同的属性-->java变量 具 ...

  8. CTF学习笔记(二)

    二.常见的HTML知识 (一)rorbts协议 robots协议也称爬虫协议.爬虫规则等,是指网站可建立一个robots.txt文件来告诉搜索引擎哪些页面可以抓取,哪些页面不能抓取,而搜索引擎则通过读 ...

  9. Log4net使用探究

    第一步: 通过Nuget package 搜索Apache Log4net安装 第二步: 在项目Global.asax文件中添加读取 配置文件 第三步: 编写Loghelper 文件 1 public ...

  10. Jenkins提供了哪些功能

    我的这篇文章仅仅是简单的根据上文,介绍Jenkins提供了哪些功能.具体大家还是要自己学习啦~ 官网首页就提供了windows版本的Jenkins安装包.我们可以下载一个用于学习.安装后自动打开htt ...