<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
100%;
background-color: black;
}
#time {
color: white;
font-size: 80px;
padding-top: 35%;
padding-left: 4%;
height: 15%;
100%;
}
#butWrap {
height: 10%;
overflow: hidden;
padding: 20px;
}
#butWrap input {
border-radius: 40px;
font-size: 20px;
80px;
height: 80px;
border: 0;
outline: none;
}
#leftBtn {
background-color: rgb(21, 21, 21);
float: left;
color: rgb(132, 132, 132);
}
#rightBtn {
background-color: rgb(12, 56, 30);
float: right;
color: rgb(0, 196, 92);
}
#timeMain {
height: 50%;
100%;
overflow-y: scroll;
}
#timeMain div {
color: white;
font-size: 20px;
border-top: 1px solid darkgray;
border-bottom: 1px solid darkgray;
padding: 10px;
overflow: hidden;
}
#timeMain div>span:first-child {
float: left;
}
#timeMain div>span:last-child {
float: right;
}
.stop {
background-color: rgb(66, 18, 15) !important;
color: rgb(196, 0, 3) !important;
}
</style>
</head>
<body>
<div id="time">00:00.00</div>
<div id="butWrap">
<input type="button" value="计次" id="leftBtn" />
<input type="button" value="启动" id="rightBtn" />
</div>
<div id="timeMain"></div>
<script>
var timeDiv = document.getElementById("time"); // 最大数字显示标签
var rightBtn = document.getElementById("rightBtn");
var leftBtn = document.getElementById("leftBtn");
var timeMain = document.getElementById("timeMain"); // 计次的部分
var nowTime = 0; // 当前毫秒数
var nowSeconds = 0; // 当前秒数
var nowMinutes = 0; // 当前分钟数
var t; // 保存计时器
leftBtn.onclick = function(){
if(this.value == "记次"){
timeNum();
} else {
resetTime();//复位
}
}
rightBtn.onclick = function() {
if(this.value == "启动") {
start();
this.className = "stop";
this.value = "停止";
leftBtn.value = "记次"
} else {
stop();
this.className = "";
this.value = "启动";
leftBtn.value = "复位"
}
}
// 1. 启动事件
function start() {
// (1) 数字变化
t = setInterval(function() {
nowTime++;
changeTime();
}, 10);
if(timeMain.innerHTML == "") { //点击启动的时候只会走一次
timeNum();
}
}
// 2. 停止事件
function stop() {
clearInterval(t);
}
function changeTime() {
if(nowTime == 100) {
nowTime = 0;
nowSeconds++;
}
if(nowSeconds == 60) {
nowSeconds = 0;
nowMinutes++;
}
// 3. 处理时间格式
checkTimeStyle();
}
function checkTimeStyle() {
var resultStr = "";
if(nowMinutes < 10) {
resultStr = "0" + nowMinutes + ":";
} else {
resultStr = nowMinutes + ":";
}
if(nowSeconds < 10) {
resultStr += "0" + nowSeconds + ".";
} else {
resultStr += nowSeconds + ".";
}
if(nowTime < 10) {
resultStr += "0" + nowTime;
} else {
resultStr += nowTime;
}
timeDiv.innerHTML = resultStr;
}
// 4. 显示底部计次
function timeNum() {
var myD = document.createElement("div");
var lSpan = document.createElement("span");
var rSpan = document.createElement("span");
myD.appendChild(lSpan);
myD.appendChild(rSpan);
timeMain.appendChild(myD);
lSpan.innerHTML = "记次";
rSpan.innerHTML = timeDiv.innerHTML;
}
function resetTime(){
timeDiv.innerHTML = "00:00.00";
nowTime = 0;
nowSeconds = 0;
nowMinutes = 0;
timeMain.innerHTML = "";//干掉记次div里所有标签
}
</script>
</body>
</html>