js秒表效果代码实例
分类：实例代码
本章节分享一段代码实例，它实现了秒表效果。
能够点击进行计时，也能够将记录的时间记录下来。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
li {
display: block;
margin-bottom: 10px;
}
body {
background: #353535;
}
#yesap {
width: 450px;
height: 550px;
background: #000;
border: 3px #fff solid;
}
#ekran {
width: 420px;
height: 120px;
background: #838383;
position: relative;
top: 12px;
color: #fff;
font-size: 55px;
}
#ekran #bir {
color: #fff;
font-size: 55px;
position: absolute;
right: 95px;
bottom: -10px;
}
#ekran #ikki {
color: #fff;
font-size: 55px;
position: absolute;
right: 180px;
bottom: -10px;
}
#ekran #uq {
color: #fff;
font-size: 55px;
position: absolute;
right: 260px;
bottom: -10px;
}
#ekran .qkt1 {
position: relative;
left: -22px;
top: 25px;
}
#ekran .qkt2 {
position: relative;
left: 30px;
top: 25px;
}
#hatir {
width: 420px;
height: 310px;
background: #FAFFE8;
border-radius: 12px;
position: relative;
top: 25px;
}
#hatir #bir {
color: #000;
font-size: 35px;
position: absolute;
left: 260px;
margin-top: 20px;
}
#hatir #ikki {
color: #000;
font-size: 35px;
position: absolute;
left: 180px;
margin-top: -10px;
}
#hatir #uq {
color: #000;
font-size: 35px;
position: absolute;
left: 95px;
margin-top: -10px;
}
#hatir .qkt1 {
position: relative;
font-size: 26px;
left: -43px;
top: 26px;
}
#hatir .qkt2 {
position: relative;
font-size: 26px;
left: 22px;
top: 26px;
}
#icon {
width: 420px;
height: 70px;
position: relative;
top: 10px;
top: 26px;
}
#icon div {
float: left;
margin-left: 38px;
margin-top: 35px;
color: #fff;
line-height: 38px;
}
#icon #icon1 {
width: 90px;
height: 40px;
border-radius: 11px;
background: rgb(88, 87, 109);
}
#icon #icon2 {
width: 90px;
height: 40px;
border-radius: 11px;
background: rgb(88, 87, 109);
}
#icon #icon3 {
width: 90px;
height: 40px;
border-radius: 11px;
background: rgb(88, 87, 109);
}
#del {
width: 110px;
height: 45px;
background: #FF0F0F;
margin-top: -7px;
border-radius: 20px;
margin-left: 3px;
}
#del p {
color: #fff;
font-size: 22px;
line-height: 40px;
}
#del:hover {
cursor: pointer;
}
#icon1:hover {
cursor: pointer;
}
#icon2:hover {
cursor: pointer;
}
#icon3:hover {
cursor: pointer;
}
#tishi {
width: 420px;
height: 310px;
background: #fff444;
position: absolute;
border-radius: 12px;
filter: alpha(opacity:0);
opacity: 0;
z-index: 9;
display: none;
}
#tishi p {
font-size: 24px;
font-weight: bold;
margin-top: 100px;
color: #020027;
}
#tishi #btn {
width: 90px;
height: 40px;
background: #000;
border-radius: 18px;
margin-top: -40px;
}
#tishi #btn p {
color: #fff;
font-size: 20px;
line-height: 38px;
}
#tishi #btn:hover {
cursor: pointer;
}
</style>
<script>
function getStyle(obj, name) {
if (obj.currentStyle) {
return obj.currentStyle[name];
} else {
return getComputedStyle(obj, false)[name];
}
}
function startMove(obj, json, End) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var bStop = true;
for (var turi in json) {
var cur = 0;
if (turi == 'opacity') {
cur = Math.round(parseFloat(getStyle(obj, turi)) * 100);
} else {
cur = parseInt(getStyle(obj, turi));
}
var speed = (json[turi] - cur) / 7;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (cur != json[turi])
bStop = false;
if (turi == 'opacity') {
obj.style.filter = 'alpha(opacity:' + (cur + speed) + ')';
obj.style.opacity = (cur + speed) / 100;
} else {
obj.style[turi] = cur + speed + 'px';
}
}
if (bStop) {
clearInterval(obj, timer);
if (End) {
End()
};
}
}, 30)
}
window.onload = function() {
var adiv = document.getElementById('bir');
var abtn = document.getElementById('icon1');
var bbtn = document.getElementById('icon3');
var xbtn = document.getElementById('icon2');
var arcd = document.getElementById('hatir');
var rcdx = arcd.getElementsByTagName('li');
var aekr = document.getElementById('ekran');
var del = document.getElementById('del');
abtn.onclick = function() {
Timestart();
}
bbtn.onclick = function() {
stop();
}
xbtn.onclick = function() {
var oLi = document.createElement('li');
var save = aekr.getElementsByTagName('li')[0];
if (rcdx.length == 7) {
var tshi = document.getElementById('tishi');
var btn1 = document.getElementById('btn');
tshi.style.display = 'block';
startMove(tshi, {
opacity: 90
})
btn1.onclick = function() {
var tshi = document.getElementById('tishi');
startMove(tshi, {
opacity: 0
}, function() {
tshi.style.display = 'none';
})
}
} else {
oLi.innerHTML = save.innerHTML;
arcd.appendChild(oLi);
}
}
del.onclick = function() {
arcd.innerHTML = '<div id="tishi"><p>记录已达到最大限制</p><div id="btn"><p>好吧</p></div></div>';
};
};
var timer = null;
function kox(n) {
if (n < 10) {
return '0' + n
} else {
return '' + n
};
};
function Timestart() {
var adiv = document.getElementById('bir');
var ndiv = document.getElementById('ikki');
var cdiv = document.getElementById('uq');
var abtn = document.getElementById('icon1');
var bbtn = document.getElementById('ekran');
var fdiv = bbtn.getElementsByTagName('h1')[1];
clearInterval(timer);
timer = setInterval(function() {
if (adiv.innerText == 99) {
adiv.innerText = 0;
ndiv.innerText++;
adiv.innerText = kox(adiv.innerText);
ndiv.innerText = kox(ndiv.innerText);
if (ndiv.innerText == 60) {
ndiv.innerText = 0;
cdiv.innerText++;
ndiv.innerText = kox(ndiv.innerText);
cdiv.innerText = kox(cdiv.innerText);
};
} else {
adiv.innerText++;
adiv.innerText = kox(adiv.innerText);
};
}, 10)
};
function stop() {
clearInterval(timer);
};
</script>
</head>
<body>
<center>
<div id="yesap">
<div id="ekran">
<li>
<h1 id="bir">00</h1>
<b class="qkt1">:</b>
<h1 id="ikki">00</h1>
<b class="qkt2">:</b>
<h1 id="uq">00</h1>
</li>
</div>
<div id="hatir">
<div id="tishi">
<p>记录已达到最大限制</p>
<div id="btn"><p>好吧</p>
</div>
</div>
</div>
<div id="icon">
<div id="icon1"><b>开始</b></div>
<div id="icon2"><b>记录</b></div>
<div id="icon3"><b>暂停</b></div>
</div>
</div>
<div id="del"><p>清空</p></div>
</center>
</body>
</html>
js秒表效果代码实例，这样的场景在实际项目中还是用的比较多的，关于js秒表效果代码实例就介绍到这了。
js秒表效果代码实例属于前端实例代码，有关更多实例代码大家可以查看。