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的滚动条滚动固定div(附演示下载)
Oct 29 Javascript
jquery实现盒子下拉效果示例代码
Sep 12 Javascript
javascript实现根据iphone屏幕方向调用不同样式表的方法
Jul 13 Javascript
bootstrap警告框示例代码分享
May 17 Javascript
JS组件系列之Gojs组件 前端图形化插件之利器
Nov 29 Javascript
如何重置vue打印变量的显示方式
Dec 06 Javascript
详解webpack 打包文件体积过大解决方案(code splitting)
Apr 10 Javascript
Vue Router的懒加载路径的解决方法
Jun 21 Javascript
node.js使用免费的阿里云ip查询获取ip所在地【推荐】
Sep 03 Javascript
解决Layui 表格自适应高度的问题
Nov 15 Javascript
JavaScript实现图片伪异步上传过程解析
Apr 10 Javascript
javascript实现画板功能
Apr 12 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读取XML值的代码(推荐)
2011/01/01 PHP
基于PHPExcel的常用方法总结
2013/06/13 PHP
yii框架builder、update、delete使用方法
2014/04/30 PHP
php删除数组指定元素实现代码
2017/05/03 PHP
JQuery 表单中textarea字数限制实现代码
2009/12/07 Javascript
js 幻灯片的实现
2011/12/06 Javascript
js 赋值包含单引号双引号问题的解决方法
2014/02/26 Javascript
深入分析js的冒泡事件
2014/12/05 Javascript
jQuery通过deferred对象管理ajax异步
2016/05/20 Javascript
完美实现js选项卡切换效果(二)
2017/03/08 Javascript
JS排序之冒泡排序详解
2017/04/08 Javascript
最基础的vue.js双向绑定操作
2017/08/23 Javascript
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法
2017/10/26 Javascript
解决npm安装Electron缓慢网络超时导致失败的问题
2018/02/06 Javascript
Vue 创建组件的两种方法小结(必看)
2018/02/23 Javascript
微信小程序实现通过js操作wxml的wxss属性示例
2018/12/06 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
2019/12/30 jQuery
python 运算符 供重载参考
2009/06/11 Python
Python内置函数之filter map reduce介绍
2014/11/30 Python
Python的Django框架中的select_related函数对QuerySet 查询的优化
2015/04/01 Python
Python基础语法(Python基础知识点)
2016/02/28 Python
Python中对象迭代与反迭代的技巧总结
2016/09/17 Python
python3实现的zip格式压缩文件夹操作示例
2019/08/17 Python
python str字符串转uuid实例
2020/03/03 Python
如何在mac下配置python虚拟环境
2020/07/06 Python
Python使用socket模块实现简单tcp通信
2020/08/18 Python
好药师网上药店:安全合法的网上药品零售药房
2017/02/15 全球购物
HelloFresh奥地利:立即订购烹饪盒
2019/02/22 全球购物
YBF Beauty官网:美丽挚友,美国知名彩妆品牌
2020/11/22 全球购物
教师旷工检讨书
2014/01/18 职场文书
小学防溺水制度
2014/01/29 职场文书
六查六看个人剖析材料
2014/10/14 职场文书
2019个人年度目标制定攻略!
2019/07/12 职场文书
JavaScript实现淘宝商品图切换效果
2021/04/29 Javascript
新手必备Python开发环境搭建教程
2021/05/28 Python
Java8 CompletableFuture 异步回调
2022/04/28 Java/Android