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中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
May 16 Javascript
js实现一个链接打开两个链接地址的方法
May 12 Javascript
javascript中JSON对象与JSON字符串相互转换实例
Jul 11 Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
Jul 28 Javascript
基于js对象,操作属性、方法详解
Aug 11 Javascript
初识简单却不失优雅的Vue.js
Sep 12 Javascript
js 博客内容进度插件详解
Feb 19 Javascript
React Native 集成jpush-react-native的示例代码
Aug 16 Javascript
angularJs在多个控制器中共享服务数据的方法
Sep 30 Javascript
Vue项目引进ElementUI组件的方法
Nov 11 Javascript
JS获取当前时间的实例代码(昨天、今天、明天)
Nov 13 Javascript
Vue CLI中模式与环境变量的深入详解
May 30 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
PHP获取数组长度或某个值出现次数的方法
2015/02/11 PHP
PHP、Java des加密解密实例
2015/04/27 PHP
PHP中检索字符串的方法分析【strstr与substr_count方法】
2017/02/17 PHP
ecshop添加菜单及权限分配问题
2017/11/21 PHP
javascript脚本编程解决考试分数统计问题
2008/10/18 Javascript
jQuery 事件队列调整方法
2009/09/18 Javascript
基于jquery的回到页面顶部按钮
2011/06/27 Javascript
屏蔽网页右键复制和ctrl+c复制的js代码
2013/01/04 Javascript
利用JavaScript实现新闻滚动效果(实例代码)
2013/11/27 Javascript
jquery使用淘宝接口跨域查询手机号码归属地实例
2013/11/28 Javascript
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
2016/10/31 Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
2017/05/17 Javascript
AngularJS解决ng-if中的ng-model值无效的问题
2017/06/21 Javascript
微信小程序中使用Promise进行异步流程处理的实例详解
2017/08/17 Javascript
关于redux-saga中take使用方法详解
2018/02/27 Javascript
vue回到顶部监听滚动事件详解
2019/08/02 Javascript
layui(1.0.9)文件上传upload,前后端的实例代码
2019/09/26 Javascript
js实现九宫格抽奖
2020/03/19 Javascript
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
2020/08/13 Javascript
[56:29]Secret vs Optic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python cookbook(数据结构与算法)将序列分解为单独变量的方法
2018/02/13 Python
python使用Pycharm创建一个Django项目
2018/03/05 Python
解决pycharm安装后代码区不能编辑的问题
2018/10/28 Python
学Python 3的理由和必要性
2019/11/19 Python
南威尔士家居商店:Leekes
2016/10/25 全球购物
爱奇艺VIP会员:大剧抢先看
2018/07/11 全球购物
La Senza官网:北美顶尖性感内衣品牌
2018/08/03 全球购物
社会学专业学生职业规划书
2014/02/07 职场文书
逃课上网检讨书
2014/02/20 职场文书
学生会部长竞聘书
2014/03/31 职场文书
2014年教师节寄语
2014/04/03 职场文书
幸福中国演讲稿
2014/09/12 职场文书
公积金具结保证书
2015/05/11 职场文书
2015年乡镇安全生产工作总结
2015/05/19 职场文书
2019初中学生入团申请书
2019/06/27 职场文书
python常见的占位符总结及用法
2021/07/02 Python