js倒计时-倒计输入的时间
计算指定时间到指定时间之间相差多少天、时、分、秒。
节日、活动、商城常用。
原理:
主要使用到时间戳,也就是从1970 年 1 月 1 日 到指定时间的毫秒数。
1. 求出毫秒差 :当两个时间直接进行运算时,他们自动返回毫秒值。
2. 换算时间单位: 向下取整,把毫秒转为相应的单位;再把剩下的毫秒取出来转为下一个需要的单位。
时间戳可以用 Date.pare(时间) 或 时间.getTime() 得到。 前者可以用字符串或时间对象,后者只能使用时间对象。
HTML
<!--
Author: XiaoWen
Create a file: 2017-01-03 19:05:26
Last modified: 2017-01-04 14:17:31
Start to work:
Finish the work:
Other information:
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="text">
<input type="text">
<input type="button" value="开始倒计时">
</body>
<script>
//js代码在下面
</script>
</html>
JS
var input = document.getElementsByTagName('input');
var timer=null;
input[2].onclick=function(){
//clearInterval(timer)
timer=setInterval(test,1000);
}
function test(){
var t1=input[0].value//='2017/01/05 13:31';
if(new Date(t1)-new Date()<=0){
clearInterval(timer);
alert('计时完成');
}else{
var d=cd(t1, new Date(), 'd');
var h=cd(t1, new Date(), 'h');
var m=cd(t1, new Date(), 'm');
var s=cd(t1, new Date(), 's');
input[1].value=d+'天'+h+'时'+m+'分'+s+'秒';
}
}
JS倒计时函数
/*
2017-01-04 by xw
获取倒计时 返回值数字
t1 开始时 时间格式
t2 结束时 时间格式
tg 要获取的值 字符串
d 天
h 时
m 分
s 秒
*/
function cd(t1, t2, tg) {
//相差的毫秒数
var ms = Date.parse(t1) - Date.parse(t2);
var minutes = 1000 * 60;
var hours = minutes * 60;
var days = hours * 24;
var years = days * 365;
//求出天数
var d = Math.floor(ms / days);
//求出除开天数,剩余的毫秒数
ms %= days;
var h = Math.floor(ms / hours);
ms %= hours;
var m = Math.floor(ms / minutes);
ms %= minutes;
var s = Math.floor(ms / 1000);
//返回所需值并退出函数
switch(tg){
case 'd' : return d;
case 'h' : return h;
case 'm' : return m;
case 's' : return s;
}
}
js倒计时-倒计输入的时间的更多相关文章
- js 倒计时点击和当前时间
<input id="btn" type="submit" value="确定" disabled="disabled&qu ...
- js 倒计时功能,获取当前时间的年月日,时分秒
一.实现当前时间到指定截止时间的倒计时功能 <html> <head> <title>TEST</title> </head> <bo ...
- 160301、js倒计时,页面上显示时间
js: //倒计时 var countdown=60,t; function settime(){ if (countdown == 0) { $("#validateBtn"). ...
- js倒计时 手机休眠时 时间不进行减少
http://www.111cn.net/wy/js-ajax/94218.htm 手机版网页js倒计时存在的问题与解决的方法 www.111cn.net 更新:2015-09-16 编辑:kp123 ...
- js 倒计时(可自定义时间)
<html> <head> <title>js 倒计时</title> </head> <body> <div> & ...
- JS倒计时 代码
JS倒计时 代码 <div> <span id="KSD">3</span>天 <span id="KSH">1 ...
- [浪风推荐]javascritp中倒计定时器和循环定时器
在javascritp中,有两个关于定时器的专用函数,分别为: 1.倒计定时器:timename=setTimeout(“function();”,delaytime); 2.循环定时器:timena ...
- js倒计时,秒倒计时,天倒计时
按天倒计时 HTML代码1: <Script Language="JavaScript"> <!-- Begin var timedate= new Date(& ...
- JS倒计时(刷新页面不影响)的实现思路
最近在做一个项目,用到了点击按钮实现倒计时,这个用js来实现很简单.但是遇到了一个问题 页面刷新后js重新加载导致 倒计时重新开始,或者直接初始化了 后来通过 cookie 保存来实现了js倒计时,关 ...
随机推荐
- opencv中Mat与IplImage,CVMat类型之间转换
opencv中对图像的处理是最基本的操作,一般的图像类型为IplImage类型,但是当我们对图像进行处理的时候,多数都是对像素矩阵进行处理,所以这三个类型之间的转换会对我们的工作带来便利. Mat类型 ...
- 踩石行动:ViewPager无限轮播的坑
2016-6-19 前言 View轮播效果在app中很常见,一想到左右滑动的效果就很容易想到使用ViewPager来实现.对于像我们常说的banner这样的效果,具备无限滑动的功能是可以用ViewPa ...
- 菜鸟学Struts2——Actions
在对Struts2的工作原理学习之后,对Struts2的Action进行学习.主要对Struts2文档Guides中的Action分支进行学习,如下图: 1.Model Driven(模型驱动) St ...
- 无法向会话状态服务器发出会话状态请求。请确保 ASP.NET State Service (ASP.NET 状态服务)已启动,并且客户端端口与服务器端口相同。如果服务器位于远程计算机上,请检查。。。
异常处理汇总-服 务 器 http://www.cnblogs.com/dunitian/p/4522983.html 无法向会话状态服务器发出会话状态请求.请确保 ASP.NET State Ser ...
- 关于Vue.js 2.0 的 Vuex 2.0,你需要更新的知识库
应用结构 实际上,Vuex 在怎么组织你的代码结构上面没有任何限制,相反,它强制规定了一系列高级的原则: 应用级的状态集中放在 store 中. 改变状态的唯一方式是提交mutations,这是个同步 ...
- RabbitMq应用一
RabbitMq应用一 RabbitMQ的具体概念,百度百科一下,我这里说一下我的理解,如果有少或者不对的地方,欢迎纠正和补充. 一个项目架构,小的时候,一般都是传统的单一网站系统,或者项目,三层架构 ...
- MySQL 数据库双向同步复制
MySQL 复制问题的最后一篇,关于双向同步复制架构设计的一些设计要点与制约. 问题和制约 数据库的双主双写并双向同步场景,主要考虑数据完整性.一致性和避免冲突.对于同一个库,同一张表,同一个记录中的 ...
- linux-linux top 命令各参数详解
简介 top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况,类似于Windows的任务管理器. top显示系统当前的进程和其他状况,是一个动态显示过程,即可以通过用户按 ...
- SpringMvc中初始化参数绑定
初始化参数绑定与类型转换很类似,初始化绑定时,主要是参数类型 ---单日期 在处理器类中配置绑定方法 使用@InitBinder注解 在这里首先注册一个用户编辑器 参数一为目标类型 proper ...
- CYQ.Data V5 分布式缓存Redis应用开发及实现算法原理介绍
前言: 自从CYQ.Data框架出了数据库读写分离.分布式缓存MemCache.自动缓存等大功能之后,就进入了频繁的细节打磨优化阶段. 从以下的更新列表就可以看出来了,3个月更新了100条次功能: 3 ...