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 相关文章推荐
在浏览器中获取当前执行的脚本文件名的代码
Jul 19 Javascript
jQuery EasyUI API 中文文档 搜索框
Sep 29 Javascript
JS文本框不能输入空格验证方法
Mar 19 Javascript
浅谈javascript实现八大排序
Apr 27 Javascript
JS实现网站菜单拖拽移位效果的方法
Sep 24 Javascript
Node.js Streams文件读写操作详解
Jul 04 Javascript
AngularJS自定义指令详解(有分页插件代码)
Jun 12 Javascript
jQuery列表检索功能实现代码
Jul 17 jQuery
js实现会跳动的日历效果(完整实例)
Oct 18 Javascript
AngularJS实现的省市二级联动功能示例【可对选项实现增删】
Oct 26 Javascript
JS实现的邮箱提示补全效果示例
Jan 30 Javascript
p5.js入门教程之键盘交互
Mar 19 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
解决了Ajax、MySQL 和 Zend Framework 的乱码问题
2009/03/03 PHP
php常量详细解析
2015/10/27 PHP
php正则表达式学习笔记
2015/11/13 PHP
Yii2实现让关联字段支持搜索功能的方法
2016/08/10 PHP
PHP中十六进制颜色与RGB颜色值互转的方法
2019/03/18 PHP
Div Select挡住的解决办法
2008/08/07 Javascript
JavaScript使用过程中需要注意的地方和一些基本语法
2010/08/26 Javascript
jQuery1.6 正式版发布并提供下载
2011/05/05 Javascript
实例分析js和C#中使用正则表达式匹配a标签
2014/11/26 Javascript
node.js中的fs.lstatSync方法使用说明
2014/12/16 Javascript
javascript实现带节日和农历的日历特效
2015/02/01 Javascript
基于JQuery打造无缝滚动新闻步骤详解
2016/03/31 Javascript
原生JS实现九宫格抽奖效果
2017/04/01 Javascript
VueJS组件之间通过props交互及验证的方式
2017/09/04 Javascript
教你用Cordova打包Vue项目的方法
2017/10/17 Javascript
JS实现按钮添加背景音乐示例代码
2017/10/17 Javascript
Angular4实现鼠标悬停3d倾斜效果
2017/10/25 Javascript
基于jQuery解决ios10以上版本缩放问题
2017/11/03 jQuery
基于JavaScript实现抽奖系统
2018/01/16 Javascript
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
2018/06/05 jQuery
解决angular2 获取到的数据无法实时更新的问题
2018/08/31 Javascript
Vue.js 使用v-cloak后仍显示变量的解决方法
2018/11/19 Javascript
layui自定义插件citySelect实现省市区三级联动选择
2019/07/26 Javascript
jquery ajax 请求小技巧实例分析
2019/11/11 jQuery
[51:22]Fnatic vs IG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python里disconnect UDP套接字的方法
2015/04/23 Python
在Python中操作文件之seek()方法的使用教程
2015/05/24 Python
用Python读取几十万行文本数据
2018/12/24 Python
Django实现WebSSH操作物理机或虚拟机的方法
2019/11/06 Python
怎么快速自学python
2020/06/22 Python
PAUL HEWITT手表美国站:德国北部时尚生活配饰品牌,船锚元素
2017/11/18 全球购物
英国街头品牌:Bee Inspired Clothing
2018/02/12 全球购物
学生就业推荐信
2013/11/13 职场文书
班委竞选演讲稿
2014/04/28 职场文书
python xlwt模块的使用解析
2021/04/13 Python
Python 的演示平台支持 WSGI 接口的应用
2022/04/20 Python