利用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. 实用WordPress后台MySQL操作命令

    关键字: WordPress MySQL 后台 数据库 地址:http://www.cnblogs.com/txw1958/archive/2013/01/06/wordpress-sql.html ...

  2. FastDFS是纯C语言实现，只支持Linux，适合以中小文件为载体的在线服务，还可以冗余备份和负载均衡

    一.理论基础 FastDFS比较适合以中小文件为载体的在线服务,比如跟NGINX(APACHE)配合搭建图片服务器. 分布式文件系统FastDFS FastDFS是纯C语言实现,只支持Linux.Fr ...

  3. 【转载】MySQL Replication 环境安装与配置

    安装[root@msr01 ~]# yum install mysql-serverInstalled:mysql-server.x86_64 0:5.1.73-3.el6_5 Dependency ...

  4. VS生成Cordova for Android应用之Gradle

    原文:VS生成Cordova for Android应用之Gradle 一.Gradle简介 Gradle是一个基于Apache Ant和Apache Maven概念的项目自动化建构工具.它使用一种基 ...

  5. JSON对象与字符串之间的相互转换 - CSDN博客

    原文:JSON对象与字符串之间的相互转换 - CSDN博客 <html> <head> <meta name="viewport" content=& ...

  6. 利用Socket通信

    网络上的两个程序通过一个双向的通信连接实现数据的交换,这个连接的一端称为一个socket. 建立网络通信连接至少要一对端口号(socket).socket本质是编程接口(API),对TCP/IP的封装 ...

  7. SimpleMembership，成员资格提供程序、 通用的提供者和新的 ASP.NET 4.5 Web 窗体和 ASP.NET MVC 4 模板

    ASP.NET MVC 4 互联网模板中添加一些新的. 非常有用的功能,构建 SimpleMembership.这些更改将添加一些很有特色,像很多更简单. 可扩展会员 API 和 OAuth 的支持. ...

  8. C# winform 主界面打开并关闭登录界面

    在winform 界面编程中,我们有时候要在主界面打开之前先显示登录界面,当登录界面用户信息校验正确后才打开主界面,而这时登陆界面也完成使命该功成身退了. 目前有两种方法可实现: 方法1. 隐藏登录界 ...

  9. MinGW和MSYS区别和关系以及MinGW&MSYS在Win7中安装并编译x264

    http://blog.csdn.net/freeape/article/details/50555003

  10. jQuery.form的使用方法

    首先需要引入jquery.form.js 之后即可使用 jquery.form.js的中文API网址http://www.vaikan.com/docs/jquery.form.plugin/jque ...