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 实现Tab效果 思路是js思路
Mar 02 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
May 18 Javascript
IE不支持getElementsByClassName最终完美解决方案
Dec 17 Javascript
javascript实现微信分享
Dec 23 Javascript
JavaScript里 ==与===区别详解
Aug 16 Javascript
AngularJS实现按钮提示与点击变色效果
Sep 07 Javascript
浅谈webpack打包之后的文件过大的解决方法
Mar 07 Javascript
Angular Renderer (渲染器)的具体使用
May 03 Javascript
小程序实现自定义导航栏适配完美版
Apr 02 Javascript
javascript实现弹出层效果
Dec 10 Javascript
原生JS实现顶部导航栏显示按钮+搜索框功能
Dec 25 Javascript
vue过滤器实现日期格式化的案例分析
Jul 02 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+html5+ajax实现上传图片的方法
2016/05/14 PHP
javascript中的location用法简单介绍
2007/03/07 Javascript
JQuery Tips(2) 关于$()包装集你不知道的
2009/12/14 Javascript
JQuery AJAX提交中文乱码的解决方案
2010/07/02 Javascript
JavaScript实现网页上的浮动广告的简单方法
2013/06/14 Javascript
js 文本滚动效果的实例代码
2013/08/17 Javascript
JS中typeof与instanceof之间的区别总结
2013/11/14 Javascript
js通过元素class名字获取元素集合的具体实现
2014/01/06 Javascript
jquery库文件略庞大用纯js替换jquery的方法
2014/08/12 Javascript
轻松创建nodejs服务器(10):处理POST请求
2014/12/18 NodeJs
Javascript中匿名函数的调用与写法实例详解(多种)
2016/01/26 Javascript
js和C# 时间日期格式转换的简单实例
2016/05/28 Javascript
深入理解jQuery.data() 的实现方式
2016/11/30 Javascript
Vue.js中数据绑定的语法教程
2017/06/02 Javascript
详解node child_process模块学习笔记
2018/01/24 Javascript
详解webpack-dev-server的简单使用
2018/04/02 Javascript
详解nodejs 开发企业微信第三方应用入门教程
2019/03/12 NodeJs
解析JS在获取当前月的最后一天遇到的坑
2019/08/30 Javascript
微信小程序进入广告实现代码实例
2019/09/19 Javascript
在weex中愉快的使用scss的方法步骤
2020/01/02 Javascript
vue 扩展现有组件的操作
2020/08/14 Javascript
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
2020/09/27 Javascript
js中复选框的取值及赋值示例详解
2020/10/18 Javascript
用Python中的wxPython实现最基本的浏览器功能
2015/04/14 Python
使用python3实现操作串口详解
2019/01/01 Python
Python Django 页面上展示固定的页码数实现代码
2019/08/21 Python
pytorch实现CNN卷积神经网络
2020/02/19 Python
Django admin组件的使用
2020/10/24 Python
CSS3实现渐变背景兼容问题
2020/05/06 HTML / CSS
英国经典球衣网站:Classic Football Shirts
2017/05/20 全球购物
美国伊甸园兄弟种子公司:Eden Brothers
2018/07/01 全球购物
JAVA程序设计笔试题面试题一套
2015/07/28 面试题
财务部绩效考核方案
2014/05/04 职场文书
雷锋精神演讲稿
2014/05/13 职场文书
就业协议书范本
2014/10/08 职场文书
这样写python注释让代码更加的优雅
2021/06/02 Python