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 相关文章推荐
JavaScript多线程的实现方法
May 08 Javascript
去掉gridPanel表头全选框的小例子
Jul 18 Javascript
2014年50个程序员最适用的免费JQuery插件
Dec 15 Javascript
jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
Feb 23 Javascript
AngularJS 路由详解和简单实例
Jul 28 Javascript
JavaScript轮播图简单制作方法
Feb 20 Javascript
微信小程序 密码输入(源码下载)
Jun 27 Javascript
Django与Vue语法的冲突问题完美解决方法
Dec 14 Javascript
javascript实现文件拖拽事件
Mar 29 Javascript
layDate日期控件使用方法详解
Nov 15 Javascript
JavaScript展开操作符(Spread operator)详解
Jul 20 Javascript
如何阻止小程序遮罩层下方图层滚动
Sep 05 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导出oracle库的php代码
2009/04/20 PHP
php中使用exec,system等函数调用系统命令的方法(不建议使用,可导致安全问题)
2012/09/07 PHP
自己写了一个php检测文件编码的函数
2014/04/21 PHP
PHP将Excel导入数据库及数据库数据导出至Excel的方法
2015/06/24 PHP
php上传图片类及用法示例
2016/05/11 PHP
PHP CodeIgniter分页实例及多条件查询解决方案(推荐)
2017/05/20 PHP
laravel5.5安装jwt-auth 生成token令牌的示例
2019/10/24 PHP
基于javascript实现右下角浮动广告效果
2016/01/08 Javascript
简单谈谈json跨域
2016/03/13 Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
2016/05/18 Javascript
jQuery Checkbox 全选 反选的简单实例
2016/11/29 Javascript
JavaScript仿微信打飞机游戏
2020/07/05 Javascript
javascript将url解析为json格式的两种方法
2017/08/18 Javascript
分析javascript中9 个常见错误阻碍你进步
2017/09/18 Javascript
原生JavaScrpit中异步请求Ajax实现方法
2017/11/03 Javascript
vue 微信授权登录解决方案
2018/04/10 Javascript
node实现登录图片验证码的示例代码
2018/04/20 Javascript
jQuery实现ajax回调函数带入参数的方法示例
2018/06/26 jQuery
vue中多路由表头吸顶实现的几种布局方式
2019/04/12 Javascript
Java Web开发过程中登陆模块的验证码的实现方式总结
2016/05/25 Python
详解python脚本自动生成需要文件实例代码
2017/02/04 Python
python文件读写代码实例
2019/10/21 Python
绝对令人的惊叹的CSS3折叠效果(3D效果)整理
2012/12/30 HTML / CSS
HTML5 transform三维立方体实现360无死角三维旋转效果
2014/08/22 HTML / CSS
英国天然宝石首饰购买网站:Gemondo Jewellery
2018/10/23 全球购物
工作决心书
2014/03/11 职场文书
安全生产管理合理化建议书
2014/03/12 职场文书
利群广告词
2014/03/20 职场文书
《桃林那间小木屋》教学反思
2014/05/01 职场文书
家长建议怎么写
2014/05/15 职场文书
电子专业毕业生自荐信
2014/05/25 职场文书
学校搬迁方案
2014/06/15 职场文书
2014年度党员自我评议
2014/09/13 职场文书
体育运动会广播稿
2014/10/05 职场文书
放弃继承权公证书
2015/01/23 职场文书
用人单位的规章制度,怎样制定才是有效的?
2019/07/09 职场文书