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判断变量是否空值的代码
Oct 26 Javascript
浏览器加载、渲染和解析过程黑箱简析
Nov 29 Javascript
详解AngularJS中的作用域
Jun 17 Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
Jan 22 Javascript
jQuery的框架介绍
May 11 Javascript
jquery插件autocomplete用法示例
Jul 01 Javascript
bootstrap多种样式进度条展示
Dec 20 Javascript
在Vue中使用echarts的方法
Feb 05 Javascript
vue+axios 前端实现的常用拦截的代码示例
Aug 23 Javascript
Vue利用History记录上一页面的数据方法实例
Nov 02 Javascript
微信小程序代码上传、审核发布小程序
May 18 Javascript
vue axios post发送复杂对象问题
Jun 04 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
JAVA/JSP学习系列之二
2006/10/09 PHP
php中的PHP_EOL换行符详细解析
2013/10/26 PHP
php简单判断文本编码的方法
2015/07/30 PHP
PHP上传文件参考配置大文件上传
2015/12/16 PHP
ThinkPHP5+UEditor图片上传到阿里云对象存储OSS功能示例
2019/08/05 PHP
php文件后缀不强制为.php的实操方法
2019/09/18 PHP
php获取小程序码的实现代码(B类接口)
2020/06/13 PHP
7个Javascript地图脚本整理
2009/10/20 Javascript
IE8对JS通过属性和数组遍历解析不一样的地方探讨
2013/05/06 Javascript
多个checkbox被选中时如何判断是否有自己想要的
2014/09/22 Javascript
transport.js和jquery冲突问题的解决方法
2015/02/10 Javascript
详解vue-cli中的ESlint配置文件eslintrc.js
2017/09/25 Javascript
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
2019/09/06 Javascript
Layui 解决表格异步调用后台分页的问题
2019/10/26 Javascript
[04:42]2015国际邀请赛CDEC战队晋级之路
2015/08/13 DOTA
[02:51]2018年度DOTA2最佳中单位选手-完美盛典
2018/12/17 DOTA
[48:24]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第一场 12.09
2020/12/12 DOTA
浅析python 中__name__ = '__main__' 的作用
2014/07/05 Python
Python运用于数据分析的简单教程
2015/03/27 Python
Python3读取文件常用方法实例分析
2015/05/22 Python
python在windows下创建隐藏窗口子进程的方法
2015/06/04 Python
ubuntu安装mysql pycharm sublime
2018/02/20 Python
python随机取list中的元素方法
2018/04/08 Python
Django 内置权限扩展案例详解
2019/03/04 Python
详解python环境安装selenium和手动下载安装selenium的方法
2020/03/17 Python
英国玛莎百货新西兰:Marks & Spencer New Zealand
2019/07/21 全球购物
医药工作者的求职信范文
2013/09/21 职场文书
幼儿教师培训感言
2014/03/08 职场文书
工程力学专业自荐信范文
2014/03/17 职场文书
党员干部一句话承诺
2014/05/30 职场文书
教师专业自荐信
2014/05/31 职场文书
群众路线调研报告范文
2014/11/03 职场文书
2014年外联部工作总结
2014/11/17 职场文书
2014年物业公司工作总结
2014/11/22 职场文书
2014年环境卫生工作总结
2014/11/24 职场文书
CSS filter 有什么神奇用途
2021/05/25 HTML / CSS