利用JavaScript（JS）实现一个可输入分钟的倒计时钟功能
本文章为 Tz张无忌 原创文章，转载请注明来源，谢谢合作！

网络各种利用JavaScript做倒计时的Demo对新手很不友好，这里我亲手只做了一个案例，希望能帮助到读者们。

本Demo实现了输入数字可以开启倒计时功能，可以随时暂停、重置倒计时，并且对输入非数字类型其他字符进行了过滤以及提示！

整体思路：

1.利用JS获取一次当前时间，把用户在input输入框的内容，转化为我们所需要的数字

2.然后利用JavaScript的时间戳`get.Time()`,把用户输入的数据+我们第一次获取的时间，然后减去我的第二次获得的时间戳（不断刷新的时间戳），就可以得到我们所需要的倒计时秒数。

3.将我们所需要的信息输出

##效果图如下：

##Demo的代码如下：

详细信息请看Demo中注释，♥本Demo中加入了隐藏小彩蛋♥，如有疑问，可以在评论处留言，会在第一时间进行回复。

<!doctype html>

<html >

<head>

    <meta charset="UTF-8">

    <title>专业的在线倒计时</title>

    <style>

        /*以下为CSS样式设置*/

        /*为了代码简洁使用通配符，实际开发不建议使用*/

        *{

            margin: 0;

            padding: 0;

        }

        body {

            background-image:linear-gradient(to right, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%);

        }

        .ofixed{

            position: fixed;

            width: 30px;

            height: 30px;

            background-color: #00ff0f;

            top: 30%;

            opacity: 0.1;

            border-radius: 14px;

            text-align: center;

            line-height: 30px;

            transition: 1s;

            font-size: 12px;

        }

        .ofixed div{

            display: none;

        }

        .ofixed:hover{

            opacity: 0.8;

            width: 180px;

        }

        .ofixed:hover div{

            display: block;

        }

        .content {

            width: 450px;

            height: 100px;

            margin: 40px auto 0;

            display: flex;

            justify-content: space-between;

        }

        .button_content {

            width: 450px;

            height: 100px;

            margin: 10px auto;

            display: flex;

            justify-content: space-between;

        }

        input{

            width: 80px;

            height: 60px;

            /*border:1px solid blue;*/

            border-radius: 5px;

            border:none;

            opacity: 0.7;

            font-size: 30px;

            color: deepskyblue;

            text-align: center;

        }

        button {

            width: 100px;

            height: 40px;

            font-size: 20px;

            font-weight: bold;

            color: #4caf50;

            border: none;

            border-radius: 6px;

            position: relative;

        }

        button div{

            position: absolute;

            top: 0;

            font: 0;

            width: 0px;

            height: 40px;

            background-color:#2b74e2;

            transition: 0.4s;

            opacity: 0.5;

        }

        button:hover div{

            width: 100px;

        }

        span {

            font-size: 40px;

            position: relative;

            top: 3px;

        }

        #d1 {

            width: 900px;

            height: 300px;

            background-color: blueviolet;

            border-radius: 20px;

            /*text-align: center;*/

            font-weight: bold;

            font-size: 80px;

            line-height: 300px;

            color:black;

            margin: 0 auto ;

            text-align: center;

        }

        #btn3 {

            color: black;

        }

    </style>

</head>

<body>

    <div class="ofixed">

        <div>这是一个隐藏的彩蛋</div>

    </div>

    <div class="content">

        <input type="text" id="newhours" maxlength="2">

        <span>时</span>

        <input type="text" id="newminutes" maxlength="2">

        <span>分</span>

        <input type="text" id="newseconds" maxlength="2">

        <span>秒</span>

    </div>

    <div class="button_content">

        <button id="btn1">开&emsp;始<div></div></button>

        <button id="btn2">暂&emsp;停<div></div></button>

        <button id="btn3">重&emsp;置<div></div></button>

    </div>

    <div id="d1">

    </div>

