快捷導(dǎo)航

javascript背景時鐘實現(xiàn)方法

更新時間：2015年06月18日 11:25:49 作者：瘋狂的流浪

這篇文章主要介紹了javascript背景時鐘實現(xiàn)方法,涉及javascript時間及頁面元素樣式的相關(guān)操作技巧,需要的朋友可以參考下

本文實例講述了javascript背景時鐘實現(xiàn)方法。分享給大家供大家參考。具體如下：

以下是這個效果的全部代碼。[最好從一個空頁面開始]

<html>
<head>
<TITLE>背景時鐘</TITLE> 
<script language=javaScript>
<!--// 
function clockon() {
thistime= new Date()
var hours=thistime.getHours()
var minutes=thistime.getMinutes()
var seconds=thistime.getSeconds()
if (eval(hours) <10) {hours="0"+hours}
if (eval(minutes) < 10) {minutes="0"+minutes}
if (seconds < 10) {seconds="0"+seconds}
thistime = hours+":"+minutes+":"+seconds
if(document.all) {
bgclocknoshade.innerHTML=thistime
bgclockshade.innerHTML=thistime
}
if(document.layers) {
document.bgclockshade.document.write('<div id="bgclockshade" style="position:absolute;visibility:visible;font-family:Verdana;color:FFAAAAA;font-size:120px;top:10px;left:152px">'+thistime+'</div>')
document.bgclocknoshade.document.write('<div id="bgclocknoshade" style="position:absolute;visibility:visible;font-family:Verdana;color:DDDDDD;font-size:120px;top:10px;left:150px">'+thistime+'</div>')
document.close()
}
var timer=setTimeout("clockon()",200)
}
//-->
</script>
<link rel="stylesheet" href="../style.css"></head>
<body onLoad="clockon()">
<div id="bgclockshade" style="position:absolute;visibility:visible;font-family:Arial;color:FF8888;font-size:120px;top:102px;left:152px"></div>
<div id="bgclocknoshade" style="position:absolute;visibility:visible;font-family:Arial;color:DDDDDD;font-size:120px;top:100px;left:150px"></div>
<div id="mainbody" style="position:absolute; visibility:visible">
</div>
</body>
</html>

說明：時鐘顯示的位置需要你修正TOP,LEFT參數(shù)來確定。TOP表示層距離顯示器頂部的象素值，LEFT表示距離左側(cè)的象素值。

希望本文所述對大家的javascript程序設(shè)計有所幫助。

您可能感興趣的文章:

相關(guān)文章

javaScript遍歷對象和數(shù)組的方法總結(jié)
這篇文章介紹了javaScript遍歷對象和數(shù)組的方法，文中通過示例代碼介紹的非常詳細。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-06-06
淺談JavaScript宏任務(wù)和微任務(wù)執(zhí)行順序
本文主要介紹了JavaScript宏任務(wù)和微任務(wù)執(zhí)行順序，結(jié)合實例代碼進行了詳細的講解，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-06-06
javascript checkbox/radio onchange不能兼容ie8處理辦法
這篇文章主要介紹了javascript checkbox/radio onchange不能兼容ie8處理辦法的相關(guān)資料,需要的朋友可以參考下
2017-06-06
javascript 中null和undefined區(qū)分和比較
這篇文章主要介紹了javascript 中null和undefined區(qū)分和比較的相關(guān)資料,需要的朋友可以參考下
2017-04-04
JS中完美兼容各大瀏覽器的scrolltop方法
最近用到scrolloTop()想去獲取滾動條距離頂部的距離，結(jié)果只有chrome下面可以正常的獲取scrollTop，ff和ie下這個值都等于0，使得許多效果比如屏幕滾動等等均無法正常實現(xiàn)。究其原因是scrollTop()在各個瀏覽器中的兼容性問題，今天我們就來詳細探討下。
2015-04-04
js核心基礎(chǔ)之構(gòu)造函數(shù)constructor用法實例分析
這篇文章主要介紹了js核心基礎(chǔ)之構(gòu)造函數(shù)constructor用法,結(jié)合具體實例形式分析了javascript構(gòu)造函數(shù)constructor概念、原理、使用方法及相關(guān)操作注意事項,需要的朋友可以參考下
2019-05-05
兩種JS實現(xiàn)屏蔽鼠標右鍵的方法
這篇文章主要介紹了兩種JS實現(xiàn)屏蔽鼠標右鍵的方法，瀏覽者在訪問你網(wǎng)頁的時候就不能點擊右鍵，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2015-08-08
webpack3里使用uglifyjs壓縮js時打包報錯的解決
這篇文章主要介紹了webpack3里使用uglifyjs壓縮js時打包報錯的解決，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-12-12
HTML5實現(xiàn)微信拍攝上傳照片功能
這篇文章主要介紹了HTML5實現(xiàn)微信拍攝上傳照片功能，實現(xiàn)HTML5 Canvas手機拍攝，本地壓縮上傳圖片時遇到問題的解決方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-04-04
javascript入門基礎(chǔ)之私有變量
開始接觸這門語言時，可能都會覺得這門語言缺少訪問控制符(如public、private、protected)，從而導(dǎo)致不能定義私有變量和私有方法。但經(jīng)過進一步了解就會知道javascript同樣可以有私有變量。
2010-02-02