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 相关文章推荐
让GoogleCode的SVN下的HTML文件在FireFox下正常显示.
May 25 Javascript
基于JavaScript实现继承机制之原型链(prototype chaining)的详解
May 07 Javascript
JS通过相同的name进行表格求和代码
Aug 18 Javascript
js 将json字符串转换为json对象的方法解析
Nov 13 Javascript
jQuery.form插件的使用及跨域异步上传文件
Apr 27 Javascript
AngularJS基础 ng-srcset 指令简单示例
Aug 03 Javascript
AngularJS入门教程之AngularJS 模板
Aug 18 Javascript
微信小程序(三):网络请求
Jan 13 Javascript
webpack搭建vue 项目的步骤
Dec 27 Javascript
Vue3不支持Filters过滤器的问题
Sep 24 Javascript
微信小程序之高德地图多点路线规划过程示例详解
Jan 18 Javascript
Vue 实现可视化拖拽页面编辑器
Feb 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 日期时间处理函数小结
2009/12/18 PHP
php设计模式 Builder(建造者模式)
2011/06/26 PHP
php单链表实现代码分享
2016/07/04 PHP
PHP实现正则表达式分组捕获操作示例
2018/02/03 PHP
php 命名空间(namespace)原理与用法实例小结
2019/11/13 PHP
检测input每次的输入是否合法遇到汉字输入就有问题
2012/05/23 Javascript
JavaScript模板入门介绍
2012/09/26 Javascript
node.js正则表达式获取网页中所有链接的代码实例
2014/06/03 Javascript
js返回前一页刷新本页重载页面
2014/07/29 Javascript
JS是按值传递还是按引用传递
2015/01/30 Javascript
jquery 插件实现多行文本框[textarea]自动高度
2015/03/04 Javascript
jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法
2015/08/10 Javascript
简介alert()与console.log()的不同
2015/08/26 Javascript
js数组操作方法总结(必看篇)
2016/11/22 Javascript
Angular开发者指南之入门介绍
2017/03/05 Javascript
Vue实现自带的过滤器实例
2017/03/09 Javascript
js鼠标经过tab选项卡时实现切换延迟
2017/03/24 Javascript
Angular使用cli生成自定义文件、组件的方法
2018/09/04 Javascript
vue2.0 + ele的循环表单及验证字段方法
2018/09/18 Javascript
vue中前进刷新、后退缓存用户浏览数据和浏览位置的实例讲解
2018/09/21 Javascript
详解ES6中的 Set Map 数据结构学习总结
2018/11/06 Javascript
浅谈Angular7 项目开发总结
2018/12/19 Javascript
一键搞定python连接mysql驱动有关问题(windows版本)
2016/04/23 Python
使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件及出现问题解决方法
2019/09/06 Python
tensorflow -gpu安装方法(不用自己装cuda,cdnn)
2020/01/20 Python
pycharm 2020 1.1的安装流程
2020/09/29 Python
Ubuntu16安装Python3.9的实现步骤
2020/12/15 Python
Sunglasses Shop丹麦:欧洲第一的太阳镜在线销售网站
2017/10/22 全球购物
美国著名的户外用品品牌:L.L.Bean
2018/01/05 全球购物
八一建军节部队活动方案
2014/02/04 职场文书
歌颂祖国的演讲稿
2014/05/04 职场文书
商业街策划方案
2014/05/31 职场文书
社团活动总结怎么写
2014/06/30 职场文书
2015年维修电工工作总结
2015/04/25 职场文书
中小学生安全教育观后感
2015/06/17 职场文书
《祁黄羊》教学反思
2016/02/20 职场文书