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 日历提醒系统( 兼容所有浏览器 )
Apr 07 Javascript
禁止选中文字兼容IE、Chrome、FF等
Sep 04 Javascript
JavaScript中点击事件的写法
Jun 28 Javascript
JQuery和HTML5 Canvas实现弹幕效果
Jan 04 Javascript
原生Aajax 和jQuery Ajax 写法个人总结
Mar 24 jQuery
微信小程序 rich-text的使用方法
Aug 04 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
Feb 03 Javascript
解决vue2 在mounted函数无法获取prop中的变量问题
Nov 15 Javascript
vue.js click点击事件获取当前元素对象的操作
Aug 07 Javascript
Node.js path模块,获取文件后缀名操作
Nov 07 Javascript
详解vue实现坐标拾取器功能示例
Nov 18 Vue.js
vue 动态生成拓扑图的示例
Jan 03 Vue.js
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 include的妙用,实现路径加密
2008/07/29 PHP
PHP获取MAC地址的函数代码
2011/09/11 PHP
thinkphp实现分页显示功能
2016/12/03 PHP
JScript中的undefined和&quot;undefined&quot;的区别
2007/03/08 Javascript
让GoogleCode的SVN下的HTML文件在FireFox下正常显示.
2009/05/25 Javascript
jquery删除数据记录时的弹出提示效果
2014/05/06 Javascript
javascript的alert box在java中如何显示多行
2014/05/18 Javascript
js实现简单锁屏功能实例
2015/05/27 Javascript
JS+CSS实现的日本门户网站经典选项卡导航效果
2015/09/27 Javascript
jQuery遍历json的方法(推荐)
2016/06/12 Javascript
Bootstrap登陆注册页面开发教程
2016/07/12 Javascript
Vue表单实例代码
2016/09/05 Javascript
利用jquery给指定的table动态添加一行、删除一行的方法
2016/10/12 Javascript
基于vue.js实现侧边菜单栏
2017/03/20 Javascript
什么是Vue.js框架 为什么选择它?
2017/10/17 Javascript
浅谈Vue.js 组件中的v-on绑定自定义事件理解
2017/11/17 Javascript
Vue 拦截器对token过期处理方法
2018/01/23 Javascript
基于vue2.0的活动倒计时组件countdown(附源码下载)
2018/10/09 Javascript
Vue自定义表单内容检查rules实例
2020/10/30 Javascript
python 七种邮件内容发送方法实例
2014/04/22 Python
Python and、or以及and-or语法总结
2015/04/14 Python
Python安装第三方库的3种方法
2015/06/21 Python
python中的错误处理
2016/04/10 Python
python pandas 组内排序、单组排序、标号的实例
2018/04/12 Python
使用python编写udp协议的ping程序方法
2018/04/22 Python
基于Django URL传参 FORM表单传数据 get post的用法实例
2018/05/28 Python
python仿evething的文件搜索器实例代码
2019/05/13 Python
python 爬取B站原视频的实例代码
2020/09/09 Python
国际领先的学术出版商:Springer
2017/01/11 全球购物
实习生单位鉴定意见
2013/12/04 职场文书
绘画专业自荐信范文
2014/02/23 职场文书
机械专业技术员求职信
2014/06/14 职场文书
研究生简历自我评
2015/03/11 职场文书
2015年音乐教学工作总结
2015/07/22 职场文书
导游词之西安大清真寺
2019/12/17 职场文书
手把手教你从零开始react+antd搭建项目
2021/06/03 Javascript