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

jquery实现倒计时功能的更多相关文章

  1. jQ效果：jQuery之插件开发短信发送倒计时功能

    实现的主要功能如下: 1.点击按钮的时候,可以进行倒计时,倒计时自定义. 2.当接收短信失败后,倒计时停止,可点击重新发送短信. 3.点击的元素支持一般标签和input标签. html代码: < ...

  2. jQuery实现倒计时重新发送短信验证码功能示例

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. 微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能

    微信小程序+WEB使用JS实现注册[60s]倒计时功能开发步骤: 1.wxml页面代码: <text>绑定手机</text> <form bindsubmit=" ...

  4. js之验证码倒计时功能

    <!DOCTYPE html> <html > <head> <meta http-equiv="Content-Type" conten ...

  5. html5 canvas 实现倒计时 功能

    function showTime(a) { var b = { id: "showtime", //canvasid x: 60, //中心点坐标 X轴; y: 60, //中心 ...

  6. 模块：js实现一个倒计时功能

    1.给显示内容加样式 <style> #p1{font-size: large; color: red;} </style> 2.客户端页面 <div id=" ...

  7. 基于jQuery带备忘录功能的日期选择器

    今天给大家分享一款基于jQuery带备忘录功能的日期选择器.这款日期控制带有备记忘录功能.有备忘录的日期有一个圆圈,单击圆圈显示备忘录.该实例适用浏览器:360.FireFox.Chrome.Safa ...

  8. iOS “获取验证码”按钮的倒计时功能

    iOS 的倒计时有多种实现细节,Cocoa Touch 为我们提供了 NSTimer 类和 GCD 的dispatch_source_set_timer方法去更加方便的使用计时器.我们也可以很容易的的 ...

  9. 自己使用Jquery封装各种功能分享

    自己使用Jquery封装各种功能分享: 左右滚动图片 瀑布流 流动显示列表 广告切换 头像切换And广告切换 获取搜索引擎的来源关键字 上面列表中展示的功能都是使用jquery进行封装实现的,希望大家 ...

随机推荐

  1. 【转】python通过文件头判断文件类型

    刚刚看到一个好玩的程序,拉过来.原文地址:https://www.ttlsa.com/python/determine-file-type-by-the-file-header/ 侵权删. ===== ...

  2. jQuery 实现改变图片指定区域的颜色

    javascript本身无法改变图片的颜色,不过我们可以通过一些技巧来实现一样的效果. 1.首先我们要知道图片哪些区域需要改变颜色,这里我们可以用执点地图的方法来弄 例1: <img src=& ...

  3. BZOJ4887:[TJOI2017]可乐(矩阵乘法)

    Description 加里敦星球的人们特别喜欢喝可乐.因而,他们的敌对星球研发出了一个可乐机器人,并且 放在了加里敦星球的1号城市上.这个可乐机器人有三种行为:停在原地,去下一个相邻的 城市,自爆. ...

  4. PHP------关于字符串的处理

    每一种语言对,字符串都是比较重要的,因为字符串牵扯到输出. 尤其是在网页里面,所有的内容输出,都要以字符串的形式展示在页面上.比如,输出换行.输出一段话或者输出一个标签,都是以字符串来输出的:有时用数 ...

  5. HDU 2018 Multi-University Training Contest 3 Problem A. Ascending Rating 【单调队列优化】

    任意门:http://acm.hdu.edu.cn/showproblem.php?pid=6319 Problem A. Ascending Rating Time Limit: 10000/500 ...

  6. Linux学习总结（十四） 文件的打包和压缩

    文件的压缩和打包,在windos下我们很熟悉.rar和.zip文件,这是两种压缩文件,他们支持单个文件和多个文件的压缩.windos下我们不提及打包的概念,虽然多个文件的压缩肯定存在打包过程.打包和压 ...

  7. 【题解】洛谷P2704 [NOI2001] 炮兵阵地（状压DP）

    洛谷P2704:https://www.luogu.org/problemnew/show/P2704 思路 这道题一开始以为是什么基于状压的高端算法 没想到只是一道加了一行状态判断的状压DP而已 与 ...

  8. 【题解】洛谷P1879 [USACO06NOV] Corn Fields（状压DP）

    洛谷P1879:https://www.luogu.org/problemnew/show/P1879 思路 把题目翻译成人话 在n*m的棋盘 每个格子不是0就是1 1表示可以种 0表示不能种 相邻的 ...

  9. java Scanner和异常

    Java Scanner 类 java.util.Scanner 是 Java5 的新特征,我们可以通过 Scanner 类来获取用户的输入. 下面是创建 Scanner 对象的基本语法: Scann ...

  10. LeetCode 中级 - 优势洗牌(870)

    给定两个大小相等的数组 A 和 B,A 相对于 B 的优势可以用满足 A[i] > B[i] 的索引 i 的数目来描述. 返回 A 的任意排列,使其相对于 B 的优势最大化. 示例 2: 输入: ...