利用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忘记ubuntu子系统密码

    原文:Win10忘记ubuntu子系统密码 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/wf19930209/article/details/80 ...

  2. Android开发 ----------怎样真机调试？

    一般来说 真机调试 是最快的, 所以建议 大家 直接用真机调试.

  3. SecureCRT下载/注册/安装镜像文件

    #$language = "VBScript" #$interface = "1.0" ' This automatically generated scrip ...

  4. MongoDB Shell 经常使用的操作

    数组查询 数组查询 MongoDB 中有子文档的概念,一个文档中能方便的嵌入子文档,这与关系性数据库有着明显的不同.在查询时,语法有一些注意点. 样例代码,假如我们的一个集合(tests)中存在标签键 ...

  5. sdut 5-1 继承和派生

    5-1 继承与派生 Time Limit: 1000MS Memory limit: 65536K 题目描写叙述 通过本题目的练习能够掌握继承与派生的概念.派生类的定义和用法.当中派生类构造函数的定义 ...

  6. Effective C++：规定24：如果所有的单位都需要的参数类型转换，使用请做到这一点non-member功能

    (一个) 如果一个class.同意整数"隐式转换为"有理数似乎非常合理. class Rational{ public: Rational(int numerator = 0, i ...

  7. Eclipseproject标准的文件夹层次

    为什么特别写一个文档首场讲座解释什么层次,你是eclipse正在使用java.io.File类在读workspace档,我相信不知道eclipse,为了避免以后再出现这样的令人难堪的情况,还是编写这样 ...

  8. POJ1185:火炮(减少国家)

    Description 命令将军打算N*M该网络格他们的炮兵部队部署在地图上.一个N*M该地图由N行M列,每个地图格它可以是山(使用"H" 表示),也可能是平原(用"P& ...

  9. Dijkstra含权图最短路径；审判，不要错过枚举退款保证不会重复;国际象棋八皇后问题

    求两节点的最短通路.对于无权图,能够通过图的广度优先遍历求解.含权图一般通过Dijkstra算法求解. import java.util.ArrayList; import java.util.Has ...

  10. WPF学习目录

    基本概念 数据源Source-目标Target WPF生命周期 App.xaml 依赖属性 WPF路由 线程操纵UI问题 利用属性中设置.查看DataContext/Command等 分析布局 写数据 ...