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 相关文章推荐
自动检查并替换文本框内的字符
Jun 30 Javascript
让JavaScript 轻松支持函数重载 (Part 1 - 设计)
Aug 04 Javascript
jquery 操作iframe的几种方法总结
Dec 13 Javascript
以Python代码实例展示kNN算法的实际运用
Oct 26 Javascript
写给小白的JavaScript引擎指南
Dec 04 Javascript
微信小程序 保留小数(toFixed)详细介绍
Nov 16 Javascript
详解js前端代码异常监控
Jan 11 Javascript
JavaScript中Hoisting详解 (变量提升与函数声明提升)
Aug 18 Javascript
JS实现DOM删除节点操作示例
Apr 04 Javascript
react+ant design实现Table的增、删、改的示例代码
Dec 27 Javascript
小程序实现图片预览裁剪插件
Nov 22 Javascript
vue项目中openlayers绘制行政区划
Dec 24 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图像处理类代码分享
2012/01/19 PHP
通过chrome浏览器控制台(Console)进行PHP Debug的方法
2016/10/19 PHP
js算法中的排序、数组去重详细概述
2013/10/14 Javascript
jquery 日期控件datepicker属性详细解析
2013/11/08 Javascript
怎么判断js脚本加载完成
2014/02/28 Javascript
JavaScript字符串常用类使用方法汇总
2015/04/14 Javascript
Node.js项目中调用JavaScript的EJS模板库的方法
2016/03/11 Javascript
jQuery表单事件实例代码分享
2016/08/18 Javascript
基于Javascript实现的不重复ID的生成器
2016/12/25 Javascript
移动端利用H5实现压缩图片上传功能
2017/03/29 Javascript
AngularJS下$http服务Post方法传递json参数的实例
2018/03/29 Javascript
vue打包使用Nginx代理解决跨域问题
2018/08/27 Javascript
vue使用pdfjs显示PDF可复制的实现方法
2018/12/14 Javascript
js实现随机8位验证码
2020/07/24 Javascript
js加减乘除精确运算方法实例代码
2021/01/17 Javascript
详解js创建对象的几种方式和对象方法
2021/03/01 Javascript
[00:47]TI7不朽珍藏III——沙王不朽展示
2017/07/15 DOTA
Python实例分享:快速查找出被挂马的文件
2014/06/08 Python
Django1.7+python 2.78+pycharm配置mysql数据库
2016/10/09 Python
浅谈python中的__init__、__new__和__call__方法
2017/07/18 Python
python使用socket创建tcp服务器和客户端
2018/04/12 Python
解决python打开https出现certificate verify failed的问题
2020/09/03 Python
在python中对于bool布尔值的取反操作
2020/12/11 Python
Spartoo美国:欧洲排名第一的在线时装零售商
2019/12/12 全球购物
什么情况下你必须要把一个类定义为abstract的
2013/01/06 面试题
计算机大学生的自我评价
2013/10/15 职场文书
少先队学雷锋活动总结范文
2014/03/09 职场文书
中学生评语大全
2014/04/18 职场文书
班主任工作经验交流材料
2014/05/13 职场文书
给老师的一封感谢信
2015/01/20 职场文书
冰峪沟导游词
2015/02/09 职场文书
狼牙山五壮士观后感
2015/06/09 职场文书
运动会三级跳加油稿
2015/07/21 职场文书
医院消毒隔离制度
2015/08/05 职场文书
mysql优化
2021/04/06 MySQL
pytorch 如何把图像数据集进行划分成train,test和val
2021/05/31 Python