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 Deferred和Promise创建响应式应用程序详细介绍
Mar 05 Javascript
Js放到HTML文件中的哪个位置有什么区别
Aug 21 Javascript
js中substring和substr的详细介绍与用法
Aug 29 Javascript
使用Jquery实现点击文字后变成文本框且可修改
Sep 21 Javascript
JQuery实现鼠标移动到图片上显示边框效果
Jan 09 Javascript
基于jQuery实现点击弹出层实例代码
Jan 01 Javascript
Vuejs 2.0 子组件访问/调用父组件的方法(示例代码)
Feb 08 Javascript
快速解决vue-cli不能初始化webpack模板的问题
Mar 20 Javascript
vue+axios 前端实现的常用拦截的代码示例
Aug 23 Javascript
基于vue-cli 路由 实现类似tab切换效果(vue 2.0)
May 08 Javascript
基于vue-cli3+typescript的tsx开发模板搭建过程分享
Feb 28 Javascript
node使用async_hooks模块进行请求追踪
Jan 28 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的单引号和双引号 字符串效率
2009/05/27 PHP
浅析PKI加密解密 OpenSSL
2013/07/01 PHP
深入理解PHP内核(二)之SAPI探究
2015/11/10 PHP
PHP var关键字相关原理及使用实例解析
2020/07/11 PHP
FLASH 广告之外的链接
2008/12/16 Javascript
jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
2013/01/11 Javascript
JQuery AJAX 中文乱码问题解决
2013/06/05 Javascript
JavaScript中的this关键字介绍与使用实例
2013/06/21 Javascript
js将控件隐藏的方法及display属性介绍
2013/07/04 Javascript
固定网页背景图同时保持图片比例的思路代码
2013/08/15 Javascript
jquery中get和post的简单实例
2014/02/04 Javascript
使用JSON.parse将json字符串转换成json对象的时候会出错
2014/09/04 Javascript
Seajs是什么及sea.js 由来,特点以及优势
2016/10/13 Javascript
单击按钮发送验证码,出现倒计时的简单实例
2017/03/17 Javascript
bootstrap Table服务端处理分页(后台是.net)
2017/10/19 Javascript
微信小程序scroll-view横向滑动嵌套for循环的示例代码
2018/09/20 Javascript
详解js访问对象的属性和方法
2018/10/25 Javascript
手动下载Chrome并解决puppeteer无法使用问题
2018/11/12 Javascript
vue在自定义组件中使用v-model进行数据绑定的方法
2019/03/25 Javascript
[02:27]DOTA2英雄基础教程 莱恩
2014/01/17 DOTA
[00:50]2014DOTA2国际邀请赛 NEWBEE战队回顾
2014/08/01 DOTA
Python 网页解析HTMLParse的实例详解
2017/08/10 Python
pandas修改DataFrame列名的方法
2018/04/08 Python
Python配置虚拟环境图文步骤
2019/05/20 Python
找Python安装目录,设置环境路径以及在命令行运行python脚本实例
2020/03/09 Python
详解pandas.DataFrame.plot() 画图函数
2020/06/14 Python
美国战术品牌:5.11 Tactical
2019/05/01 全球购物
英国鞋网:Rubber Sole
2020/03/03 全球购物
简述Linux文件系统通过i节点把文件的逻辑结构和物理结构转换的工作过程
2012/04/17 面试题
个人求职信范文分享
2014/01/06 职场文书
数字化校园建设方案
2014/05/03 职场文书
保护环境倡议书500字
2014/05/19 职场文书
党员承诺书范文2015
2015/04/27 职场文书
2015中学教学工作总结
2015/07/22 职场文书
Java实现多线程聊天室
2021/06/26 Java/Android
JavaScript声明变量和数据类型的转换
2022/04/12 Javascript