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

效果图：

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

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

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>倒计时</title>

        <style>

            #time {

                width: 350px;

                height: 200px;

                margin: 100px auto;

            }

            #time input {

                margin: 20px auto;

                text-align: center;

                border-radius: 10px;

            }

            input::-webkit-outer-spin-button,

            input::-webkit-inner-spin-button {

                -webkit-appearance: none;

            }

            button {

                margin: 0 0 0 35px;

                border-radius: 10px;

            }

            #start {

                font-size: 1.55em;

            }

        </style>

        <script>

            function $(el) {

                if(typeof(el) == 'string') {

                    return(document.getElementById(el));

                }

                return(el);

            }

            function fillZero(num, digit) {

                var str = '' + num;

                if(str.length < digit) {

                    str = '0' + str;

                }

                return str;

            }

            window.onload = function() {

                var oDiv1 = $('time');

                var aInput = oDiv1.getElementsByTagName('input');

                var oYear = aInput[0]; //年

                var oMonth = aInput[1]; //月

                var oDay = aInput[2] //日

                var oDiv2 = $('start');

                var aSpan = oDiv2.getElementsByTagName('span');

                var sTxtDay = aSpan[0]; //天

                var sTxtHour = aSpan[1] //小时

                var sTxtMin = aSpan[2] //分

                var sTxtSec = aSpan[3] //秒

                var oTxtTarget = document.getElementsByTagName('b')[0];

                var timer = null;

                $('btn1').onclick = function() {

                    timer = setInterval(updateTime, 1000);

                    updateTime();

                }

                $('btn2').onclick = function() {

                    clearInterval(timer);

                }

                function updateTime() {

                    var sYear = Math.abs(oYear.value);

                    var sMonth = Math.abs(oMonth.value);

                    var sDay = Math.abs(oDay.value);

                    if(sMonth > 12 || sDay > 31){

                        clearInterval(timer);

                        alert('你又调皮了');

                        return;

                    }

                    oTxtTarget.innerHTML = sYear + ' 年 ' + sMonth + ' 月 ' + sDay + ' 日 ';

                    var oEndDate = new Date(sYear, (sMonth - 1), sDay);

                    var oNowDate = new Date();

                    var iRemain = 0;

                    iRemain = parseInt((oEndDate.getTime() - oNowDate.getTime()) / 1000);

                    if(iRemain <= 0) { //判断开始时间是否小于或等于今天

                        clearInterval(timer);

                        iRemain = 0;

                        alert('请输入大于今天的时间');

                    }

                    var iDay = parseInt(iRemain / 86400); //剩余天数

                    iRemain %= 86400;

                    var iHour = parseInt(iRemain / 3600); //剩余小时

                    iRemain %= 3600;

                    var iMin = parseInt(iRemain / 60); //剩余分钟

                    iRemain %= 60;

                    var iSec = iRemain; //剩余秒

                    sTxtDay.innerHTML = fillZero(iDay, 2);

                    sTxtHour.innerHTML = fillZero(iHour, 2);

                    sTxtMin.innerHTML = fillZero(iMin, 2);

                    sTxtSec.innerHTML = fillZero(iSec, 2);

                }

            }

        </script>

    </head>

    <body>

        <div id="time">

            年: <input type="number" min="2017" max="2017" value="2017" />

            月: <input type="number" min="1" max="12" value="1" />

            日: <input type="number" min="1" max="31" value="27" />

            <p><button id="btn1">开始倒计时</button><button id="btn2">停止倒计时</button></p>

            <p>现在距离:<b>2017 年 1 月 27 日</b> 还剩 </p>

            <div id="start">

                <span>00</span>天

                <span>00</span>小时

                <span>00</span>分

                <span>00</span>秒

            </div>

        </div>

    </body>

</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 studio gradle dependencies 包存放在哪儿？

    在AndroidStudio中的"External Libraries"下有引用的library的列表, 选择某个library右键->"Library Prope ...

  2. 【DP】【P4539】 [SCOI2006]zh_tree

    Description 张老师根据自己工作的需要,设计了一种特殊的二叉搜索树. 他把这种二叉树起名为zh_tree,对于具有n个结点的zh_tree,其中序遍历恰好为(1,2,3,-,n),其中数字1 ...

  3. 音视频处理之FFmpeg封装格式20180510

    一.FFMPEG的封装格式转换器(无编解码) 1.封装格式转换 所谓的封装格式转换,就是在AVI,FLV,MKV,MP4这些格式之间转换(对应.avi,.flv,.mkv,.mp4文件). 需要注意的 ...

  4. pytorch文档阅读（一）

    本章主要针对pytorch0.4.0英文文档的前两节,顺序可能有些不一样: torch torch.Tensor 张量 Tensors Data type CPU tensor GPU tensor ...

  5. P4310 绝世好题

    P4310 绝世好题 题目描述 给定一个长度为n的数列ai,求ai的子序列bi的最长长度,满足bi&bi-1!=0(2<=i<=len). 说明 对于100%的数据,1<=n ...

  6. 开始 Dojo 开发

    原文出处:Joe Lennon 从头开始学习 Dojo,第 1 部分 开始 Dojo 开发 Dojo Toolkit 简介 Dojo 于 2004 年创建,使开发 DHTML 和 JavaScript ...

  7. 怎么在.net里面解析JSON文件？

    我在网上搜了好多的文章,讲了很多的方法.但是无一例外的都看不懂...可能是因为我在这方面是个白痴吧... 所幸的是,我搜到了一个博客,写的很是清晰,比我之前看的大片文章写的好多了,在这里:http:/ ...

  8. [Java] 理解JVM之一：工作机制及基本结构

    一.基本结构 类加载器:在 JVM 启动时或在类运行时需要将类的字节码信息加载到 JVM 内存区域中. 执行引擎:负责执行字节码信息中包含的字节码指令,相当于实际机器上的 CPU. 内存区域:也被称为 ...

  9. location.href跳转测试

    测试代码 <script type="text/javascript"> function ToUrl(x){ location.href=x; } </scri ...

  10. Matlab修改背景颜色

    步骤: 1, 在matlab命令行中运行prefdir, 获取matlab.prf文件所在路径 2, 打开matlab.prf所在路径, 找到matlab.prf文件, 作备份 3, 将以下内容添加到 ...