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 经典动画菜单效果代码
Jan 26 Javascript
对 lightbox JS 图片控件进行了一下改造, 使其他支持复杂的图片说明
Mar 20 Javascript
ModelDialog JavaScript模态对话框类代码
Apr 17 Javascript
解析js原生方法创建表格效率测试
Jul 08 Javascript
js获取form的方法
May 06 Javascript
js实现精美的银灰色竖排折叠菜单
May 16 Javascript
JS采用绝对定位实现回到顶部效果完整实例
Jun 20 Javascript
javascript表单控件实例讲解
Sep 13 Javascript
JavaScript 动态三角函数实例详解
Jan 08 Javascript
JavaScript实现替换字符串中最后一个字符的方法
Mar 07 Javascript
详解Vue快速零配置的打包工具——parcel
Jan 16 Javascript
p5.js实现斐波那契螺旋的示例代码
Mar 22 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
thinkPHP+PHPExcel实现读取文件日期的方法(含时分秒)
2016/07/07 PHP
解决thinkphp5未定义变量会抛出异常,页面错误,请稍后再试的问题
2019/10/16 PHP
Yii2框架中一些折磨人的坑
2019/12/15 PHP
Jquery中对数组的操作代码
2011/08/12 Javascript
JS文本获得焦点清除文本文字的示例代码
2014/01/13 Javascript
JS自调用匿名函数具体实现
2014/02/11 Javascript
js检测网络是否具体连接功能的代码
2014/05/23 Javascript
JQuery显示隐藏页面元素的方法总结
2015/04/16 Javascript
基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
2016/05/03 Javascript
基于JS实现无缝滚动思路及代码分享
2016/06/07 Javascript
给easyui的datebox控件添加清空按钮的实现方法
2016/11/09 Javascript
使用Angular缓存父页面数据的方法
2017/01/03 Javascript
JS原型与原型链的深入理解
2017/02/15 Javascript
javascript 操作cookies详解及实例
2017/02/22 Javascript
jQuery实现移动端Tab选项卡效果
2017/03/15 Javascript
javascript数组去重常用方法实例分析
2017/04/11 Javascript
详解用vue.js和laravel实现微信授权登陆
2017/06/23 Javascript
茶余饭后聊聊Vue3.0响应式数据那些事儿
2019/10/30 Javascript
Vue+webpack实现懒加载过程解析
2020/02/17 Javascript
openlayers实现地图弹窗
2020/09/25 Javascript
快速解决vue2+vue-cli3项目ie兼容的问题
2020/11/17 Vue.js
详解Vite的新体验
2021/02/22 Javascript
Python中List.index()方法的使用教程
2015/05/20 Python
详解Python发送邮件实例
2016/01/10 Python
python实现傅里叶级数展开的实现
2018/07/21 Python
Python拼接微信好友头像大图的实现方法
2018/08/01 Python
使用python将请求的requests headers参数格式化方法
2019/01/02 Python
python3读取图片并灰度化图片的四种方法(OpenCV、PIL.Image、TensorFlow方法)总结
2019/07/04 Python
python3获取文件中url内容并下载代码实例
2019/12/27 Python
python GUI库图形界面开发之PyQt5信号与槽事件处理机制详细介绍与实例解析
2020/03/08 Python
python中wx模块的具体使用方法
2020/05/15 Python
利用CSS3实现单选框动画特效示例代码
2016/09/26 HTML / CSS
求职信模版
2013/11/30 职场文书
竞聘演讲稿范文
2014/01/12 职场文书
2019新学期家长会工作计划
2019/08/21 职场文书
python 使用Tensorflow训练BP神经网络实现鸢尾花分类
2021/05/12 Python