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 数据缓存data(name, value)详解及实现
Jan 04 Javascript
eval的两组性能测试数据
Aug 17 Javascript
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
Jan 24 Javascript
js函数中onmousedown和onclick的区别和联系探讨
May 19 Javascript
原生js ActiveXObject获取execl里面的值
Nov 01 Javascript
jquery自动补齐功能插件flexselect用法示例
Aug 06 Javascript
JavaScript装饰器函数(Decorator)实例详解
Mar 30 Javascript
Node.js创建HTTP文件服务器的使用示例
May 11 Javascript
ES6箭头函数和扩展实例分析
May 23 Javascript
vue组件实现移动端九宫格转盘抽奖
Oct 16 Javascript
利用JavaScript写一个简单计算器
Nov 27 Javascript
vue中的可拖拽宽度div的实现示例
Apr 08 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下载文件源代码(强制任意文件格式下载)
2014/05/09 PHP
php生成唯一数字id的方法汇总
2015/11/18 PHP
php函数传值的引用传递注意事项分析
2016/06/25 PHP
PHP编程实现计算抽奖概率算法完整实例
2017/08/09 PHP
Google Map API更新实现用户自定义标注坐标
2009/07/29 Javascript
JavaScript 读取元素的CSS信息的代码
2010/02/07 Javascript
jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包
2011/04/06 Javascript
jquery中获取select选中值的代码
2011/06/27 Javascript
网页中返回顶部代码(多种方法)另附注释说明
2013/04/24 Javascript
JavaScript调用浏览器打印功能实例分析
2015/07/17 Javascript
jQuery鼠标事件汇总
2015/08/30 Javascript
Javascript数组中push方法用法分析
2016/10/31 Javascript
浅谈Vue.js
2017/03/02 Javascript
React Native 截屏组件的示例代码
2017/12/06 Javascript
vue的安装及element组件的安装方法
2018/03/09 Javascript
浅谈Vue 数据响应式原理
2018/05/07 Javascript
vue实现设置载入动画和初始化页面动画效果
2019/10/28 Javascript
javascript实现点击星星小游戏
2019/12/24 Javascript
python处理文本文件并生成指定格式的文件
2014/07/31 Python
python中for用来遍历range函数的方法
2018/06/08 Python
Python函数装饰器原理与用法详解
2019/08/16 Python
Django对models里的objects的使用详解
2019/08/17 Python
pytorch:torch.mm()和torch.matmul()的使用
2019/12/27 Python
Django操作session 的方法
2020/03/09 Python
python的pip有什么用
2020/06/17 Python
matplotlib 画动态图以及plt.ion()和plt.ioff()的使用详解
2021/01/05 Python
Mio Skincare法国官网:身体紧致及孕期身体护理
2018/04/04 全球购物
为什么需要版本控制?
2013/08/08 面试题
集体婚礼证婚词
2014/01/13 职场文书
群众路线个人对照检查材料
2014/09/23 职场文书
优秀团支部申报材料
2014/12/26 职场文书
孟佩杰观后感
2015/06/17 职场文书
网络研修心得体会
2016/01/08 职场文书
分享15个Webpack实用的插件!!!
2021/03/31 Javascript
动画《平凡职业成就世界最强》宣布制作OVA
2022/04/01 日漫
vue ant design 封装弹窗表单的使用
2022/06/01 Vue.js