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 相关文章推荐
javascript中的prototype属性实例分析说明
Aug 09 Javascript
js函数调用常用方法详解
Dec 03 Javascript
js登录弹出层特效
Mar 07 Javascript
点击A元素触发B元素的事件在IE8下会识别成A元素
Sep 04 Javascript
用队列模拟jquery的动画算法实例
Jan 20 Javascript
详解jQuery Mobile自定义标签
Jan 06 Javascript
深入理解Ajax的get和post请求
Jun 02 Javascript
JavaScript 判断对象中是否有某属性的常用方法
Jun 14 Javascript
解决Layui数据表格中checkbox位置不居中的方法
Aug 15 Javascript
vue配置font-awesome5的方法步骤
Jan 27 Javascript
vue移动端城市三级联动组件使用详解
Jul 26 Javascript
Vue如何获取数据列表展示
Dec 11 Javascript
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
《PHP编程最快明白》第八讲:php启发和小结
2010/11/01 PHP
深入掌握include_once与require_once的区别
2013/06/17 PHP
php实现图片上传时添加文字和图片水印技巧
2020/04/18 PHP
Laravel学习教程之路由模块
2017/08/18 PHP
js DOM的学习笔记
2011/12/22 Javascript
javascript SpiderMonkey中的函数序列化如何进行
2012/12/05 Javascript
js弹出层永远居中实现思路及代码
2013/11/29 Javascript
firefox下jquery ajax返回object XMLDocument处理方法
2014/01/26 Javascript
jQuery动态效果显示人物结构关系图的方法
2015/05/07 Javascript
JS动态创建DOM元素的方法
2015/06/09 Javascript
jQuery带进度条全屏图片轮播特效代码分享
2020/06/28 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
2018/10/12 Javascript
JavaScript 对引擎、运行时、调用堆栈的概述理解
2018/10/22 Javascript
微信小程序下拉框功能的实例代码
2018/11/06 Javascript
Vue配置marked链接添加target=&quot;_blank&quot;的方法
2019/07/19 Javascript
java实现单链表增删改查的实例代码详解
2019/08/30 Javascript
解决vue更新路由router-view复用组件内容不刷新的问题
2019/11/04 Javascript
Jquery cookie插件实现原理代码解析
2020/08/04 jQuery
[01:47]2018年度DOTA2最具人气解说-完美盛典
2018/12/16 DOTA
如何解决django配置settings时遇到Could not import settings 'conf.local'
2014/11/18 Python
Python调用C++程序的方法详解
2017/01/24 Python
python自动登录12306并自动点击验证码完成登录的实现源代码
2018/04/25 Python
Python中__slots__属性介绍与基本使用方法
2018/09/05 Python
Python实现的各种常见分布算法示例
2018/12/13 Python
利用python计算windows全盘文件md5值的脚本
2019/07/27 Python
keras的siamese(孪生网络)实现案例
2020/06/12 Python
中国首家奢侈品O2O网购平台:第五大道奢侈品网
2017/12/14 全球购物
大学军训感言600字
2014/02/25 职场文书
3的组成教学反思
2014/04/30 职场文书
计算机应用专业毕业生求职信
2014/06/03 职场文书
小学感恩教育活动总结
2014/07/07 职场文书
反对形式主义、官僚主义、享乐主义和奢靡之风整改措施
2014/09/17 职场文书
2014年公务员退休工资改革方案
2014/10/01 职场文书
2014年语文教学工作总结
2014/12/17 职场文书
同乡会致辞
2015/07/30 职场文书
nginx location优先级的深入讲解
2021/03/31 Servers