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类定义例子
Sep 12 Javascript
鼠标移动到图片名上,显示图片的简单实例
Jul 14 Javascript
JQuery中对Select的option项的添加、删除、取值
Aug 25 Javascript
JS弹出层单纯的绝对定位居中示例代码
Feb 18 Javascript
node.js不得不说的12点内容
Jul 14 Javascript
JS库之wow.js使用方法
Sep 14 Javascript
在Vue中使用highCharts绘制3d饼图的方法
Feb 08 Javascript
angularJs-$http实现百度搜索时的动态下拉框示例
Feb 27 Javascript
解决vue attr取不到属性值的问题
Sep 18 Javascript
vue 组件销毁并重置的实现
Jan 13 Javascript
vue 出现data-v-xxx的原因及解决
Aug 04 Javascript
JavaScript实现下拉列表
Jan 20 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 输出双引号&quot;与单引号'的方法
2010/05/09 PHP
PHP获取对象属性的三种方法实例分析
2019/01/03 PHP
关于jQuery中的each方法(jQuery到底干了什么)
2014/03/05 Javascript
js过滤特殊字符输入适合输入、粘贴、拖拽多种情况
2014/03/22 Javascript
jQuery实现列表的全选功能
2015/03/18 Javascript
javascript同步服务器时间和同步倒计时小技巧
2015/09/24 Javascript
跟我学习javascript的for循环和for...in循环
2015/11/18 Javascript
NodeJs入门教程之定时器和队列
2019/03/08 NodeJs
JavaScript变量作用域及内存问题实例分析
2019/06/10 Javascript
用原生JS实现爱奇艺首页导航栏代码实例
2019/09/19 Javascript
electron 如何将任意资源打包的方法步骤
2020/04/16 Javascript
Vue3 响应式侦听与计算的实现
2020/11/11 Javascript
python中map()与zip()操作方法
2016/02/27 Python
在pandas中一次性删除dataframe的多个列方法
2018/04/10 Python
用python处理图片实现图像中的像素访问
2018/05/04 Python
python matlibplot绘制3D图形
2018/07/02 Python
python实现换位加密算法的示例
2018/10/14 Python
Python快速转换numpy数组中Nan和Inf的方法实例说明
2019/02/21 Python
为什么从Python 3.6开始字典有序并效率更高
2019/07/15 Python
python获取Pandas列名的几种方法
2019/08/07 Python
Ubuntu下Python+Flask分分钟搭建自己的服务器教程
2019/11/19 Python
python实现图片素描效果
2020/09/26 Python
如何用tempfile库创建python进程中的临时文件
2021/01/28 Python
洲际酒店集团大中华区:IHG中国
2016/08/17 全球购物
数据库方面面试题
2012/04/22 面试题
大学生在校学习的自我评价
2014/02/18 职场文书
工程类专业自荐信范文
2014/03/09 职场文书
自主招生教师推荐信
2014/05/10 职场文书
水电站项目建议书
2014/05/12 职场文书
公路绿化方案
2014/05/12 职场文书
湖南省召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
简易离婚协议书范本
2014/10/24 职场文书
出差报告怎么写
2014/11/06 职场文书
爱牙日宣传活动总结
2015/02/05 职场文书
红歌会主持词
2015/07/02 职场文书
JS class语法糖的深入剖析
2022/07/07 Javascript