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 相关文章推荐
js Flash插入函数免激活代码
Mar 31 Javascript
ExtJs中简单的登录界面制作方法
Aug 19 Javascript
jquery 跳到顶部和底部动画2句代码简单实现
Jul 18 Javascript
基于javascript实现简单计算器功能
Jan 03 Javascript
EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
Feb 21 Javascript
深入理解jQuery之防止冒泡事件
May 24 Javascript
vue实现百度搜索下拉提示功能实例
Jun 14 Javascript
ES6扩展运算符的用途实例详解
Aug 20 Javascript
AngularJs分页插件使用详解
Jun 30 Javascript
微信小程序wepy框架学习和使用心得详解
May 24 Javascript
Vue指令之 v-cloak、v-text、v-html实例详解
Aug 08 Javascript
Vue OpenLayer 为地图绘制风场效果
Apr 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下载远程文件类(支持断点续传)
2008/11/14 PHP
PHP 常用函数库和一些实用小技巧
2009/01/01 PHP
php快速url重写 更新版[需php 5.30以上]
2010/04/20 PHP
PHPer 需要了解的 5 个 Composer 小技巧
2014/08/18 PHP
PHP使用Mysql事务实例解析
2014/09/08 PHP
jQuery聚合函数实例
2015/05/21 Javascript
javascript字符串替换函数如何一次性全部替换掉
2015/10/30 Javascript
Bootstrap入门书籍之(三)栅格系统
2016/02/17 Javascript
前端js实现文件的断点续传 后端PHP文件接收
2016/10/14 Javascript
深入理解vue2.0路由如何配置问题
2017/07/18 Javascript
vue.js移动端app之上拉加载以及下拉刷新实战
2017/09/11 Javascript
select获取下拉框的值 下拉框默认选中方法
2018/02/28 Javascript
Vue.js样式动态绑定实现小结
2019/01/24 Javascript
JS 封装父页面子页面交互接口的实例代码
2019/06/25 Javascript
微信小程序工具函数封装
2019/10/28 Javascript
js 递归json树实现根据子id查父id的方法分析
2019/11/08 Javascript
[01:06:39]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第三局
2016/03/02 DOTA
python使用pil生成缩略图的方法
2015/03/26 Python
python之pandas用法大全
2018/03/13 Python
python用列表生成式写嵌套循环的方法
2018/11/08 Python
Python函数中不定长参数的写法
2019/02/13 Python
python中嵌套函数的实操步骤
2019/02/27 Python
Django之提交表单与前后端交互的方法
2019/07/19 Python
解决使用export_graphviz可视化树报错的问题
2019/08/09 Python
使用python远程操作linux过程解析
2019/12/04 Python
使用Keras加载含有自定义层或函数的模型操作
2020/06/10 Python
澳大利亚香水在线:Price Rite Mart
2017/12/28 全球购物
Talbots官网:美国成熟女装品牌
2019/11/15 全球购物
日本动漫周边服饰销售网站:Atsuko
2019/12/16 全球购物
商务助理求职信范文
2014/04/20 职场文书
2014高考励志标语
2014/06/05 职场文书
甜品店创业计划书
2014/08/14 职场文书
推广普通话共筑中国梦演讲稿
2014/09/21 职场文书
2015年师德师风承诺书
2015/01/22 职场文书
XX部保密工作制度范本
2019/08/27 职场文书
redis通过6379端口无法连接服务器(redis-server.exe闪退)
2021/05/08 Redis