jQuery实现简单倒计时功能的方法


Posted in Javascript onJuly 04, 2016

本文实例讲述了jQuery实现简单倒计时功能的方法。分享给大家供大家参考,具体如下:

1.效果图如下:

jQuery实现简单倒计时功能的方法

2.html代码:

<div class="timeFix">
  <div class="daojishi" id="09/04/2016 00:00:00">
    <span class="timeh"></span>
    <span class="timem"></span>
    <span class="times"></span>
    <span class="timen"></span>
  </div>
</div>

3.js代码:

setInterval(lxfEndtime,60);
//倒计时
function lxfEndtime(){
  $(".daojishi").each(function(){
   //var lxfday=$(this).attr("lxfday");//用来判断是否显示天数的变量
   var endtime = new Date($(this).attr("id")).getTime();//取结束日期(毫秒值)
   var nowtime = new Date().getTime();  //今天的日期(毫秒值)
   var youtime = endtime-nowtime;//还有多久(毫秒值)
   var seconds = youtime/1000;//秒
   var minutes = Math.floor(seconds/60);//分
   var hours = Math.floor(minutes/60);//小时
   var days = Math.floor(hours/24);//天
   var CDay= days ;
   var CHour= hours % 24;
   var CMinute= minutes % 60;
   var CSecond= Math.floor(seconds%60);//"%"是取余运算,可以理解为60进一后取余数,然后只要余数。
   var c=new Date();
   var millseconds=c.getMilliseconds();
   var Cmillseconds=Math.floor(millseconds %100);
   if(CSecond<10){//如果秒数为单数,则前面补零
    CSecond="0"+CSecond;
   }
   if(CMinute<10){ //如果分钟数为单数,则前面补零
    CMinute="0"+CMinute;
   }
   if(CHour<10){//如果小时数为单数,则前面补零
    CHour="0"+CHour;
   }
   if(Cmillseconds<10) {//如果毫秒数为单数,则前面补零
    Cmillseconds="0"+Cmillseconds;
   }
   if(endtime<=nowtime){
    $(this).html("已过期")//如果结束日期小于当前日期就提示过期啦
   }else{
    $(this).html("<span class='timeh'>"+CHour+"</span><span class='timem'>"+CMinute+"</span><span class='times'>"+CSecond+"</span><span class='timen'>"+Cmillseconds+"</span>");
   }
});

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
求解开jscript.encode代码的asp函数
Feb 28 Javascript
php和js对数据库图片进行等比缩放示例
Apr 28 Javascript
浅谈Javascript的静态属性和原型属性
May 07 Javascript
javascript中mouseover、mouseout使用详解
Jul 19 Javascript
node.js利用redis数据库缓存数据的方法
Mar 01 Javascript
基于vue实现分页/翻页组件paginator示例
Mar 09 Javascript
微信小程序 空白页重定向解决办法
Jun 27 Javascript
vue-cli webpack模板项目搭建及打包时路径问题的解决方法
Feb 26 Javascript
vue删除html内容的标签样式实例
Sep 13 Javascript
jQuery实现上下滚动公告栏详细代码
Nov 21 jQuery
深度解读vue-resize的具体用法
Jul 08 Javascript
关于vue-cli3打包代码后白屏的解决方案
Sep 02 Javascript
jquery设置表单元素为不可用的简单代码
Jul 04 #Javascript
JavaScript 节流函数 Throttle 详解
Jul 04 #Javascript
jQuery实现订单提交页发送短信功能前端处理方法
Jul 04 #Javascript
实用jquery操作表单元素的简单代码
Jul 04 #Javascript
jQuery实现左侧导航模块的显示与隐藏效果
Jul 04 #Javascript
将List对象列表转换成JSON格式的类实现方法
Jul 04 #Javascript
jQuery解析与处理服务器端返回xml格式数据的方法详解
Jul 04 #Javascript
You might like
索尼SONY SRF-S83/84电路分析和打磨
2021/03/02 无线电
php流量统计功能的实现代码
2012/09/29 PHP
php使用CURL伪造IP和来源实例详解
2015/01/15 PHP
php动态生成版权所有信息的方法
2015/03/24 PHP
如何把php5.3版本升级到php5.4或者php5.5
2015/07/31 PHP
Extjs Ext.MessageBox.confirm 确认对话框详解
2010/04/02 Javascript
纯文字版返回顶端的js代码
2013/08/01 Javascript
jquery实现的下拉和收缩效果示例
2014/08/21 Javascript
jquery中object对象循环遍历的方法
2015/12/18 Javascript
js实现文本上下来回滚动
2017/02/03 Javascript
flexslider.js实现移动端轮播
2017/02/05 Javascript
JavaScript中数组Array.sort()排序方法详解
2017/03/01 Javascript
Angular通过指令动态添加组件问题
2018/07/09 Javascript
一步一步实现Vue的响应式(对象观测)
2019/09/02 Javascript
JS设置自定义快捷键并实现图片上下左右移动
2019/10/17 Javascript
微信小程序如何实现点击图片放大功能
2020/01/21 Javascript
如何检测JavaScript中的死循环示例详解
2020/08/30 Javascript
vue中jsonp插件的使用方法示例
2020/09/10 Javascript
JavaScript canvas实现雨滴特效
2021/01/10 Javascript
python通过索引遍历列表的方法
2015/05/04 Python
简单介绍Python中的readline()方法的使用
2015/05/24 Python
关于不懂Chromedriver如何配置环境变量问题解决方法
2019/06/12 Python
对python中不同模块(函数、类、变量)的调用详解
2019/07/16 Python
使用 Python 处理 JSON 格式的数据
2019/07/22 Python
Django admin禁用编辑链接和添加删除操作详解
2019/11/15 Python
python 使用shutil复制图片的例子
2019/12/13 Python
python 实现按对象传值
2019/12/26 Python
python 解决Fatal error in launcher:错误问题
2020/05/21 Python
Python中对象的比较操作==和is区别详析
2021/02/12 Python
Myprotein西班牙官网:欧洲第一大运动营养品牌
2020/02/24 全球购物
大学生咖啡店创业计划书
2014/01/21 职场文书
大学生未来职业生涯规划书
2014/02/15 职场文书
司机工作自我鉴定
2014/09/19 职场文书
工商管理专业毕业生自我鉴定2014
2014/10/04 职场文书
常务副县长“三严三实”对照检查材料思想汇报
2014/10/05 职场文书
追悼会答谢词范文
2015/09/29 职场文书