<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<script src="jquery.min.js"></script>
<style>
div.box{
width:1200px;
padding:20px;
margin:20px;
border:1px solid #c00;
border-radius: 5px
}
div.box>span{
color:#999;
text-align: center;
font-size: 2em;
}
div.content{
width:1160px;
margin:10px 0;
padding:20px;
border:2px solid #666;
text-align: center;
}
input[type='text']{
width:45px;
height:35px;
padding:5px 10px;margin:5px 0;
border:1px solid #c00;
text-align: center;
border-radius: 5px;
}

</style>
</head>
<body>

<div class="box">
<span>距离2018年元旦还剩：</span><br>
<div class="content">
<input type="text" id="time_d">天<input type="text" id="time_h">时<input type="text" id="time_m">分<input type="text" id="time_s">秒
</div>
</div>

<script>

function show_time(){
var time_start = new Date().getTime(); //设定当前时间
var time_end = new Date("2018/01/01 00:00:00").getTime(); //设定目标时间
// 计算时间差 (毫秒)
var time_distance = time_end - time_start;
// 天
var int_day = Math.floor(time_distance/86400000)
time_distance -= int_day * 86400000;

// 时
var int_hour = Math.floor(time_distance/3600000)
time_distance -= int_hour * 3600000;

// 分
var int_minute = Math.floor(time_distance/60000)
time_distance -= int_minute * 60000;

// 秒
var int_second = Math.floor(time_distance/1000)

// 时分秒为单数时、前面加零
if(int_day < 10){
int_day = "0" + int_day;
}
if(int_hour < 10){
int_hour = "0" + int_hour;
}
if(int_minute < 10){
int_minute = "0" + int_minute;
}
if(int_second < 10){
int_second = "0" + int_second;
}

// 显示时间
$("#time_d").val(int_day);
$("#time_h").val(int_hour);
$("#time_m").val(int_minute);
$("#time_s").val(int_second);
}

setInterval("show_time()",1000);
</script>
</body>
</html>

Javacript实现倒计时的更多相关文章

  1. 微信小程序中利用时间选择器和js无计算实现定时器（将字符串或秒数转换成倒计时）

    转载注明出处 改成了一个单独的js文件,并修改代码增加了通用性,点击这里查看 今天写小程序,有一个需求就是用户选择时间,然后我这边就要开始倒计时. 因为小程序的限制,所以直接选用时间选择器作为选择定时 ...

  2. Android开发案例 – 在AbsListView中使用倒计时

    在App中, 有多种多样的倒计时需求, 比如: 在单View上, 使用倒计时, 如(如图-1) 在ListView(或者GridView)的ItemView上, 使用倒计时(如图-2) 图-1 图-2 ...

  3. JS案例之3——倒计时

    利用简单的数字累加循环模拟倒计时的效果,逻辑比较简单.如果大牛们有更好的办法欢迎补充. 这种效果经常用于在规定的时间做某件事.比如在1分钟之后重新发送验证码等. 案例演示: 源代码如下: <!D ...

  4. js倒计时-倒计输入的时间

    计算指定时间到指定时间之间相差多少天.时.分.秒. 节日.活动.商城常用. 原理: 主要使用到时间戳,也就是从1970 年 1 月 1 日 到指定时间的毫秒数. 1. 求出毫秒差 :当两个时间直接进行 ...

  5. 微信小程序定时器组件（输入时间字符串即可倒计时）

    昨天写了代码,今天发现要重用,干脆就抽出来做个组件得了,顺便还改善了一下代码通用性. 昨天的代码在这里 github下载地址 用法: 引入: var timer = require('../../pl ...

  6. jQuery获取短信验证码+倒计时实现

    jQuery 短信验证码倒计时 <script type="text/javascript" charset="utf-8"> $(function ...

  7. 纯js实现10分钟倒计时

    一个简单实现倒计时的小栗子~ 效果图:简陋的不能再简陋了,捂脸 代码: <!DOCTYPE HTML> <html> <head> <title> 倒计 ...

  8. Android 在线订单倒计时设计

        接到一个需求,用户下单后,商店这边需要显示在线订单列表,订单十分钟内有效.于是需要设计倒计时,显示每个订单剩余处理时间.       倒计时剩余时间: 订单创建时间 + 10分钟  - 系统当 ...

  9. js获取手机验证码倒计时的实现

    方案一 <div class="div user-input"> <input type="number" class="code& ...

随机推荐

  1. IOS NSURLConnection（大文件下载）

    NSURL:请求地址 NSURLRequest:一个NSURLRequest对象就代表一个请求,它包含的信息有 一个NSURL对象 请求方法.请求头.请求体 请求超时 … … NSMutableURL ...

  2. 2017.11.8 面向对象分析与设计（UML）---UML的作用及分类

    用到的工具 startUML 一些界面操作的说明 蓝色框是用来选择形状的,特别是接口的时候 UML有什么用? `` 有很多人认为,UML的主要用途就是软件设计!也有人认为,如果你不是开发人员,是难以理 ...

  3. css3中的 @Keyframes

    一.介绍 keyframes被称为关键帧,其类似于Flash中的关键帧.在CSS3中其主要以“@keyframes”开头,后面跟着是动画名称加上一对花括号“{…}”,括号中是一些不同时间段样式规则. ...

  4. 使用C#的新特性：可空类型

    随着C#语言最新标准的出炉,现在它也提供了对可空类型的支持.这个小变化将会在处理那些包括可选项的数据库记录时非常有用.当然在其他地方,它也是非常有用的. 简单说来,可空数据类型就是包含了所定义的数据类 ...

  5. 15、SpringBoot------整合swagger2

    开发工具:STS 前言: 对外提供一个Api,无论是对开发.测试.维护,都有很大的帮助. 下面我们来实现swagger2. 参考实例:https://blog.csdn.net/weixin_3947 ...

  6. python 生成器与迭代器（yield 用法）

    背景 首先,我不会解释这两个名词,我看过很多遍解释,可还是看不懂,还是直接看使用情景吧. 我们以佩波拉契数列为例,当我们不知道迭代器的情况下,我们写出来的代码可能是这样子的: '''这种方式计算fib ...

  7. 10^9以上素数判定，Miller_Rabin算法

    #include<iostream> #include<cstdio> #include<ctime> #include<string.h> #incl ...

  8. struts2之标签库

    使用Struts2标签的准备工作: 导入Struts2标签库,该标签定义文件位于 struts2-core-2.3.16.3.jar 的 METE-INF下的struts-tag.tld文件. < ...

  9. jquery 改变标签可见状态的几种方式

    第一种: $(selector).show(); //立即显示指定标签 $(selector).hide();//立即隐藏指定标签 第二种: $(selector).fadeIn(ms);//在指定毫 ...

  10. php - 从数据库导出百万级数据(CSV文件)

    将数据库连接信息.查询条件.标题信息替换为真实数据即可使用. <?php set_time_limit(0); ini_set('memory_limit', '128M'); $fileNam ...