利用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);// 获取页面DIvvar odiv = document.getElementById("d1");// 小于10在前面加0if(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>

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

转载于:https://www.cnblogs.com/zhaohongcheng/p/10853024.html

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

  1. vue.js：利用vue.js做一个抽奖小游戏

    MVVM模式是什么:M=Model(模型),V=View(视图),VM= ViewModel(简写成MVVM) . 代码如下: 运行代码结果: 1.你没有中奖: 2.恭喜你,你中奖了: 转载于:htt ...

  2. 乐鑫Esp32学习之旅⑦ esp32上利用GPIO中断做一个按键的短按和长按的回调事件，再也无须担心触发源。（附带Demo）

    本系列博客学习由非官方人员 半颗心脏 潜心所力所写,仅仅做个人技术交流分享,不做任何商业用途.如有不对之处,请留言,本人及时更改. 1. 爬坑学习新旅程,虚拟机搭建esp32开发环境,打印 " ...

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

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

  4. video.min.js php,使用flv.js与video.js做一个视频直播效果

    这次给大家带来使用flv.js与video.js做一个视频直播效果,使用flv.js与video.js做出视频直播效果的注意事项有哪些,下面就是实战案例,一起来看一下. 环境配置 首先运行livego ...

  5. 用js做一个数字华容道

    我很喜欢华容道啊,这次用js做一个 话不多说上代码 <!DOCTYPE html> <html><head><meta charset="UTF-8 ...

  6. 用js做一个鼠标惯性动画

    用js做一个简单的鼠标惯性动画 <style type="text/css">#div1{width: 50px;height: 50px;background: re ...

  7. js 月份间隔计算器_15分钟用JS做一个简易计算器

    原标题:15分钟用JS做一个简易计算器 前言 这个小练手旨在帮助刚上手学习Java的同学练习最基本的Js知识,大神勿喷哈,由于这个是非常简易的计算器,可以完成的功能有加减乘除和AC(清屏),DEL(退 ...

  8. 利用monment库做一个日历表

    利用monment库做一个日历表 先看完成品 点击上月和下月根据当前系统的时间进行变化 这是布局 <div class="wapper"><div class=& ...

  9. html与css编程证书,利用CSS布局做一个简单的荣誉证书（代码示例）

    本篇文章将给大家介绍如何使用css布局制作一个简单的荣誉证书,有趣且实用,希望对需要的朋友有所帮助! 那么利用css布局实现简单荣誉证书样式的效果是非常简单的,主要用到以下几个基础属性: backgr ...

最新文章

  1. 成功安装mysql后，为何服务管理器里找不到MySQL服务名（解析篇）
  2. vscode 新版eslint自动修复_程序员请收好：10 个实用的 VS Code 插件
  3. 辛辛苦苦写100条测试用例，为何只被正经执行的只有50条？
  4. 苹果手机如何调节屏幕彩色(对于百度提供的方式行不通时此方法必有用)
  5. ffmpeg之G711解析成pcm
  6. 20165204Java第四周学习
  7. sql server 数据库设计实例
  8. 读书笔记——《电商产品经理-基于人、货、场、内容的产品设计攻略》
  9. 思科模拟器 交换机链路聚合（二层、三层）
  10. 软件安装(一):VS2017安装和使用
  11. 简单的sql注入之2WP
  12. x264码率控制（二）lookahead
  13. 如何将Excel中的图表导出为图片
  14. ML1.1 机器学习误差分析
  15. linux 内存强度测试软件,Linux系统性能测试工具（一）——内存带宽测试工具mbw...
  16. MySQL权限系统(三).权限表 Grant Tables
  17. 如何编辑扫描的PDF文件？
  18. 2022支付宝集五福攻略,一天20张不是事
  19. 书论92 侯仁朔《侯氏书品》
  20. 数据中心服务器大战：思科vs惠普vs…

热门文章

  1. 点集拓扑学思维导图(附pdf源文档)
  2. Linux下的终端中用shell命令打开文件夹窗口
  3. mysql员工表部门表_部门表 department 部门编号 dept_id 部门名称 汇总表
  4. linux 命令last -x,查询linux系统重启记录的last命令
  5. atsha204a加密ic01
  6. html在不可编辑页面字段下沉,[Web前端技术教学]《基于Web标准的网页设计与制作》试题及答案...
  7. 【2017今日头条】头条校招(JAVA)
  8. 用IDEA弹奏《起风了》伴奏音乐 Java语言 ＜源码分享＞ GitHub有趣的小项目
  9. 开发工具篇第三讲：Maven从入门到实战
  10. 利用COCO API测试自己数据集训练的YOLOv3模型的mAP（VOC格式数据集）