</body>

    <script>

        // 获取一次当前系统时间

        var current_time =new Date();

        function fn1(){

            // 首先获取input输入框的的内容

            var ohours = document.getElementById("newhours").value;

            var ominutes = document.getElementById("newminutes").value;

            var oseconds = document.getElementById("newseconds").value;

            // input输入的内容是字符串，把它们相加成时间总的秒数

            // 把小时转换成相应的毫秒数

            var ohours_milli = ohours*60*60*1000;

            // 把输入的分钟转换成相应的毫秒数

            var ominutes_millo = ominutes*60*1000;

            // 把输入的转换成相应的毫秒数

            var oseconds_milli = oseconds*1000

            // 累计相加得出用户输入的所有毫秒数

            var add_time = ohours_milli+ominutes_millo+oseconds_milli;

           // 通过计时器循环获得新的系统时间

           var reset_time = new Date();

           // current_time获取的系统时间加上用户输入的时间 减去当前系统时间，得到倒计时的效果

           var time = current_time.getTime() + add_time - reset_time.getTime();

            console.log(time)

           // 通过上面time获取的倒计时毫秒数，分别除以相对数字得到，分、秒以及毫秒

           var  hours =Math.floor(time/1000/60/60%24);

           var minute =Math.floor(time/1000/60%60);

           var seconds = Math.floor(time/1000%60 );

           var milliseconds = Math.floor( time % 60);

           // 获取页面DIv

           var odiv = document.getElementById("d1");

            // 小于10在前面加0

            if(milliseconds<10){

                milliseconds = "0" + milliseconds;

            }

            if(seconds<10){

                seconds = "0" + seconds;

            }

            if(minute<10){

                minute = "0" + minute;

            }

            if(hours<10){

                hours = "0" + hours;

            }

           // 将得到结果输入至页面

           odiv.innerHTML = (hours + "&nbsp;:&nbsp;" + minute +"&nbsp;:&nbsp;" +seconds + "&nbsp;:&nbsp;" +milliseconds);

           // 一些判断条件

           //  输入的小时不能大于24小时，24小时等于86400000毫秒

            if(time > 86400000){

                odiv.innerHTML = ("&hearts;最大小时数为24");

                odiv.style.color = "#ffeb3b";

                clearInterval(set_reset);

            }

           //  当倒计时为0的时候停止计时器

           if( time < 0){

               odiv.innerHTML = ("&hearts;倒计时结束&hearts;");

               odiv.style.color = "red";

               clearInterval(set_reset);

           }

           // 输入非数字提示

            if(isNaN(time)){

                odiv.innerHTML = ("&hearts;请输入正确的数字");

                odiv.style.color = "#ffeb3b";

                clearInterval(set_reset);

            }

            // 未输入时间提示

            if(ohours==""&& ominutes==""&&oseconds==""){

                odiv.innerHTML = ("&hearts;请输入时间,重置再试");

                obtn1.innerHTML = "未输时间";

                obtn2.innerHTML = "未输时间";

                obtn1.disabled =true;

                obtn2.disabled =true;

                odiv.style.color = "#ffeb3b";

                clearInterval(set_reset);

            }

        }

        // 获取按钮

        var obtn1 = document.getElementById("btn1");

        var obtn2 = document.getElementById("btn2");

        var obtn3 = document.getElementById("btn3");

        // 鼠标点击执行

        obtn1.onclick = function () {

            obtn1.innerHTML = "正在执行";

            obtn2.innerHTML = "点击暂停";

            set_reset = setInterval("fn1()",100     );

            console.log(setInterval);

            // 让input的变为只读

            document.getElementById("newhours").disabled="turn";

            document.getElementById("newminutes").disabled="turn";

            document.getElementById("newseconds").disabled="turn";

        }

        obtn2.onclick = function () {

            clearInterval(set_reset);

            obtn1.innerHTML = "点击继续";

            obtn2.innerHTML = "已&ensp;暂&ensp;停"

        }

        obtn3.onclick = function () {

            // 重新加载当前页面

            location.reload()

        }

    </script>

</html>

如有疑问，可以在评论处留言，会在第一时间进行回复。笔芯~

