html如何實現計數器以及時鐘的功能代碼
- 不言原創
- 2018-08-30 11:29:512646瀏覽
這篇文章帶給大家的內容是關於html如何實現計數器以及時鐘的功能代碼 ，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。
在許多的網頁中，我們都會看到計數器以及時鐘，那麼我們怎麼自己實作著種功能呢？
先說計數器，計數器的邏輯功能很簡單，就是秒針每秒加一，逢60進一就可以。程式碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div></div>
<script>
var index = 0;
var i=0;
/**
* 对时间进行预先处理，逢60进一
*/
function counter(){
second = index;
minute=i;
index++;
if(second==60){
second=0;
i++;
index=0;
}
if(second<10){
second = "0"+second;
}
if(minute<10){
minute="0"+minute;
}
return time = minute +":"+second;
}
/**
* 将获得的时间插入到div的区域
*/
function show(){
var time = counter();
document.getElementsByTagName("div")[0].innerHTML=time;
}
/**
* 每秒钟获得一次时间，实现计数功能
*/
function set(){
setInterval("show()",1000);
}
show();
set();
</script>
</body>
</html>這樣，一個簡單的計數器就完成了。
時鐘功能的程式碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
/**
* 向Date类中添加获取当前时间的方法
*/
Date.prototype.currentTime = function(){
var year = this.getFullYear();
var month = this.getMonth()+1;
var day = this.getDate();
var week = this.getDay();
week = "星期"+"日一二三四五六".charAt(week);
month = month<10 ? "0"+month : month;
day = day < 10 ? "0"+day : day;
var hour = this.getHours();
var second = this.getSeconds();
var minute = this.getMinutes();
hour = hour<10 ? "0"+hour : hour;
second = second < 10 ? "0"+second : second;
minute = minute < 10 ? "0"+minute : minute;
return year+"-"+month+"-"+day+" "+week+" "+hour+":"+minute+":"+second;
}
function showTime(){
var time = new Date().currentTime();
document.getElementById("show").innerHTML = time;
}
function setTime(){
showTime();
setInterval("showTime()",1000);
}
window.onload = function(){
setTime();
}
</script>
</head>
<body>
<span id="show"></span>
</body>
</html>這樣，時鐘就完成了！
相關推薦：
jQuery css實作的時鐘效果(相容各瀏覽器)_jquery
以上是html如何實現計數器以及時鐘的功能代碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn