jQuery实现倒计时(倒计时年月日可自己输入)


Posted in Javascript onDecember 02, 2016
$(function(){
 var tYear = ""; //输入的年份
 var tMonth = ""; //输入的月份
 var tDate = ""; //输入的日期
 var iRemain = ""; //开始和结束之间相差的毫秒数
 var sDate = ""; //倒计的天数
 var sHour = ""; //倒计时的小时
 var sMin = ""; //倒计时的分钟
 var sSec = ""; //倒计时的秒数
 var sMsec = ""; //毫秒数
 //通用工具函数,在个位数上加零,根据传的N的参数,来设前面加几个零
 function setDig(num,n){
 var str = ""+num;
 while(str.length<n){
 str="0"+str
 }
 return str;
 }
 //获得相差的天,小时,分钟,秒
 function getdate(){
 //创建开始时间和结束时间的日期对象
 var oStartDate = new Date();
 var oEndDate = new Date();
 //获取文本框的值
 tYear = $("#tyear").val();
 tMonth = $("#tmonth").val();
 tDate = $("#tdate").val();
 //设置结束时间
 oEndDate.setFullYear(parseInt(tYear));
 oEndDate.setMonth(parseInt(tMonth)-1);
 oEndDate.setDate(parseInt(tDate));
 oEndDate.setHours(0);
 oEndDate.setMinutes(0);
 oEndDate.setSeconds(0);
 //求出开始和结束时间的秒数(除以1000)
 iRemain = (oEndDate.getTime() - oStartDate.getTime())/1000; 
 //总的秒数除以一天的秒数,再取出整数部分,就得出有多少天。
 sDate = setDig(parseInt(iRemain/(60*60*24)),3);
 //总的秒数除以一天的秒数,然后取其中的余数,就是把整数天扣除之后,剩下的总秒数。
 iRemain %= 60*60*24; 
 //剩下的总秒数除以一个小时的秒数,再取整数部分,就是有多少小时。
 sHour = setDig(parseInt(iRemain/(60*60)),2)
 //剩下的总秒数除以一个小时的秒数,再取其余数,这个余数,就是扣除小时这后,剩下的总秒数。
 iRemain %= 60*60;
 //剩下的总秒数除以一分钟的秒数,再取其整数部分,就是有多少分钟。
 sMin = setDig(parseInt(iRemain/60),2)
 //剩下的总秒数除以一分钟的秒数,再取其余数,这个余数,就是扣除分钟之后,剩下的总秒数。
 iRemain%=60;
 //剩下的秒数
 sSec = setDig(iRemain,2);
 //毫秒数
 sMsec = sSec*100; 
 }
 //更改显示的时间
 function updateShow(){
 $(".showdate span").text(tYear+"-"+tMonth+"-"+tDate);
 $(".count span").each(function(index, element) {
 if(index==0){
 $(this).text(sDate);
 }else if(index==1){
 $(this).text(sHour);
 }else if(index == 2){
 $(this).text(sMin);
 }else if(index == 3){
 $(this).text(sSec);
 }else if(index == 4){
 $(this).text(sMsec);
 } 
 });
 } 
 //每一秒执行一次时间更新
 function autoTime(){
 getdate();
 //如果小于零,清除调用自己,并且返回
 if(iRemain<0){
 clearTimeout(setT);
 return;
 }
 updateShow();
 var setT = setTimeout(autoTime,1000); 
 } 
 //点击按钮开始计时
 $("button").click(function(){
 autoTime();
 })
})

昨天看了“妙味课堂”的倒计时视频,自己学着写了下。

记录需要注意的地方:

1.取模运算:

iRemain %= 60*60*24;

就是返回余数,在这个实例中的余数,就是把整数拿走后,剩下的秒数。

 2.工具函数 setDig(num,n)

可以根据传入的参数,自动在传入的数字前加零

以上就是本文的全部内容,希望对大家有所帮助,谢谢对三水点靠木的支持!

