<!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. [转]Android解析json数据

    1.json格式 2.json解析 3.gson解析 4.fastjson解析 一.Json格式 json一种轻量级的数据交换格式.在网络上传输交换数据一般用xml, json. 两种结构: 1)对象 ...

  2. Linux安装 NTFS 支持

    my system kernel Version is 2.6.18-128.el5 在这个地址下载了 kernel-module-ntfs-2.6.18-128.el5-2.1.27-0.rr.10 ...

  3. 【转载】#402 - Value Equality vs. Reference Equality

    When we normally think of "equality",we're thinking of value equality - the idea that the ...

  4. CentOS 5.6怎么安装MongoDB数据库？

    1. 下载Linux版本的 MongoDB 数据库 到官方的下载页面下载mongodb的Linux版本,32位还是64位根据自己的情况自行选择 http://www.mongodb.org/downl ...

  5. mac jdk profile 永久的配置

    配置java_home 在MAC中设置JAVA_HOME环境变量 环境变量要再etc目录下的profile文件中配置,这样才是永久的配置. cd /etc vi profile 按 i 键进入写模式 ...

  6. System.TimeDate

    本篇将介绍时间类型. msdn官网:点击查看 时间辅助类:点击查看  方法:计算两个时间的时间差(年月日小时分钟),获取时间戳,时间格式转换,获取时间随机码 定义:表示时间上的一刻,通常以日期和当天的 ...

  7. 打包时ElementUI使vendor.js文件体量过大优化方法

    <h1> 1.在index.html中以CDN的方式引入 </h1> <p> 引入的时候注意:要先在引入之前引入VUE否则会报undedined prototype ...

  8. 1、React-Native的基础入门

    React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架,是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物,目前支持iOS和安 ...

  9. Easyui下的点击回车键跳转到下个控件

    在Easyui框架下,JavaScript 中的 onKeyDown事件居然失效了.所以使用了另外的函数去实现点击回车键跳转到下个控件. /** * 点击回车键跳转到下个控件; * @param ol ...

  10. Tomcat的部署+第一个Servlet

    Tomcat部署 1.下载tomcat,添加到eclipse 2.配置环境变量(path) 3.win+r,输入Startup(如果没用,就管理员启动命令) 或者找到tomcat安装包,在bin目录找 ...