使用html+css+js实现倒计时，开启你痛苦的倒计时吧

效果图：

这是我痛苦的倒计时，呜呜呜

好啦，再痛苦还是要分享代码，代码如下，复制即可使用：

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <title>倒计时</title>
  7.         <style>
  8.             #time {
  9.                 width: 350px;
  10.                 height: 200px;
  11.                 margin: 100px auto;
  12.             }
  13.  
  14.             #time input {
  15.                 margin: 20px auto;
  16.                 text-align: center;
  17.                 border-radius: 10px;
  18.             }
  19.  
  20.             input::-webkit-outer-spin-button,
  21.             input::-webkit-inner-spin-button {
  22.                 -webkit-appearance: none;
  23.             }
  24.  
  25.             button {
  26.                 margin: 0 0 0 35px;
  27.                 border-radius: 10px;
  28.             }
  29.  
  30.             #start {
  31.                 font-size: 1.55em;
  32.             }
  33.         </style>
  34.         <script>
  35.             function $(el) {
  36.                 if(typeof(el) == 'string') {
  37.                     return(document.getElementById(el));
  38.                 }
  39.                 return(el);
  40.             }
  41.  
  42.             function fillZero(num, digit) {
  43.                 var str = '' + num;
  44.                 if(str.length < digit) {
  45.                     str = '0' + str;
  46.                 }
  47.                 return str;
  48.             }
  49.             window.onload = function() {
  50.                 var oDiv1 = $('time');
  51.                 var aInput = oDiv1.getElementsByTagName('input');
  52.                 var oYear = aInput[0]; //年
  53.                 var oMonth = aInput[1]; //月
  54.                 var oDay = aInput[2] //日
  55.                 var oDiv2 = $('start');
  56.                 var aSpan = oDiv2.getElementsByTagName('span');
  57.                 var sTxtDay = aSpan[0]; //天
  58.                 var sTxtHour = aSpan[1] //小时
  59.                 var sTxtMin = aSpan[2] //分
  60.                 var sTxtSec = aSpan[3] //秒
  61.                 var oTxtTarget = document.getElementsByTagName('b')[0];
  62.                 var timer = null;
  63.                 $('btn1').onclick = function() {
  64.                     timer = setInterval(updateTime, 1000);
  65.                     updateTime();
  66.                 }
  67.                 $('btn2').onclick = function() {
  68.                     clearInterval(timer);
  69.                 }
  70.  
  71.                 function updateTime() {
  72.  
  73.                     var sYear = Math.abs(oYear.value);
  74.                     var sMonth = Math.abs(oMonth.value);
  75.                     var sDay = Math.abs(oDay.value);
  76.                     if(sMonth > 12 || sDay > 31){
  77.                         clearInterval(timer);
  78.                         alert('你又调皮了');
  79.                         return;
  80.                     }
  81.                     oTxtTarget.innerHTML = sYear + ' 年 ' + sMonth + ' 月 ' + sDay + ' 日 ';
  82.                     var oEndDate = new Date(sYear, (sMonth - 1), sDay);
  83.                     var oNowDate = new Date();
  84.                     var iRemain = 0;
  85.                     iRemain = parseInt((oEndDate.getTime() - oNowDate.getTime()) / 1000);
  86.                     if(iRemain <= 0) { //判断开始时间是否小于或等于今天
  87.                         clearInterval(timer);
  88.                         iRemain = 0;
  89.                         alert('请输入大于今天的时间');
  90.                     }
  91.                     var iDay = parseInt(iRemain / 86400); //剩余天数
  92.  
  93.                     iRemain %= 86400;
  94.                     var iHour = parseInt(iRemain / 3600); //剩余小时
  95.  
  96.                     iRemain %= 3600;
  97.                     var iMin = parseInt(iRemain / 60); //剩余分钟
  98.  
  99.                     iRemain %= 60;
  100.                     var iSec = iRemain; //剩余秒
  101.  
  102.                     sTxtDay.innerHTML = fillZero(iDay, 2);
  103.                     sTxtHour.innerHTML = fillZero(iHour, 2);
  104.                     sTxtMin.innerHTML = fillZero(iMin, 2);
  105.                     sTxtSec.innerHTML = fillZero(iSec, 2);
  106.                 }
  107.  
  108.             }
  109.         </script>
  110.     </head>
  111.  
  112.     <body>
  113.         <div id="time">
  114.             年: <input type="number" min="2017" max="2017" value="2017" />
  115.             月: <input type="number" min="1" max="12" value="1" />
  116.             日: <input type="number" min="1" max="31" value="27" />
  117.             <p><button id="btn1">开始倒计时</button><button id="btn2">停止倒计时</button></p>
  118.             <p>现在距离:<b>2017 年 1 月 27 日</b> 还剩 </p>
  119.             <div id="start">
  120.                 <span>00</span>天
  121.                 <span>00</span>小时
  122.                 <span>00</span>分
  123.                 <span>00</span>秒
  124.             </div>
  125.         </div>
  126.     </body>
  127.  
  128. </html>

如果您有更好的方法或更多的功能，可以和大家一起分享哦，如有错误，欢迎联系我改正，非常感谢！！！

