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插件 easyUI属性汇总
Jan 19 Javascript
SOSO地图JS画出标注和中心点以html形式运行
Aug 09 Javascript
B/S模式项目中常用的javascript汇总
Dec 17 Javascript
jquery实现搜索框常见效果的方法
Jan 22 Javascript
初识Javascript小结
Jul 16 Javascript
jQuery实现的网页换肤效果示例
Sep 20 Javascript
Node.js如何响应Ajax的POST请求并且保存为JSON文件详解
Mar 10 Javascript
JavaScript中的遍历详解(多种遍历)
Apr 07 Javascript
bootstrap-table组合表头的实现方法
Sep 07 Javascript
Layui带搜索的下拉框的使用以及动态数据绑定方法
Sep 28 Javascript
Vue 监听元素前后变化值实例
Jul 29 Javascript
vue开发chrome插件,实现获取界面数据和保存到数据库功能
Dec 01 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,不用COM,生成excel文件
2006/10/09 PHP
简单的过滤字符串中的HTML标记
2006/12/25 PHP
PHP设计模式之代理模式的深入解析
2013/06/13 PHP
PHP5.6.8连接SQL Server 2008 R2数据库常用技巧分析总结
2019/05/06 PHP
tp5.1 框架路由操作-URL生成实例分析
2020/05/26 PHP
[原创]后缀就扩展名为js的文件是什么文件
2007/12/06 Javascript
jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
2016/04/29 Javascript
jquery的ajax提交form表单的两种方法小结(推荐)
2016/05/25 Javascript
基于JS实现checkbox全选功能实例代码
2016/10/31 Javascript
清除浏览器缓存的几种方法总结(必看)
2016/12/09 Javascript
JS瀑布流实现方法实例分析
2016/12/19 Javascript
用node和express连接mysql实现登录注册的实现代码
2017/07/05 Javascript
vue实现验证码输入框组件
2017/12/14 Javascript
javascript显示动态时间的方法汇总
2018/07/06 Javascript
浅谈对于“不用setInterval,用setTimeout”的理解
2019/08/28 Javascript
如何阻止小程序遮罩层下方图层滚动
2019/09/05 Javascript
[01:11]回顾历届DOTA2国际邀请赛中国区预选赛
2017/06/26 DOTA
Python判断直线和矩形是否相交的方法
2015/07/14 Python
python中pandas.DataFrame对行与列求和及添加新行与列示例
2017/03/12 Python
从django的中间件直接返回请求的方法
2018/05/30 Python
Python实现将Excel转换成xml的方法示例
2018/08/25 Python
浅谈python函数调用返回两个或多个变量的方法
2019/01/23 Python
Python学习笔记之列表和成员运算符及列表相关方法详解
2019/08/22 Python
Python3标准库glob文件名模式匹配的问题
2020/03/13 Python
如何从csv文件构建Tensorflow的数据集
2020/09/21 Python
python 高阶函数简单介绍
2021/02/19 Python
伊芙丽官方旗舰店:中国淑女一线品牌
2017/12/01 全球购物
法律进企业活动方案
2014/03/04 职场文书
预备党员公开承诺书
2014/05/28 职场文书
贯彻落实“八项规定”思想汇报
2014/09/13 职场文书
小学生2014国庆节演讲稿:祖国在我心中
2014/09/21 职场文书
公司感谢信范文
2015/01/22 职场文书
幼儿园开学通知
2015/04/24 职场文书
村官2015年度工作总结
2015/10/14 职场文书
详解PHP Swoole与TCP三次握手
2021/05/27 PHP
一小时迅速入门Mybatis之bind与多数据源支持 Java API
2021/09/15 Javascript