<!--Created by real_pbyyy on 2017/3/18.--><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TimeCount</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
#pause{
display: none;
}
.count{
width:300px;
height:150px;
background: transparent;
padding:20px;
margin:0 auto;
margin-top:60px;
text-align: center;
border-radius: 10%;
opacity: 0.;
}
p{
margin:30px;
}
#tCount {
text-align: center;
font-size: 30px;
color:red;
}
</style>
</head>
<body>
<div class="count">
<p id="tCount"></p>
<p id="tCount2"></p>
<input type="button" value="开始计时" id="start" class="btn btn-success"/>
<input type="button" value="暂停计时" id="pause" class="btn btn-info" />
<input type="button" value="复位" id="reset" class="btn btn-danger"/>
</div>
<script>
//tCount2是准备实现倒计时功能的,现在还没做
var tCount = document.getElementById("tCount"),
tCount2 = document.getElementById("tCount2"),
sBtn =document.getElementById("start"),
rBtn = document.getElementById("reset"),
pBtn = document.getElementById("pause"),
txt = document.createTextNode("00:00:00"),
t=1,
s;
tCount.appendChild(txt);
//按钮事件
function control() {
sBtn.onclick=function () {
sBtn.style.display = "none";
pBtn.style.display = "inline";
count();
};
rBtn.onclick=function(){
reset();
sBtn.style.display="inline";
pBtn.style.display="none";
}
pBtn.onclick=function () {
sBtn.style.display="inline";
pBtn.style.display="none";
pause();
}
}
//计算时间
function timeAdd() {
if(t<10){
txt.nodeValue = "00:00:0"+t;
}else if(t>=10&&t<60){
txt.nodeValue = "00:00:"+t;
}else if(t<3600&&t>60){
var m = Math.floor(t/60);
var t1 = t%60;
if(m<10){
if(t1<10){
txt.nodeValue = "00:0"+m+":0"+t1;
}else if(t1>=10&&t1<60){
txt.nodeValue = "00:0"+m+":"+t1;
}
}else if(m<60&&m>=10){
if(t1<10){
txt.nodeValue = "00:"+m+":0"+t1;
}else if(t1>=10&&t1<60){
txt.nodeValue = "00:"+m+":"+t1;
}
}
}else if(t>=3600){
var h = Math.floor(t/3600);
var m = Math.floor((t-3600*h)/60);
var t1 = t%60;
var mt;
if(m<10){
if(t1<10){
mt = "0"+m+":0"+t1;
}else if(t1>=10&&t1<60){
mt = "0"+m+":"+t1;
}
}else if(m<60&&m>=10){
if(t1<10){
mt = m+":0"+t1;
}else if(t1>=10&&t1<60){
mt = m+":"+t1;
}
}
txt.nodeValue = h+":"+ mt;
}
t++;
}
//刷新时间显示
function count(){
s = setInterval("timeAdd()",1000);
}
//复位键的功能实现
function reset() {
clearInterval(s);
txt.nodeValue = "00:00:00";
t = 1;
s = null;
}
//暂停键的功能实现
function pause() {
var now = txt.nodeValue;
clearInterval(s);
}
window.onload=function () {
control();
}
</script>
</body>
</html>
无标签
版权属于:猫狗鼠鱼
本文链接:http://catdog007.icu/archives/380.html