使用html+css+js实现倒计时，开启你痛苦的倒计时吧的更多相关文章

  1. asp.net mvc项目实记-开启伪静态-Bundle压缩css,js

    百度这些东西,还是会浪费了一些不必要的时间,记录记录以备后续 一.开启伪静态 如果不在web.config中配置管道开关则伪静态无效 首先在RouteConfig.cs中中注册路由 routes.Ma ...

  2. 使用html+css+js实现日历与定时器，看看今天的日期和今天剩余的时间。

    使用html+css+js实现日历与定时器,看看今天的日期和今天剩余的时间. 效果图: 哎,今天就又这么过去了,过的可真快 . 代码如下,复制即可使用: <!DOCTYPE html> & ...

  3. 使用html+css+js实现计算器

    使用html+css+js实现计算器,开启你的计算之旅吧 效果图: 代码如下,复制即可使用: <!DOCTYPE html><html lang="en"> ...

  4. 前端工程师面试问题归纳（一、问答类html/css/js基础）

    一.参考资源 1.前端面试题及答案整理(一) 2.2017年前端面试题整理汇总100题 3.2018最新Web前端经典面试试题及答案 4.[javascript常见面试题]常见前端面试题及答案 5.W ...

  5. CSS & JS 制作滚动幻灯片

    ==================纯CSS方式==================== <!DOCTYPE html> <html> <head> <met ...

  6. 【转】Maven Jetty 插件的问题（css/js等目录死锁）的解决

    Maven Jetty 插件的问题(css/js等目录死锁,不能自动刷新)的解决:   1. 打开下面的目录:C:\Users\用户名\.m2\repository\org\eclipse\jetty ...

  7. Css Js Loader For Zencart

    Css Js Loader 描述:这个插件很早就出来了,可能知道人非常少 这个插件的功能是整合所有的网站的CSS和JS内容到一个文件里边. 因为CSS和JS文件到了一个文件,加快了程序的运行 在配合其 ...

  8. 购物车数字加减按钮HTML+CSS+JS（有需要嫌麻烦的小伙伴拿走不谢）

    之前在写详情页的时候,如下图 因为自己嫌麻烦,就去看其他网站是怎么写的,想直接拿来用,后来看来看去觉得写得很麻烦,于是最后还是决定自己写,附上HTML+CSS+JS代码,一条龙一站式贴心服务2333 ...

  9. vs合并压缩css,js插件——Bundler & Minifier

    之前做了一个大转盘的抽奖活动,因为比较火,部分用户反馈看不到页面的情况,我怀疑js加载请求过慢导致,所以今天针对之前的一个页面进行调试优化. 首先想到的是对页面的js和css进行压缩优化,百度了下vs ...

随机推荐

  1. Android获取长按按键响应

    Android获取长按按键响应http://www.2cto.com/kf/201312/261719.html Android下Listview的onItemClick以及onItemLongCli ...

  2. 使用 mysql-proxy 监听 mysql 查询

    什么是 mysql-proxy? mysql-proxy是mysql官方提供的mysql中间件服务,上游可接入若干个mysql-client,后端可连接若干个mysql-server. 它使用mysq ...

  3. BZOJ-3509 母函数+分块+暴力+FFT

    题目描述 给定一个长度为N的数组A[],求有多少对i, j, k(1<=i<j<k<=N)满足A[k]-A[j]=A[j]-A[i]. 输入格式 第一行一个整数N(N<= ...

  4. 第一天：简单工厂模式与UML类图

    何为简单工厂模式:     通过专门定义一个类,来负责创建其他类的实例,这些其它类通常具有共同的父类.   简单工厂模式的UML类图:       简单工厂模式中包含的角色和相应的职责如下:     ...

  5. Linux下安装Python3和django并配置mysql作为django默认服务器

    我的操作系统为centos6.5 1  首先选择django要使用什么数据库.django1.10默认数据库为sqlite3,本人想使用mysql数据库,但为了测试方便顺便要安装一下sqlite开发包 ...

  6. spring cloud 配置中心

    1. spring cloud配置中心server 1.1 创建git仓库 首先在github上搭建一个存储配置中心的仓库,需要创建两个分支,一个是master,一个是dev分支.自己学习可以用公开库 ...

  7. 关于构造IOCTL命令的学习心得

    在编写ioctl代码之前,需要选择对应不同命令的编号.为了防止对错误的设备使用正确的命令,命令号应该在系统范围内唯一,这种错误匹配并不是不会发生,程序可能发现自己正在试图对FIFO和audio等这类非 ...

  8. python 操作excel格式化及outlook正文，发送邮件

    import requests import time import os import arrow import pandas as pd import pandas.io.formats.exce ...

  9. querySelectorAll 方法和 getElementsBy 系列方法的区别

    本文是我在知乎上的一个回答:http://www.zhihu.com/question/24702250/answer/28695133 ————— 下面是正文 ————— 1. W3C 标准quer ...

  10. HDU 1535 Invitation Cards (最短路)

    题目链接 Problem Description In the age of television, not many people attend theater performances. Anti ...