Javascript实战——电子钟（时钟、闹钟、计时器、倒计时）

1.效果图

2.源代码

<!DOCTYPE html><head><meta charset="utf-8"><title>电子钟</title><link rel="stylesheet" href="index.css">
</head><body><div id="bigbox"><!-- 时钟 --><div id="s1" class="smallbox"><h1>北京时间</h1><h1 id="s1_h1_one"></h1><h1 id="s1_h1_tow"></h1></div><!-- 闹钟 --><div id="s2" class="smallbox"><h2>闹钟</h2><input type="number" class="val" placeholder="时"><input type="number" class="val" placeholder="分"><input type="button" id="s2_add" value="添加"></div><!-- 计时器 --><div id="s3" class="smallbox"><p id="s3_p">0:0:0</p><input type="button" id="s3_btn_one" value="开始"><input type="button" id="s3_btn_two" value="暂停"><input type="button" id="s3_btn_three" value="继续"><input type="button" id="s3_btn_four" value="结束"><!--<input type="button" id="s3_btn_five" value="记录">--></div><!-- 倒计时 --><div id="s4" class="smallbox"><h2>倒计时</h2><input type="text" id="s4_hour"  placeholder="时"><input type="text" id="s4_minute" placeholder="分"><input type="text" id="s4_second" placeholder="秒"><input type="button" id="s4_down" value="开始"><p id="s4_p">0</p></div></div><script src="index.js"></script>
</body>

#bigbox {width: 80%;height: 500px;margin-left: 10%;margin-top: 100px;
}.smallbox {width: 45%;height: 50%;background-color: blanchedalmond;border: 5px solid rgb(238, 159, 12);box-sizing: border-box;border-radius: 10%;text-align: center;
}#s1 {float: left;
}#s3 {float: left;margin-top: 5%;
}#s2 {float: right;
}#s4 {float: right;margin-top: 5%;
}#s3_btn_two,
#s3_btn_three,
#s3_btn_four {display: none;
}input {width: 60px;height: 40px;border: palevioletred;text-align: center;font-size: 20px;
}p {font-size: 2em;
}

//获取元素结点
var s1 = document.getElementById("s1");
var s2 = document.getElementById("s2");
var s3 = document.getElementById("s3");
var s4 = document.getElementById("s4");
var s1_h1_one = document.getElementById("s1_h1_one");
var s1_h1_tow = document.getElementById("s1_h1_tow");//时钟函数
function clock() {var datetime = new Date();var year = datetime.getFullYear();var month = datetime.getMonth();var date = datetime.getDate();var hour = datetime.getHours();var minute = datetime.getMinutes();var second = datetime.getSeconds();s1_h1_one.innerText = year + "年" + (month + 1) + "月" + date + "日";s1_h1_tow.innerText = hour + ':' + minute + ':' + second;
}//初始化时钟
setTimeout(clock, 0);//重复执行时钟函数
setInterval(clock, 1000);//闹钟相关节点获取
var val = document.getElementsByClassName("val");
var s2_add = document.getElementById("s2_add");
console.log(val);//闹钟相关数据定义
var arr_h = new Array();
var arr_m = [];
var num = 0;
var flag = 0;//添加闹钟
s2_add.onclick = function add() {if (val[0].value < 0 || val[0].value > 23 || val[1].value < 0 || val[1].value > 59) {alert("输入错误,无法添加");for (var i = 0; i < 2; i++) {val[i].value = null;}} else {arr_h[num] = val[0].value;arr_m[num] = val[1].value;var s = "闹钟" + (num + 1) + ":" + arr_h[num] + ":" + arr_m[num];var textNode = document.createTextNode(s);var p = document.createElement("p");p.appendChild(textNode);s2.appendChild(p);num++;for (var i = 0; i < 2; i++) {val[i].value = null;}}
}//删除闹钟
//大家先试着自己实现，讲解时再统一实现//闹钟监视函数
function monitor() {var nowTime = new Date();var minute = nowTime.getMinutes();var hour = nowTime.getHours();for (var i = 0; i <= num; i++) {if (arr_m[i] == minute && arr_h == hour && flag == 0) {alert("闹钟响了");flag = 1;}}
}//闹钟启动函数
setInterval(monitor, 1000);
setInterval(() => {flag == 0;
}, 60000);//计时器相关元素结点获取
var s3_p = document.getElementById("s3_p");
var s3_btn_one = document.getElementById("s3_btn_one");
var s3_btn_two = document.getElementById("s3_btn_two");
var s3_btn_three = document.getElementById("s3_btn_three");
var s3_btn_four = document.getElementById("s3_btn_four");var timer1, timer2;
var i = 0;//计时器启动函数
s3_btn_one.onclick = function start() {clearInterval(timer1);timer1 = setInterval(count, 1000);s3_btn_one.style.display = "none";s3_btn_two.style.display = "inline-block";s3_btn_four.style.display = "inline-block";
}//计时函数
function count() {i++;var second = parseInt(i % 60);var minute = parseInt(i / 60);var hour = parseInt(i / 60 / 60);s3_p.innerText = hour + ":" + minute + ":" + second;
}//计时器暂停函数
s3_btn_two.onclick = function suspended() {clearInterval(timer1);s3_btn_two.style.display = "none";s3_btn_three.style.display = "inline-block";
}//计时器继续函数
s3_btn_three.onclick = function keep() {clearInterval(timer1);timer1 = setInterval(count, 1000);s3_btn_two.style.display = "inline-block";s3_btn_three.style.display = "none";
}//计时器清零函数
s3_btn_four.onclick = function cls() {clearInterval(timer1);clearInterval(timer2);i = 0;s3_p.innerText = "0:0:0";s3_btn_one.style.display = "inline-block";s3_btn_two.style.display = "none";s3_btn_three.style.display = "none";s3_btn_four.style.display = "none";
}//计时器记录函数
//大家先试着自己实现，讲解时再统一实现//获取倒计时相关节点
var s4_hour = document.getElementById("s4_hour");
var s4_minute = document.getElementById("s4_minute");
var s4_second = document.getElementById("s4_second");
var s4_down = document.getElementById("s4_down");
var s4_p = document.getElementById("s4_p");//定义倒计时相关参数
var sum = 0;
var timer3;//倒计时函数
s4_down.onclick = function down() {sum = parseInt(s4_hour.value * 60 * 60) + parseInt(s4_minute.value * 60) + parseInt(s4_second.value);s4_hour.value = null;s4_minute.value = null;s4_second.value = null;clearInterval(timer3);//ES6内容timer3 = setInterval(() => {s4_p.innerText = "剩余"+sum+"秒";if (sum == 0) {s4_p.innerText = "时间到了";clearInterval(timer3);}sum--;}, 1000);
}

