2016/1/6--计时器和导航条

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>

<script>
var i=0;
var mytime;
function starttime() {
mytime=setInterval(count,100);
i=0;
}
function count() {
var fen=parseInt(i/10/60);
var miao=parseInt(i/10-fen*60);
var haomiao=i%10;
document.getElementById("ptime").innerHTML=fen+":"+miao+":"+haomiao;
i++;
}
function stoptime(){
clearInterval(mytime);
}
</script>


<style>
body{
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
margin:0px;
padding:0px;
}
td{
margin: 15px;
padding: 10px;
text-align: center;
background-color: orchid;
}
td:hover{
box-shadow: 0px 7px 7px grey;
background-color: palegreen;
}
a:hover{
background-color: pink;
}
</style>
</head>
<body>
<table>
<tr>
<td><a href="#">HOME</a></td>
<td><a href="#">ABOUT US</a></td>
<td><a href="#">SERVICES</a></td>
<td><a href="#">PRODUCT</a></td>
<td><a href="#">BLOG</a></td>
<td><a href="#">CONTACT US</a></td>
</tr>
</table>

<input type="button" value="开始计时" onclick="starttime()">
<input type="button" value="停止计时" onclick="stoptime()">
<p id="ptime" style="background-color: darkblue;color: #ffffff;font-size: 30px;width: 100px;text-align: center;"></p>


</body>
</html>

posted on 2016-01-06 22:41  琳姐姐  阅读(153)  评论(0)    收藏  举报

导航