js 製作秒錶效果
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.time {
width: 200px;
height: 100px;
background-color: #ccc;
text-align: center;
line-height: 50px;
font-size: 30px;
border-radius: 50px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="time">
<span id="sid"></span>
</br>
<button id="stop">停止</button>
<button id="start">開始</button>
</div>
</body>
<script type="text/javascript">
function getDate() {
var mytime = new Date();
/*year = mytime.getFullYear();
month = mytime.getMonth();
day = mytime.getDate();*/
/*hour = mytime.getHours();*/
hour = mytime.getHours();
if(hour < 10) {
hour = "0" + hour;
}
minutes = mytime.getMinutes();
if(minutes < 10) {
minutes = "0" + minutes;
}
secound = mytime.getSeconds();
if(secound < 10) {
secound = "0" + secound;
}
var str = hour + ":" + minutes + ":" + secound;
sidobj = document.getElementById("sid");
sidobj.innerHTML = str;
}
getDate(); // 因爲沒有內容，所以先執行一邊代碼獲取當前的值 ，然後再繼續1秒一個刷新
stopObj = setInterval(getDate, 1000);
/*setInterval(function(){
getDate();
},1000);*/
function stop() {
clearInterval(stopObj);
}
bobj = document.getElementById("stop");
bobj.onclick = function() {
stop();
}
function start() {
stopObj = setInterval(getDate, 0);
}
startObj = document.getElementById("start");
startObj.onclick = function() {
start();
}
</script>
</html>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章