手机秒表(JS实现)
生活随笔
收集整理的這篇文章主要介紹了
手机秒表(JS实现)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!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>
總結
以上是生活随笔為你收集整理的手机秒表(JS实现)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： mysql高效sql语句_高效SQL优化
- 下一篇： 将mysql从服务器永远变为只读_将my