利用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. 手把手教你启用Win10的Linux子系统（超详细）

    原文:手把手教你启用Win10的Linux子系统(超详细) 版权声明:转载请保留出处,谢谢! https://blog.csdn.net/zhangdongren/article/details/82 ...

  2. 机器学习: TensorFlow with MLP 笑脸识别

    Tensor Flow 是一个采用数据流图(data flow graphs),用于数值计算的开源软件库.节点(Nodes)在图中表示数学操作,图中的线(edges)则表示在节点间相互联系的多维数据数 ...

  3. Bootstrap 标签徽章巨幕页头

    @{    Layout = null;}<!DOCTYPE html><html><head>    <meta name="viewport&q ...

  4. golang并发编程的两种限速方法

    引子 golang提供了goroutine快速实现并发编程,在实际环境中,如果goroutine中的代码要消耗大量资源时(CPU.内存.带宽等),我们就需要对程序限速,以防止goroutine将资源耗 ...

  5. Thinkphp模板开放给第三方编辑权限时，如何禁止模板使用php代码

    首先我要吐槽一个问题:为什么在博客园发布的文章总是被其他网站采集过去,而他们采集过去后,排名比博客园还好,比如这篇文章,我把标题复制到百度搜索,结果第一页的搜索结果全部都是采集我的,而我在博客园发布的 ...

  6. win10应用程序添加到开机启动项的两种解决办法

    原文 win10应用程序添加到开机启动项的两种解决办法 在windows10系统中,如果想让应用程序在开机之后自动运行起来,可以怎么做呢? 方法一: 1.首先创建应用程序的快捷方式 找到自己想加入开机 ...

  7. Win8 Metro(C#)数字图像处理--4图像颜色空间描述

    原文:Win8 Metro(C#)数字图像处理--4图像颜色空间描述  图像颜色空间是图像颜色集合的数学表示,本小节将针对几种常见颜色空间做个简单介绍. /// <summary> / ...

  8. Qt之自定义搜索框——QLineEdit里增加一个Layout，还不影响正常输入文字（好像是一种比较通吃的方法）

    简述 关于搜索框,大家都经常接触.例如:浏览器搜索.Windows资源管理器搜索等. 当然,这些对于Qt实现来说毫无压力,只要思路清晰,分分钟搞定. 方案一:调用QLineEdit现有接口 void ...

  9. WPF使用Fluent.Ribbon修改标题栏背景颜色

    使用NuGet安装:Install-Package Fluent.Ribbon 修改App.xaml: <Application.Resources> <!-- Attach def ...

  10. oracle延迟块清除

    oracle在执行一些DML操作时,会在block上有活动事务的标志,如果一个事务commit后,由于某些block在commit之前已经写回datafile, 或者事务影响到的block数过多,则c ...