分类 : JAVA开发

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




//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);//剩余时间戳

       plugJs.tid = tid;

       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');

});



//html 原文http://blog.csdn.net/websites/article/details/50037611



<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()。

分类: JAVA开发    访问() .NET技术    Web前端    JAVA开发    HTML基础    数据库    电脑知识    CSS基础
CSS教程-web前端教程-免费教程
HTML教程-web前端教程-免费教程

分类

.NET技术 Web前端 JAVA开发 HTML基础 数据库 电脑知识 CSS基础

随机阅读

Mac 下 Chrome 快捷键大全
html里空格是 ,那TAB是什么
Vue生命周期,我奶奶看了都懂了
css overflow(visible auto hidden sc
前端图片上传那些事儿
oracle sql like多个条件函数
oracle数据库模糊查询匹配多个字符串
oracle字段like多个条件
Java:String和Date、Timestamp之间的转换
Spring Boot 教程 - MyBatis-Plus
如何用u盘重装系统?用U大侠U盘启动制作盘安装Win7系统教程
方正综艺简体下载大全,什么方正综艺简体字体下载
C#遍历指定文件夹中的所有文件
Mysql和Redis数据同步策略
java String类型与Date日期类型互相转换

最新

零基础学习C语言,怎么入门?
C语言使用什么软件?
c语言用什么软件编写(新手c语言基础知识入门)
Oracle如何实现like多个值的查询
Oracle如何实现like多个值的查询 - 数据库
oracle 多个like条件查询
Oracle中关键字like的使用总结
oracle 中模糊查询对like的代替insrt()函数
oracle数据库模糊查询匹配多个字符串
Oracle如何实现like多个值的查询 - Oracle - 服务器

推荐阅读

vscode----vue中HTML代码tab键自动补全
html如何实现鼠标悬停显示文字,鼠标移走文字消失。
c语言中break语句的作用
C#语言之“string格式的日期时间字符串转为DateTime类型”
undefined是什么意思啊
DIV CSS字体(font-family)实现字体样式设置
AirPods怎么删除配对过的设备 airpods可以和电脑连接的
js 中日期 转换成时间戳 例如2013-08-30 转换为时间戳
risk-taking中文是什么意思
replace和replaceAll是JAVA中常用的交换字符的办法


Copyright © 2017 CSS5.NET教程.CSS5 内容仅用于学习和测试参考。 css5.net All Rights Reserved 蜀ICP备15003849号-16