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继承的实现
Oct 24 Javascript
图片连续滚动代码[兼容IE/firefox]
Jun 11 Javascript
JQuery UI的拖拽功能实现方法小结
Mar 14 Javascript
基于jquery的bankInput银行卡账号格式化
Aug 22 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
Sep 05 Javascript
详解jQuery简单的表单应用
Dec 16 Javascript
js实现九宫格拼图小游戏
Feb 13 Javascript
在使用JSON格式处理数据时应该注意的问题小结
May 20 Javascript
解决vue 引入子组件报错的问题
Sep 06 Javascript
微信小程序车牌号码模拟键盘输入功能的实现代码
Nov 11 Javascript
浅谈Fetch 数据交互方式
Dec 20 Javascript
Vue将props值实时传递 并可修改的操作
Aug 09 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 文件上传模型,支持多文件上传
2009/08/13 PHP
利用PHP函数计算中英文字符串长度的方法
2014/11/11 PHP
PHP的RSA加密解密方法以及开发接口使用
2018/02/11 PHP
PDO::lastInsertId讲解
2019/01/29 PHP
利用404错误页面实现UrlRewrite的实现代码
2008/08/20 Javascript
jQuery获取地址栏参数插件(模仿C#)
2010/10/26 Javascript
javascript实现信息的显示和隐藏如注册页面
2013/12/03 Javascript
异步动态加载JS并运行(示例代码)
2013/12/13 Javascript
jQuery验证插件validation使用指南
2015/04/21 Javascript
JavaScript中的this到底是什么(一)
2015/12/09 Javascript
JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并)
2016/05/20 Javascript
你不需要jQuery(三) 新AJAX方法fetch()
2016/06/14 Javascript
jQuery实现点击弹出背景变暗遮罩效果实例代码
2016/06/24 Javascript
如何判断出一个js对象是否一个dom对象
2016/11/24 Javascript
微信小程序利用co处理异步流程的方法教程
2017/05/20 Javascript
详解JS数值Number类型
2018/02/07 Javascript
基于 D3.js 绘制动态进度条的实例详解
2018/02/26 Javascript
vue-vuex中使用commit提交mutation来修改state的方法详解
2018/09/16 Javascript
微信小程序实现的图片保存功能示例
2019/04/24 Javascript
Nodejs实现图片上传、压缩预览、定时删除功能
2019/10/25 NodeJs
nodejs开发一个最简单的web服务器实例讲解
2020/01/02 NodeJs
Vue父子组件传值的一些坑
2020/09/16 Javascript
Python获取系统默认字符编码的方法
2015/06/04 Python
详解使用Python处理文件目录的相关方法
2015/10/16 Python
使用Python的Django框架结合jQuery实现AJAX购物车页面
2016/04/11 Python
对Python 2.7 pandas 中的read_excel详解
2018/05/04 Python
[原创]Python入门教程4. 元组基本操作
2018/10/31 Python
python飞机大战pygame游戏框架搭建操作详解
2019/12/17 Python
详解python tkinter模块安装过程
2020/01/06 Python
matplotlib基础绘图命令之bar的使用方法
2020/08/13 Python
python环境搭建和pycharm的安装配置及汉化详细教程(零基础小白版)
2020/08/19 Python
Python爬虫+Tkinter制作一个翻译软件的示例
2021/02/20 Python
韩国家庭购物网上商店:Nsmall
2017/05/07 全球购物
实习单位指导教师评语
2014/12/30 职场文书
2016秋季小学开学寄语
2015/12/03 职场文书
教你使用Python获取QQ音乐某个歌手的歌单
2022/04/03 Python