(Demo分享)利用JavaScript（JS）做一个可输入分钟的倒计时钟功能的更多相关文章

  1. (Demo分享)利用JavaScript（JS）实现一个九宫格拖拽功能

    利用JavaScript(JS)实现一个九宫格拖拽功能   Demo实现了对任意方格进行拖拽,可以交换位置,其中Demo-1利用了勾股定理判断距离! Demo-1整体思路: 1.首先div实现自由移动 ...

  2. 利用jquery+iframe做一个ajax上传效果

    以下是自学it网--中级班上课笔记 网址:www.zixue.it html页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict ...

  3. 用 JS 做一个数独游戏（二）

    用 JS 做一个数独游戏(二) 在 上一篇博客 中,我们通过 Node 运行了我们的 JavaScript 代码,在控制台中打印出来生成好的数独终盘.为了让我们的数独游戏能有良好的体验,这篇博客将会为 ...

  4. 用 JS 做一个数独游戏（一）

    用 JS 做一个数独游戏(一) 数独的棋盘由 9x9 的方格组成,每一行的数字包含 1 ~ 9 九个数字,并且每一列包含 1 ~ 9 这 9 个不重复的数字,另外,整个棋盘分为 9 个 3x3 的块, ...

  5. 使用node.js做一个自用的天气插件

    var request = require('request') var url = 'http://www.baidu.com/home/xman/data/superload' var cooki ...

  6. 用JS做一个简单的电商产品放大镜功能

    使用js制作一个简单的产品放大图 购物网站的产品页经常会放有一个产品展示图区.该图区有一个功能就是产品图的放大功能,移动左侧的焦点区域,可以放大细节部分观看,详情如下图.实现该功能的方法也非常简单. ...

  7. 如何使用impress.js做一个网页版本的PPT

    blockquote{font-size: 18px;line-height:1.5;margin:0;}line-height: 1.5; 要做一个网站制作规范培训,之前村长做过一次培训,但是后来一 ...

  8. (Demo分享)利用原生JavaScript-随机数-实现做一个烟花案例

    原生js实现放烟花效果,点击鼠标,然后随机向四周扩散,! 思路: 1.首先烟花是五颜六色的,所以我们先写一个随机颜色的函数: 2.创建一个制造烟花的构造函数,第一个参数为元素,第二参数为初始x轴位置, ...

  9. (Demo分享)利用原生JavaScript-ScrollLeft-实现做轮播广告通知

    轮播广告通知整体思路: 1.首先文字的移动利用了JAVA script 中ScrollLeft的知识点: 2.在设置一条一模一样的新闻,利用无缝轮播图滚动的原理让新闻无缝滚动. 3.使用了自执行匿名函 ...

随机推荐

  1. c语言学习笔记（12）——补码

    补码 编码 在计算机中存储数据的方式 原码 也叫 符号--绝对值码 最高位0表示正 1表示负, 其余二进制位是该数字的绝对值的二进制位 如 5 ---- 00000101   -5 ---- 1111 ...

  2. c语言学习笔记（9）——指针

    指针是c语言的灵魂 ----------------------------------------------------------------------------- # include &l ...

  3. Linux性能测试 vmstat命令

    vmstat命令是最常见的Linux/Unix监控工具,可以展现给定时间间隔的服务器的状态值,包括服务器的CPU使用率,内存使用,虚拟内存交换情况,IO读写情况.这个命令是我查看Linux/Unix最 ...

  4. Proxy Design Pattern 代理设计模式

    代理设计模式.此模式是用于serverclient排序.互联网接入,也经常使用的类代理,我觉得这种感觉很复杂.但是,这种设计模式本身是非常easy的. 是一类调用另一个类的功能.客户调用类,实际工作是 ...

  5. 用 cmake 构建Qt工程(对比qmake进行学习)

    cmake vs qmake qmake 是为 Qt 量身打造的,使用起来非常方便 cmake 使用上不如qmake简单直接,但复杂换来的是强大的功能 内置的 out-of source 构建.(目前 ...

  6. visual studio code 调试 .NET core 1.1.

    一  windows端  使用VsCode编写和调试.NET Core项目 1 .新建sln 解决方案 dotnet new sln -o slnname 2. 新建DLL 3.将DLL添加到sln: ...

  7. Fidder模拟发送请求

    在Fiddler的Composer一栏,可以模拟请求 举例 首先通过浏览器访问页面http://baidu.com/ ,在右侧可以拿到请求情况 在Inspectors一栏可以看到请求和响应结果,复制请 ...

  8. NPM镜像设置方法！

    使用npm安装一些包失败了的看过来(npm国内镜像介绍) 发布于 2012-4-26 04:19 最后一次编辑是 2013-12-11 23:21 这个也是网上搜的,亲自试过,非常好用! 镜像使用方法 ...

  9. VMware Workstation克隆linux虚拟机操作

    1.删除MAC地址,修改IP [root@xuegod63 network-scripts]# vim ifcfg-eth0 [root@xuegod63 network-scripts]# cat ...

  10. Entity States

    Added. The entity does not yet exist in the database. The SaveChanges method must issue an INSERT st ...