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 相关文章推荐
用函数式编程技术编写优美的 JavaScript
Nov 25 Javascript
file模式访问网页时iframe高度自适应解决方案
Jan 16 Javascript
在页面中js获取光标/鼠标的坐标及光标的像素坐标
Nov 11 Javascript
浅谈EasyUI中Treegrid节点的删除
Mar 01 Javascript
jQuery实现仿Alipay支付宝首页全屏焦点图切换特效
May 04 Javascript
jQuery蓝色风格滑动导航栏代码分享
Aug 19 Javascript
每天一篇javascript学习小结(面向对象编程)
Nov 20 Javascript
Node.js实用代码段之正确拼接Buffer
Mar 17 Javascript
ES6中module模块化开发实例浅析
Apr 06 Javascript
vue.js项目nginx部署教程
Apr 05 Javascript
js canvas画布实现高斯模糊效果
Nov 27 Javascript
JavaScript偏函数与柯里化实例详解
Mar 27 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
php数字游戏 计算24算法
2012/06/10 PHP
浅析php中jsonp的跨域实例
2013/06/21 PHP
PHP原生函数一定好吗?
2014/12/08 PHP
smarty缓存用法分析
2014/12/16 PHP
PHP十六进制颜色随机生成器功能示例
2017/07/24 PHP
JS request函数 用来获取url参数
2010/05/17 Javascript
jquery操作select option 的代码小结
2011/06/21 Javascript
浅谈javascript对象模型和function对象
2014/12/26 Javascript
理解javascript回调函数
2014/12/28 Javascript
jQuery.ajax实现根据不同的Content-Type做出不同的响应
2016/11/03 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
2017/03/06 Javascript
jQuery简单实现遍历单选框的方法
2017/03/06 Javascript
Vue.js学习记录之在元素与template中使用v-if指令实例
2017/06/27 Javascript
JS实现读取xml内容并输出到div中的方法示例
2018/04/19 Javascript
解决webpack dev-server不能匹配post请求的问题
2018/08/24 Javascript
详解vue 数组和对象渲染问题
2018/09/21 Javascript
webpack4 SplitChunks实现代码分隔详解
2019/05/23 Javascript
浅谈vue-router路由切换 组件重用挖下的坑
2019/11/01 Javascript
Vue中computed和watch有哪些区别
2020/12/19 Vue.js
详解js创建对象的几种方式和对象方法
2021/03/01 Javascript
[41:52]2018DOTA2亚洲邀请赛3月29日 小组赛A组 TNC VS OpTic
2018/03/30 DOTA
用实例详解Python中的Django框架中prefetch_related()函数对数据库查询的优化
2015/04/01 Python
Python实现HTTP协议下的文件下载方法总结
2016/04/20 Python
Python实现一个服务器监听多个客户端请求
2018/04/12 Python
深入浅析python 中的匿名函数
2018/05/21 Python
python 实现分组求和与分组累加求和代码
2020/05/18 Python
tensorflow与numpy的版本兼容性问题的解决
2021/01/08 Python
财务经理的岗位职责
2013/12/17 职场文书
优秀员工表扬信
2014/01/17 职场文书
淘宝客服专员岗位职责
2014/04/11 职场文书
一份文言文检讨书
2014/09/13 职场文书
购房协议书范本(无房产证)
2014/10/07 职场文书
群众路线自我剖析及整改措施
2014/11/04 职场文书
团员自我评价范文
2015/03/10 职场文书
手残删除python之后的补救方法
2021/06/26 Python
python工具dtreeviz决策树可视化和模型可解释性
2022/03/03 Python