Javascript 相关文章推荐
JS 两个字符串时间的天数差计算
Aug 25 Javascript
js在数组中删除重复的元素自保留一个(两种实现思路)
Aug 22 Javascript
jQuery中ready事件用法实例
Jan 19 Javascript
IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题
Aug 21 Javascript
Bootstrap弹出带合法性检查的登录框实例代码【推荐】
Jun 23 Javascript
JS 根据子网掩码,网关计算出所有IP地址范围示例
Apr 23 Javascript
深入理解jQuery.data() 的实现方式
Nov 30 Javascript
Angular2 http jsonp的实例详解
Aug 31 Javascript
ES6中新增的Object.assign()方法详解
Sep 22 Javascript
vue中实现在外部调用methods的方法(推荐)
Feb 08 Javascript
JavaScript数组及常见操作方法小结
Nov 13 Javascript
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
Aug 05 Vue.js
JavaScript 计算笛卡尔积实例详解
Dec 02 #Javascript
jQuery联动日历的实例解析
Dec 02 #Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
Dec 02 #Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
Dec 02 #Javascript
有关suggest快速删除后仍然出现下拉列表的bug问题
Dec 02 #Javascript
Vue.js路由组件vue-router使用方法详解
Dec 02 #Javascript
搭建Bootstrap离线文档的方法
Dec 02 #Javascript
You might like
thinkPHP中钩子的两种配置调用方法详解
2016/11/11 PHP
关于B/S判断浏览器断开的问题讨论
2008/10/29 Javascript
JQuery 图片延迟加载并等比缩放插件
2009/11/09 Javascript
学习JavaScript的最佳方法分享
2011/10/21 Javascript
jquery 图片缩放拖动的简单实例
2014/01/08 Javascript
jQuery防止click双击多次提交及传递动态函数或多参数
2014/04/02 Javascript
node.js中的path.delimiter方法使用说明
2014/12/09 Javascript
深入浅析JavaScript中with语句的理解
2016/05/12 Javascript
浅谈Javascript数据属性与访问器属性
2016/07/26 Javascript
AngularJS ng-controller 指令简单实例
2016/08/01 Javascript
js实现添加可信站点、修改activex安全设置,禁用弹出窗口阻止程序
2016/08/17 Javascript
学习使用bootstrap的modal和carousel
2016/12/09 Javascript
AngularJS Select(选择框)使用详解
2017/01/18 Javascript
Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)
2017/05/09 Javascript
vue的mixins属性详解
2018/03/14 Javascript
探索浏览器页面关闭window.close()的使用详解
2020/08/21 Javascript
[03:04]DOTA2英雄基础教程 影魔
2013/12/11 DOTA
python 的列表遍历删除实现代码
2020/04/12 Python
python-opencv在有噪音的情况下提取图像的轮廓实例
2017/08/30 Python
Python字符串的全排列算法实例详解
2019/01/07 Python
用python打印菱形的实操方法和代码
2019/06/25 Python
Python datetime包函数简单介绍
2019/08/28 Python
Python读取YAML文件过程详解
2019/12/30 Python
HTML5中判断用户是否正在浏览页面的方法
2014/05/03 HTML / CSS
美国打印机墨水和碳粉购物网站:QuikShip Toner
2018/08/29 全球购物
可口可乐唇膏:Lip Smackers
2019/08/27 全球购物
Java语言程序设计测试题改错题部分
2014/07/22 面试题
高校辅导员推荐信范文
2013/12/25 职场文书
初中科学教学反思
2014/01/21 职场文书
做一个有道德的人活动方案
2014/08/25 职场文书
篮球友谊赛通讯稿
2014/10/10 职场文书
2015年个人工作总结报告
2015/04/25 职场文书
房屋维修申请报告
2015/05/18 职场文书
检讨书之工作不认真
2019/08/14 职场文书
读《儒林外史》有感:少一些功利,多一些真诚
2020/01/19 职场文书
WCG2010 星际争霸决赛 Flash vs Goojila 1 星际经典比赛回顾
2022/04/01 星际争霸