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 让图片在 div或dl里 居中,底部对齐
Jan 21 Javascript
js nextSibling属性和previousSibling属性概述及使用注意
Feb 16 Javascript
用JavaScript实现动画效果的方法
Jul 20 Javascript
JS实现多物体缓冲运动实例代码
Nov 29 Javascript
jQuery删除节点的三个方法即remove()detach()和empty()
Dec 27 Javascript
HTML5实现留言和回复页面样式
Jul 22 Javascript
angularjs自定义ng-model标签的属性
Jan 21 Javascript
一次围绕setTimeout的前端面试经验分享
Jun 15 Javascript
浅谈使用mpvue开发小程序需要注意和了解的知识点
May 23 Javascript
vue两个组件间值的传递或修改方式
Jul 04 Javascript
微信小程序自定义带价格显示日历效果
Dec 29 Javascript
jquery树形插件zTree高级使用详解
Aug 16 jQuery
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 和 XML: 使用expat函数(三)
2006/10/09 PHP
一些关于PHP的知识
2006/11/17 PHP
hadoop常见错误以及处理方法详解
2013/06/19 PHP
Javascript学习笔记2 函数
2010/01/11 Javascript
Jquery中显示隐藏的实现代码分析
2011/07/26 Javascript
仿中关村在线首页弹出式广告插件(jQuery版)
2012/05/03 Javascript
javascript获取checkbox复选框获取选中的选项
2014/08/12 Javascript
使用jQuery.wechat构建微信WEB应用
2014/10/09 Javascript
jQuery实现点击小图片淡入淡出显示大图片特效
2015/09/09 Javascript
使用jQuery判断Div是否在可视区域的方法 判断div是否可见
2016/02/17 Javascript
基于jQuery实现仿51job城市选择功能实例代码
2016/03/02 Javascript
jQueryUI中的datepicker使用方法详解
2016/05/25 Javascript
原生js实现class的添加和删除简单代码
2016/07/12 Javascript
微信小程序开发之相册选择和拍照详解及实例代码
2017/02/22 Javascript
js实现轮播图的两种方式(构造函数、面向对象)
2017/09/30 Javascript
Vue集成Iframe页面的方法示例
2017/12/12 Javascript
基于js实现复制内容到操作系统粘贴板过程解析
2019/10/11 Javascript
在Python的Django框架中创建和使用模版
2015/07/15 Python
Python3 中文文件读写方法
2018/01/23 Python
Python使用pandas处理CSV文件的实例讲解
2018/06/22 Python
python如何制作缩略图
2019/04/30 Python
Pycharm 字体大小调整设置的方法实现
2019/09/27 Python
完美解决pycharm 不显示代码提示问题
2020/06/02 Python
详解python爬取弹幕与数据分析
2020/11/14 Python
pandas数据分组groupby()和统计函数agg()的使用
2021/03/04 Python
CSS3教程:background-clip和background-origin
2008/10/17 HTML / CSS
HTML5制作3D爱心动画教程 献给女友浪漫的礼物
2014/11/05 HTML / CSS
葡萄牙航空官方网站:TAP Air Portugal
2019/10/31 全球购物
法人代表证明书格式
2014/10/01 职场文书
批评与自我批评发言稿
2014/10/15 职场文书
2014年城管工作总结
2014/11/20 职场文书
老公保证书怎么写
2015/02/26 职场文书
客服专员岗位职责范本
2015/04/07 职场文书
教师教育教学随笔
2015/08/15 职场文书
六五普法心得体会2016
2016/01/21 职场文书
Python机器学习应用之基于线性判别模型的分类篇详解
2022/01/18 Python