Javascript实战——电子钟（时钟、闹钟、计时器、倒计时）相关推荐

Android实战第一篇——时钟+闹钟+计时器+秒表
学习了快一学期的Android了,之前的知识点都是零散的学习的,只有当我们真正的去把他们用起来的时候才会发现难点,自己才会独立尝试去解决某个问题.接下来是我的一个简单的多功能时钟的小实战(视频资源ht ...
C语言电子闹钟（显示时间、计时器、闹钟、倒计时、世界时钟）C语言大作业
#include <stdio.h> #include <time.h> //时间函数 #include <conio.h> //字符模式函数 #include & ...
基于stm32单片机多功能可调时钟闹钟万年历计时器闹铃提醒Proteus仿真（源码+仿真+原理图+PCB）
资料编号:148 视频讲解: 148-基于stm32单片机多功能可调时钟闹钟万年历计时器闹铃提醒Proteus仿真(源码+仿真+原理图+PCB) 本设计采用stm32单片机作为主控,LCD1602显 ...
easyui treegrid 获取新添加行inserted_18行JavaScript代码构建一个倒数计时器
有时候,你会需要构建一个JavaScript倒计时时钟.你可能会有一个活动.一个销售.一个促销或一个游戏.你可以用原生的JavaScript构建一个时钟,而不是去找一个插件.尽管有很多很棒的时钟插件, ...
java实现倒计时闹钟_倒计时闹钟软件下载-倒计时闹钟app下载v1.2.4-西西软件下载...
倒计时闹钟app是一款多功能的手机闹钟软件,能够了解实时时间,还可以设置闹钟和备忘录,保障用户每日的行程和事务的完成,多种闹钟模式,还可以计时哦!需要的伙伴,可以在西西下载哦! 倒计时闹钟app简介: ...
C#简单的闹钟计时器，当用户设置完定时时间之后，如果到了设置的时间，该软件会自动进行提示。
代码可直接运行 C#计时器在日常生活中经常用到,比如短跑比赛需要计时等.制作了一个简单的闹钟计时器,当用户设置完定时时间之后,如果到了设置的时间,该软件会自动进行提示. 界面搭建如下: 运行界面如下: ...
51单片机可调时钟/闹钟（源程序+原理图+PCB+详细报告）
51单片机可调时钟/闹钟经过实验验证,切实可行!!配备详细代码注释!!! 功能介绍时钟设置显示功能这个仿真提供年份日期星期24小时格式时间显示,初始化后可以设置时间,选择模式一后可设置,通过对 ...
FPGA的设计艺术（5）STA实战之时钟偏斜对建立保持时间的影响以及时序报告分析
前言本文首发:FPGA的设计艺术(5)STA实战之时钟偏斜对建立保持时间的影响以及时序报告分析. STA回顾 70年代的时序是通过Spice仿真执行的.80年代的时序包括在Verilog仿真中,以确 ...
html倒计时timer,JavaScript定时器设置、使用与倒计时案例详解
本文实例讲述了JavaScript定时器设置.使用与倒计时案例.分享给大家供大家参考,具体如下: 1.设置定时器定时器,适用于定时执行的任务中.在BOM的window对象中,有这样的两个函数是用于设 ...

Javascript实战——电子钟（时钟、闹钟、计时器、倒计时）

1.效果图

2.源代码

Javascript实战——电子钟（时钟、闹钟、计时器、倒计时）相关推荐

最新文章

热门文章