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 相关文章推荐
转自Jquery官方 jQuery1.1.3发布,速度提升800%,体积保持20K
Aug 19 Javascript
Javascript的构造函数和constructor属性
Jan 09 Javascript
javascript 循环调用示例介绍
Nov 20 Javascript
Javascript+CSS实现影像卷帘效果思路及代码
Oct 20 Javascript
jQuery 插件开发指南
Nov 14 Javascript
javascript中innerText和innerHTML属性用法实例分析
May 13 Javascript
vue2.x 父组件监听子组件事件并传回信息的方法
Jul 17 Javascript
Windows下Node.js安装及环境配置方法
Sep 18 Javascript
angularjs1.5 组件内用函数向外传值的实例
Sep 30 Javascript
基于Vue2实现简易的省市区县三级联动组件效果
Nov 05 Javascript
关于JS解构的5种有趣用法
Sep 05 Javascript
微信小程序音乐播放器开发
Nov 20 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
暴雪前总裁遗憾:没尽早追赶Dota 取消星际争霸幽灵
2020/03/08 星际争霸
Warning: session_destroy() : Trying to destroy uninitialized sessionq错误
2011/06/16 PHP
PHP中PDO连接数据库中各种DNS设置方法小结
2016/05/13 PHP
PHP isset()及empty()用法区别详解
2020/08/29 PHP
javascript 三种编解码方式
2010/02/01 Javascript
细说浏览器特性检测(2)-通用事件检测
2010/11/05 Javascript
javascript showModalDialog 内跳转页面的问题
2010/11/25 Javascript
深入理解JavaScript系列(36):设计模式之中介者模式详解
2015/03/04 Javascript
JavaScript中对JSON对象的基本操作示例
2016/05/21 Javascript
AngularJS 中文API参考手册
2016/07/28 Javascript
jQuery实现的省市县三级联动菜单效果完整实例
2016/08/01 Javascript
Bootstrap CSS组件之下拉菜单(dropdown)
2016/12/17 Javascript
详解Angular.js指令中scope类型的几种特殊情况
2017/02/21 Javascript
详解nodejs express下使用redis管理session
2017/04/24 NodeJs
vue按需引入element Transfer 穿梭框
2017/09/30 Javascript
微信小程序获取手机号授权用户登录功能
2017/11/09 Javascript
vue 实现 ios 原生picker 效果及实现思路解析
2017/12/06 Javascript
vue组件中使用props传递数据的实例详解
2018/04/08 Javascript
vue2之简易的pc端短信验证码的问题及处理方法
2019/06/03 Javascript
js神秘的电报密码 哈弗曼编码实现
2019/09/10 Javascript
js中forEach,for in,for of循环的用法示例小结
2020/03/14 Javascript
JavaScript设计模式--简单工厂模式实例分析【XHR工厂案例】
2020/05/23 Javascript
JavaScript 监听组合按键思路及代码实现
2020/07/28 Javascript
[00:48]食人魔魔法师至宝“金鹏之幸”全新模型和自定义特效展示
2019/12/19 DOTA
解决python使用open打开文件中文乱码的问题
2017/12/29 Python
PyCharm安装第三方库如Requests的图文教程
2018/05/18 Python
python range实例用法分享
2020/02/06 Python
Python flask框架实现浏览器点击自定义跳转页面
2020/06/04 Python
物业管理大学生个人的自我评价
2013/10/10 职场文书
行政文员实习自我鉴定范文
2014/09/14 职场文书
在职员工证明书
2014/09/19 职场文书
幼儿园教师求职信
2015/03/20 职场文书
2015年保险公司内勤工作总结
2015/05/23 职场文书
妈妈别哭观后感
2015/06/08 职场文书
2016年小学生教师节广播稿
2015/12/18 职场文书
win11自动弹出虚拟键盘怎么关闭? Win11关闭虚拟键盘的技巧
2023/01/09 数码科技