<!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. 51nod 1366 贫富差距

    题目来源: TopCoder 基准时间限制:1 秒 空间限制:131072 KB 分值: 40 难度:4级算法题 一个国家有N个公民,标记为0,1,2,...,N-1,每个公民有一个存款额.已知每个公 ...

  2. git github添加远程仓库出错 remote origin already exists

    在github上建立了仓库后,执行 git remote add origin https://github.com/zhangsan/sample.git时,提示 remote origin alr ...

  3. 在Markdown中插入不会显示的注释文本

    方法1 <!-- your comment goes here --> 方法2 [//]: <> (This is also a comment.) 原文地址: https:/ ...

  4. org.apache.xmlbeans.XmlException: error: does not close tag

    使用myeclipse的jax自动生成webservice , 或者serviceImpl通过@webservice来实现webservice时, 使用soap UI (我测试使用的版本 5.2.1) ...

  5. 【转】Activity生命周期详解

    三个循环 提供两个关于Activity的生命周期模型图示帮助理解:                                           图1 图2 从图2所示的Activity生命周期 ...

  6. 1006: Hero In Maze

    1006: Hero In Maze 时间限制: 1000 Sec  内存限制: 64 MB提交: 417  解决: 80[提交][状态][讨论版][命题人:外部导入] 题目描述 500年前,Jess ...

  7. android build.prop详解

    # begin build properties开始设置系统性能 # autogenerated by buildinfo.sh{通过设置形成系统信息} ro.build.id=MIUI(版本ID) ...

  8. vim常用操作整理

    一.删除操作 :%s/r//g 删除DOS方式的回车^M :%s= *$== 删除行尾空白 :%s/^(.*)n1/1$/ 删除重复行 :%s/^.pdf/new.pdf/ 只是删除第一个pdf :% ...

  9. 第25章 串行FLASH文件系统FatFs—零死角玩转STM32-F429系列

    第25章     串行FLASH文件系统FatFs 全套200集视频教程和1000页PDF教程请到秉火论坛下载:www.firebbs.cn 野火视频教程优酷观看网址:http://i.youku.c ...

  10. 《JavaScript高级程序设计第三版》——细碎知识痛点整理（第六章）

    面向对象的程序设计 对象是一组没有特定顺序的值6.1.1 属性类型ECMAScript中有两种属性:数据属性和访问器属性.1. 数据属性Configurable 表示能否通过delete删除属性从而重 ...