利用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. sklearn、theano、TensorFlow 以及 theras 的理解

    sklearn ⇒ 机器学习算法和模型: theras theano TensorFlow 1. 理解模型以及函数,参数返回值的实际意义 一定要注意模型的构造函数,接收的参数列表,以及该模型本身所要解 ...

  2. Linux性能测试 iostat命令

    Linux系统出现了性能问题,一般我们可以通过top.iostat.free.vmstat等命令 来查看初步定位问题.其中iostat可以给我们提供丰富的IO状态数据.iostat 由 Red Hat ...

  3. wpf版权限管理

    之前做的权限管理是基于Mvc的Web项目,模型.仓储及业务层次分明,6月中旬开始使用这套之前完成的底层架构开发Wpf版本的权限管理软件(后续将成熟企管系统进行抽象业务加入到该版本中,向企管系统靠近) ...

  4. （转）总结：JavaScript异步、事件循环与消息队列、微任务与宏任务

    前言 Philip Roberts 在演讲 great talk at JSConf on the event loop 中说:要是用一句话来形容 JavaScript,我可能会这样: “JavaSc ...

  5. jquery li练习2-恢复链条

    <!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  6. C++中类的继承与Java中的不同，C++的派生类不能继承父类的构造函数和析构函数（不一定正确）

    http://blog.csdn.net/guodongxiaren/article/details/24885023

  7. PHP获得指定日期所在月的第一天和最后一天

    function getdays($day){ $firstday = date('Y-m-01',strtotime($day)); $lastday = date('Y-m-d',strtotim ...

  8. 备份一个个人用的WPF万能转换器

    public class CommonCoverter : IValueConverter { /// 转换器参数语法: key1,value1 key2,value2 ... [other,defu ...

  9. 图像滤镜艺术--PS平均(滤镜-模糊-平均)效果

    原文:图像滤镜艺术--PS平均(滤镜-模糊-平均)效果 本文介绍PS中滤镜-模糊-平均模糊的效果实现: 这个效果很简单,原理如下: 1,统计全图像素的R,G,B值得和sumR,sumG,sumB; 2 ...

  10. Medical Image Report论文合辑

    Learning to Read Chest X-Rays:Recurrent Neural Cascade Model for Automated Image Annotation (CVPR 20 ...