本文目錄一覽：
- 1、用JS實現鐘錶計時器功能
- 2、javascript,實現一個時鐘,頁面顯示當前時間包括年月日時 分 秒 並設定一個時間點，當該
- 3、JavaScript中的數字時鐘的顯示問題
- 4、怎麼把js時鐘放在網頁側邊
- 5、如何使用JS實現一個簡易數碼時鐘
- 6、js做網頁時鐘，哪裡錯了
用JS實現鐘錶計時器功能
利用new Date();可以輕鬆的實現鐘錶功能,甚至日曆功能.
如果要實現計時器功能也可以用這個對象.
var c = 1000; // 一千微秒,就是一秒
function funBeginDisTime() {
c = c + 1000; // 節奏為一秒
var now = new Date(0,0,0,0,0,0,c);
var day = now.getDate();
var hour = now.getHours();
var minutes = now.getMinutes();
var sec = now.getSeconds();
$(“#myClock”).html(day + “天”+ hour + “時” + minutes + “分” + sec + “秒”);
myTime = setTimeout(“funBeginDisTime()”, 1000); // 每一秒執行一次
}
function funStopDisTime() {
clearTimeout(myTime);
}
body
input id=”Button2″ type=”button” value=”開始” onclick=”funBeginDisTime()”/
span id=”myClock”/span
input id=”Button1″ type=”button” value=”暫停” onclick=”funStopDisTime()” /
/body
setInterval() 是循環重複執行某個動作,
setTimeout()是只執行一次.
比如每五秒就通過AJAX向服務器發送一次請求.那麼就可以用setInterval():
[javascript] view plain copy
setInterval(“reloadAction()”, 5000);
[javascript] view plain copy
function reloadAction() {
$.ajax({
“type”:”POST”,
“url”:”live.php”,
“data”:”getData=live”,
“success”:function(data) {
// ….
}
});
}
javascript,實現一個時鐘,頁面顯示當前時間包括年月日時 分 秒 並設定一個時間點，當該
html
head
titleTime/title
/head
body
div id=”time”/div
div id=”alert”/div
/body
script type=”text/javascript” charset=”utf-8″ async defer
var time = document.getElementById(“time”);
showTime();
function showTime() {
// To get the date time
var date = new Date();
var year = date.getYear() + 1900;
var month = date.getMonth() + 1;
var day = date.getDate();
var hour = date.getHours();
var min = date.getMinutes();
var sec = date.getSeconds();
var date_time = year + “-” + month + “-” + day + ” ” + hour + “:” + min + “:” + sec;
time.innerHTML = date_time;
// when the time is equal your condition, show the special words.
if(date_time == “2014-6-25 11:45:20”) {
document.getElementById(“alert”).innerHTML = “It’s time to display your words here.”;
}
}
// set the interval time
setInterval(showTime, 1000);
/script
/html
JavaScript中的數字時鐘的顯示問題
html
head
script language=”JavaScript”
function showTime()
{
var currentDate = new Date();
var hours = currentDate.getHours();
var minutes = currentDate.getMinutes();
var seconds = currentDate.getSeconds();
//
//格式化輸出
//
if (minutes 10)
minutes = “0” + minutes;
if (seconds 10)
seconds = “0” + seconds;
var currentTimeString =”font color=blue” + hours + “:” + minutes + “:” + seconds + “/font”;
document.getElementById(“show”).innerHTML=currentTimeString; //改這地方
window.setTimeout(“showTime()”, 1000);
}
/script
/head
body onload=”showTime()”
span id=”show”/span !–加這地方–
/body
/html
怎麼把js時鐘放在網頁側邊
1、首先打開電腦。
2、其次在電腦主頁找到並點擊設置。
3、然後在設置中點擊時鐘設置。
4、最後將js時鐘放到網頁側邊即可。
如何使用JS實現一個簡易數碼時鐘
設計思路：
數碼時鐘即通過圖片數字來顯示當前時間，需要顯示的圖片的URL根據時間變化而變化。
a、獲取當前時間Date()並將當前時間信息轉換為一個6位的字符串;
b、根據時間字符串每個位置對應的數字來更改圖片的src的值，從而實現更換顯示圖片;
構建HTML基礎並添加樣式。
div id=”div1″
img src=’./數字時鐘（1）_files/0.jpg’
img src=’./數字時鐘（1）_files/0.jpg’
:
img src=’./數字時鐘（1）_files/0.jpg’
img src=’./數字時鐘（1）_files/0.jpg’
:
img src=’./數字時鐘（1）_files/0.jpg’
img src=’./數字時鐘（1）_files/0.jpg’
/div
style樣式
#div1{
width:50%;
margin:300px auto;
background:black;
}
獲取圖片元素以及當前時間：
var oDiv=document.getElementById(‘div1’);
var aImg=oDiv.getElementsByTagName(‘img’);
var oDate=new Date();
var str=oDate.getHours()+oDate.getMinutes()+oDate.getSeconds();
這裡出現兩個問題
1、oDate.getHours()返回的都是數字，這樣編寫為數字相加，而非字符串相加。
2、當獲取的值為一位數時，會造成字符串的個數少於6，不滿足初始設計要求。
解決以上兩個問題的代碼解決方案：
代碼
var oDiv=document.getElementById(‘div1’);
var aImg=oDiv.getElementsByTagName(‘img’);
var oDate=new Date();
function twoDigitsStr()
{
if(n10)
{return ‘0’+n;}
else
{return ”+n;}
}
var str=twoDigitsStr(oDate.getHours())+twoDigitsStr(oDate.getMinutes())+twoDigitsStr(oDate.getSeconds());
設置所有圖片的src值：
for(var i=0;iaImg.length;i++)
{
aImg[i].src=”./數字時鐘（1）_files/”+str.charAt(i)+”.jpg”;
}
通過setInterval()來實現每隔1秒進行重新獲取當前時間以及圖片src值：
代碼
var oDiv=document.getElementById(‘div1’);
var aImg=oDiv.getElementsByTagName(‘img’);
setInterval(function tick()
{
var oDate=new Date();
var str=twoDigitsStr(oDate.getHours())+twoDigitsStr(oDate.getMinutes())+twoDigitsStr(oDate.getSeconds());
for(var i=0;iaImg.length;i++)
{
aImg[i].src=”./數字時鐘（1）_files/”+str.charAt(i)+”.jpg”;
}
}
,1000);
但是還是有一個問題，網頁在打開的初始階段，顯示時間為00：00：00，這是因為定時器有個特性，當定時器被打開後，不會立刻執行裏面的函數，而是在1秒後執行。解決代碼：
var oDiv=document.getElementById(‘div1’);
var aImg=oDiv.getElementsByTagName(‘img’);
function tick()
{var oDate=new Date();
var str=twoDigitsStr(oDate.getHours())+twoDigitsStr(oDate.getMinutes())+twoDigitsStr(oDate.getSeconds());
for(var i=0;iaImg.length;i++)
{
aImg[i].src=”./數字時鐘（1）_files/”+str.charAt(i)+”.jpg”;
}
}
setInterval(tick,1000);
tick();
問題：代碼setInterval(tick,1000);中函數tick沒有帶括號，那麼JS中函數帶括號與不帶括號有什麼區別？
完整的數碼時鐘製作JS代碼為：
function twoDigitsStr(n)
{
if(n10)
{return ‘0’+n;}
else
{return ”+n;}
}
window.onload=function()
{
var oDiv=document.getElementById(‘div1’);
var aImg=oDiv.getElementsByTagName(‘img’);
function tick()
{var oDate=new Date();
var str=twoDigitsStr(oDate.getHours())+twoDigitsStr(oDate.getMinutes())+twoDigitsStr(oDate.getSeconds());
for(var i=0;iaImg.length;i++)
{
aImg[i].src=”./數字時鐘（1）_files/”+str.charAt(i)+”.jpg”;
}
}
setInterval(tick,1000);
tick();
}
js做網頁時鐘，哪裡錯了
html
head
title左側/title
/head
body
table width=”100%” height=”100%” border=”1″
tr width=”100%” height=”100%”
td border=”1″ bordercolor=”red”/td
td id=”timeArea” align=”right” valign=”bottom”/td
/tr
/table
script type=”text/javascript”
function start(){
var now=new Date();
var hr=now.getHours();
var min=now.getMinutes();
var sec=now.getSeconds();
var clocktext=”現在時間：”+hr+”:”+min+”:”+sec;
var timeTD=document.getElementById(“timeArea”);//獲得時間字符串放置的單元格
timeTD.innerText=clocktext;//將時間字符串作為單元格的顯示文本內容
window.setTimeout(“start()”,1000);//將時間字符串作為單元格的顯示文本內容
}
start();//親試，這樣就可以了
/script
/body
/html
原創文章，作者：GTLW，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/132543.html
微信掃一掃 
支付寶掃一掃 