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 相关文章推荐
firefo xml 读写实现js代码
Jun 11 Javascript
jquery 插件开发方法小结
Oct 23 Javascript
JS保留小数点(四舍五入、四舍六入)实现思路及实例
Apr 25 Javascript
js实现简单随机抽奖的方法
Jan 27 Javascript
jQuery源码解读之extend()与工具方法、实例方法详解
Mar 30 jQuery
vuejs绑定class和style样式
Apr 11 Javascript
Vue 组件间的样式冲突污染
Aug 31 Javascript
记一次webapck4 配置文件无效的解决历程
Sep 19 Javascript
vue 集成 vis-network 实现网络拓扑图的方法
Aug 07 Javascript
Jquery Datatables的使用详解
Jan 30 jQuery
原生js拖拽实现图形伸缩效果
Feb 10 Javascript
基于javascript实现日历功能原理及代码实例
May 07 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数组中删除元素的实现代码
2012/06/22 PHP
解析php DOMElement 操作xml 文档的实现代码
2013/05/10 PHP
php限制ip地址范围的方法
2015/03/31 PHP
js操作iframe兼容各种主流浏览器示例代码
2013/07/22 Javascript
JQuery页面图片切换和新闻列表滚动效果的具体实现
2013/09/26 Javascript
jQuery中animate()方法用法实例
2014/12/24 Javascript
温习Javascript基础语法之词法结构
2016/05/31 Javascript
jqPlot jQuery绘图插件的使用
2016/06/18 Javascript
Javascript闭包与函数柯里化浅析
2016/06/22 Javascript
JS快速实现移动端拼图游戏
2016/09/05 Javascript
微信小程序 配置顶部导航条标题颜色的实现方法
2017/09/20 Javascript
JavaScript this绑定过程深入详解
2018/12/07 Javascript
微信小程序调用wx.getImageInfo遇到的坑解决
2020/05/31 Javascript
手把手带你搭建一个node cli的方法示例
2020/08/07 Javascript
JavaScript中CreateTextFile函数
2020/08/30 Javascript
盘点提高 Python 代码效率的方法
2014/07/03 Python
Python批量重命名同一文件夹下文件的方法
2015/05/25 Python
简介Django框架中可使用的各类缓存
2015/07/23 Python
Python编程实现的简单Web服务器示例
2017/06/22 Python
用Python将结果保存为xlsx的方法
2019/01/28 Python
python opencv鼠标事件实现画框圈定目标获取坐标信息
2020/04/18 Python
Python笔记之facade模式
2019/11/20 Python
python 爬虫爬取京东ps4售卖情况
2020/12/18 Python
加拿大百叶窗和窗帘定制网站:Blinds
2017/01/30 全球购物
阿联酋航空官方网站:Emirates
2017/10/17 全球购物
捷克街头、运动和滑板一站式商店:BoardStar.cz
2019/10/06 全球购物
美国校服网上商店:French Toast
2019/10/08 全球购物
俄罗斯一家时尚女装商店:Charuel
2019/12/04 全球购物
什么是Connection-oriented Protocol/Connectionless Protocol面向连接的协议/无连接协议
2012/09/06 面试题
校园新闻广播稿
2014/01/10 职场文书
市场营销职业生涯规划书范文
2014/01/12 职场文书
文明餐桌活动方案
2014/02/11 职场文书
中秋节主持词
2014/04/02 职场文书
房屋租赁意向书范本
2015/05/09 职场文书
医院感染管理制度
2015/08/05 职场文书
Prometheus 监控MySQL使用grafana展示
2021/08/30 MySQL