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使用Array.prototype.sort()对数组对象排序的方法
Jan 28 Javascript
文字垂直滚动之javascript代码
Jul 29 Javascript
jQuery+HTML5美女瀑布流布局实现方法
Sep 21 Javascript
ionic实现可滑动的tab选项卡切换效果
Apr 15 Javascript
Vue.js 递归组件实现树形菜单(实例分享)
Dec 21 Javascript
AngularJS中$http的交互问题
Mar 29 Javascript
JS排序算法之希尔排序与快速排序实现方法
Dec 12 Javascript
layui 给数据表格加序号的方法
Aug 20 Javascript
对vue中v-on绑定自定事件的实例讲解
Sep 06 Javascript
详解在HTTPS 项目中使用百度地图 API
Apr 26 Javascript
js将URL网址转为16进制加密与解密函数
Mar 04 Javascript
vue实现分页的三种效果
Jun 23 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
VOLVO车载收音机
2021/03/02 无线电
关于php操作mysql执行数据库查询的一些常用操作汇总
2013/06/24 PHP
PHP两种去掉数组重复值的方法比较
2014/06/19 PHP
JavaScript 学习笔记一些小技巧
2010/03/28 Javascript
js网页中的(运行代码)功能实现思路
2013/02/04 Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
2015/04/12 Javascript
javascript日期操作详解(脚本之家整理)
2015/09/05 Javascript
探索angularjs+requirejs全面实现按需加载的套路
2016/02/26 Javascript
React.js入门学习第一篇
2016/03/30 Javascript
js导出excel文件的简洁方法(推荐)
2016/11/02 Javascript
Vue.JS入门教程之列表渲染
2016/12/01 Javascript
Javascript 实现计算器时间功能详解及实例(二)
2017/01/08 Javascript
详解vue-router 2.0 常用基础知识点之router-link
2017/05/10 Javascript
深究AngularJS如何获取input的焦点(自定义指令)
2017/06/12 Javascript
10个最优秀的Node.js MVC框架
2017/08/24 Javascript
利用jquery和BootStrap实现动态滚动条效果
2018/12/03 jQuery
使用vuepress搭建静态博客的示例代码
2019/02/14 Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
2019/09/05 Javascript
python开发之str.format()用法实例分析
2016/02/22 Python
pyQT5 实现窗体之间传值的示例
2019/06/20 Python
Python上下文管理器全实例详解
2019/11/12 Python
python json.dumps() json.dump()的区别详解
2020/07/14 Python
Python 读取位于包中的数据文件
2020/08/07 Python
CSS3实现背景透明文字不透明的示例代码
2018/06/25 HTML / CSS
Vans澳大利亚官网:购买鞋子、服装及配件
2019/09/05 全球购物
俄罗斯三星品牌商店:Samsungstore
2020/04/05 全球购物
类的核心特性有哪些
2014/01/01 面试题
文明家庭先进事迹材
2014/01/27 职场文书
超市促销活动方案
2014/03/05 职场文书
质量保证书范本
2014/04/29 职场文书
2014年应急管理工作总结
2014/11/26 职场文书
2014年仓库保管员工作总结
2014/12/03 职场文书
求职信内容一般写什么?
2015/03/20 职场文书
员工手册编写范本
2015/05/14 职场文书
初级职称评定工作总结
2015/08/13 职场文书
Nginx tp3.2.3 404问题解决方案
2021/03/31 Servers