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 相关文章推荐
开发中可能会用到的jQuery小技巧
Mar 07 Javascript
JS判断变量是否为空判断是否null
Jul 25 Javascript
js/jquery判断浏览器的方法小结
Sep 02 Javascript
javascript控制图片播放的实现代码
Jul 29 Javascript
JS实现完全语义化的网页选项卡效果代码
Sep 15 Javascript
JS弹性运动实现方法分析
Dec 15 Javascript
折叠菜单及选择器的运用
Feb 03 Javascript
TableSort.js表格排序插件使用方法详解
Feb 10 Javascript
vue项目中使用tinymce编辑器的步骤详解
Sep 11 Javascript
使用jQuery动态设置单选框的选中效果
Dec 06 jQuery
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
Apr 24 Javascript
Webpack中SplitChunksPlugin 配置参数详解
Mar 24 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分页显示制作详细讲解
2006/12/05 PHP
让php处理图片变得简单 基于gb库的图片处理类附实例代码下载
2011/05/17 PHP
使用PHP实现二分查找算法代码分享
2011/06/24 PHP
php读取txt文件组成SQL并插入数据库的代码(原创自Zjmainstay)
2012/07/31 PHP
zf框架的校验器使用使用示例(自定义校验器和校验器链)
2014/03/13 PHP
php中magic_quotes_gpc对unserialize的影响分析
2014/12/16 PHP
PHP读取CSV大文件导入数据库的实例
2017/07/24 PHP
PHP编程中的Session阻塞问题与解决方法分析
2017/08/07 PHP
php求斐波那契数的两种实现方式【递归与递推】
2019/09/09 PHP
Javascript hasOwnProperty 方法 &amp; in 关键字
2008/11/26 Javascript
关于jquery.validate1.9.0前台验证的使用介绍
2013/04/26 Javascript
JavaScript获取和设置CheckBox状态的简单方法
2013/07/05 Javascript
使用CSS样式position:fixed水平滚动的方法
2014/02/19 Javascript
jquery实现的导航固定效果
2014/04/28 Javascript
JavaScript字符串对象substr方法入门实例(用于截取字符串)
2014/10/16 Javascript
JavaScript实现同步于本地时间的动态时间显示方法
2015/02/02 Javascript
总结AngularJS开发者最常犯的十个错误
2016/08/31 Javascript
js实现一个可以兼容PC端和移动端的div拖动效果实例
2016/12/09 Javascript
JavaScript之DOM_动力节点Java学院整理
2017/07/03 Javascript
Vue 实现树形视图数据功能
2018/05/07 Javascript
vue里input根据value改变背景色的实例
2018/09/29 Javascript
js中的深浅拷贝问题简析
2019/05/10 Javascript
微信内置浏览器图片查看器的代码实例
2019/10/08 Javascript
JS实现滑动导航效果
2020/01/14 Javascript
jquery实现聊天机器人
2020/02/08 jQuery
Python Tkinter基础控件用法
2014/09/03 Python
python pandas 对时间序列文件处理的实例
2018/06/22 Python
Python 依赖库太多了该如何管理
2019/11/08 Python
Django实现前台上传并显示图片功能
2020/05/29 Python
pycharm sciview的图片另存为操作
2020/06/01 Python
咖啡店自主创业商业计划书
2014/01/22 职场文书
大学生个人自荐信样本
2014/03/02 职场文书
党员个人自我评价
2015/03/03 职场文书
校长师德表现自我评价
2015/03/04 职场文书
工程款催款函
2015/06/24 职场文书
暑期社会实践新闻稿
2015/07/17 职场文书