<!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. sharepoint国内网站一览表（转发）

    中国石油化工集团公司http://www.sinopecgroup.com/Pages/index.aspx () 中国南方航空http://group.csair.com/_layouts/grou ...

  2. springboot 修改和设置 banner

    springboot 修改和设置 banner 先上图 修改步骤 1.在src/main/resources下新建一个banner.txt文档 2.通过http://patorjk.com/softw ...

  3. MVC框架的实现

    现在web开发基本都是MVC的架构了,struts.springMvc 等等.其中一个重要的功能就是将客户发起的请求,分发至我们定义的Action里面的方法之中. 闲暇之余,我也做了一个类似于spri ...

  4. Laravel 5.5 官方推荐 Nginx 配置学习

    Laravel 5.5 版本官方放出了 Nginx 服务器的配置,中文文档:服务器配置 Nginx server { listen 80; server_name example.com; root ...

  5. SAP UI5和CRM WebUI的View和Controller是如何绑定的

    UI5 例如我在UI5的界面上画一个按钮,点击之后弹出一个Alert dialog. 在XML view里只定义了controller的名称和事件处理函数的名称.那么按钮被点击之后,controlle ...

  6. S/4HANA和CRM Fiori应用的搜索分页实现

    在我的博客Paging Implementation in S/4HANA for Customer Management 我介绍了S/4HANA for Customer Management里采用 ...

  7. POJ-3009 Curling 2.0---DFS求最短路

    题目链接: https://vjudge.net/problem/POJ-3009 题目大意: 问题:打冰球.冰球可以往上下左右4个方向走,只有当冰球撞到墙时才会停下来,而墙会消失.当冰球紧贴墙时,不 ...

  8. 问题 B: 投简历

    题目描述 小华历经12寒窗苦读,又经历4年大学磨砺,终于毕业了,随着毕业季的到来,找工作也日益紧张起来.由于要面试不同的公司,因此小华需要准备不同的简历.当然最基本的信息是必不可少的,基本信息:姓名. ...

  9. python-类对象以列表切片模式操作

    #类对象以列表切片模式操作 class Person: def __init__(self): self.cache=[] def __setitem__(self, key, value): #修改 ...

  10. HTML5 input date 移动端 IOS 不支持问题

    1.placeholder 问题解决方法 对 input type date 使用 placeholder 的目的是为了让用户更准确的输入日期格式,iOS 上会有 date 不会显示 placehol ...