<!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. CloudWAN

    类型: 定制服务 软件包: collaboration Enterprise integration integrated industry internet IT service/informati ...

  2. php中的curl_multi的应用（php多进程）

    相信许多人对PHP手册中语焉不详的curl_multi一族的函数头疼不已,它们文档少,给的例子 更是简单的让你无从借鉴,我也曾经找了许多网页,都没见一个完整的应用例子. curl_multi_add_ ...

  3. C4C销售订单行项目价格维护方法

    需求很简单,能够创建销售订单,在行项目里添加产品,带出价格来,同时把总价显示在销售订单抬头区域. 如下图所示: 下面是具体配置. Business Configuration里,点击Sales Ord ...

  4. CodeForces 506D Mr. Kitayuta's Colorful Graph

    brute force ? 其实是平方分解.很容易想到的是每一个颜色建一个图,然后并查集维护一下连通性. 问题在于颜色有O(m)种,每种颜色的图点数都是O(n)的,因此并查集的空间只能重复利用. 但是 ...

  5. 课程设计__C++初步，C++对C的扩充

    小草的C++要结课了,小草终于翻起书来,小草用的老谭的书,有什么不对的就找老谭去吧. ///C++初步 ///C++对C的扩展 #include <iostream> using name ...

  6. [Pytorch] pytorch笔记 <三>

    pytorch笔记 optimizer.zero_grad() 将梯度变为0,用于每个batch最开始,因为梯度在不同batch之间不是累加的,所以必须在每个batch开始的时候初始化累计梯度,重置为 ...

  7. gearman安装实录

    花了5个小时装好了gearman,问题不断,坑爹的服务器yum还坏了,悲催. 服务器系统:centos5.3 64位 gearman版本:1.1.8 安装包(相关依赖)下载 1.gearman安装包 ...

  8. Vuex进阶

    1.插件 下面以一个对state进行持久化存储的插件为例进行介绍: 代码结构: saveInLocal.js export default function (store) { if (localSt ...

  9. 深入理解JVM类加载机制 classloader

    转自https://www.cnblogs.com/ygj0930/p/6536048.html

  10. java基础 java中枚举的应用 抽象方法问题

    package com.swift.meiju; import org.junit.Test; public class Demo{ @Test public void test() { System ...