建站
咨詢
售后
建站咨詢
新聞中心
請教關于JavaScript中顯示時鐘的制作
樓上的說的系統(tǒng)時鐘跟樓主說的沒有關系, 只有Date.toLocaleDateString方法才跟系統(tǒng)時鐘有關系, checkTime方法只是判斷數(shù)值小于10時轉(zhuǎn)換成字符串
成都創(chuàng)新互聯(lián)是專業(yè)的漳縣網(wǎng)站建設公司，漳縣接單;提供網(wǎng)站制作、成都網(wǎng)站設計,網(wǎng)頁設計,網(wǎng)站設計,建網(wǎng)站,PHP網(wǎng)站建設等專業(yè)做網(wǎng)站服務;采用PHP框架,可快速的進行漳縣網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!
checkTime(0) = '00' //string類型
checkTime(9) = '09' //string類型
checkTime(10) = 10 //number類型
checkTime(59) = 59 //number類型
javascript是弱類型語言: 本例中 + 二元操作符兩個參其中之一是字符串則返回值是字符串
沒有h=checkTime(h)也可以讓時鐘小時的位置小于10的時候顯示的是07之類的?
可以
還有,這個是不是等于做了個ID選擇器?
跟ID選擇器沒有關系, 只是簡單的javascript字符串操作
js Canvas實現(xiàn)的日歷時鐘案例有哪些
一、.獲取上下文對象?
var cxt = document.getElementById(‘元素名’).getContect(‘2d’);?
IE8或更早的瀏覽器不支持元素。
二、 drawClock() – 實現(xiàn)畫時鐘?
1. clearRect() 清空給定矩形內(nèi)的指定像素。?
context.clearRect(x,y,width,height);
屬性 | ?值
-----|------------
x,y | 要清除的矩形左上角點的(x,y)坐標
width,height| 要清除的矩形寬度和高度，單位為像素12345
2.new Date() — 得到系統(tǒng)時間
var sec = now.getSeconds(); ?var min = now.getMinutes(); ?var hour = now.getHours(); ?123
3.畫時鐘的形狀
cxt.beginPath(); ?cxt.lineWidth = 10; ?cxt.strokeStyle = "blue"; ?cxt.arc(550, 310, 300, 0, 360, false); ?cxt.closePath(); ?cxt.stroke(); 123456
beginPath()的作用是canvas的繪制方法，都會以上一次beginPath之后的所有路徑為基礎進行繪制。
closepath()是關閉路徑，而不是結(jié)束路徑，它會試圖從當前路徑的終點連一條路徑到七、起點，讓整個路徑閉合起來。
cxt.lineWidth() ： 畫筆的寬度
cxt.strokeStyle() : 設置或返回用于筆觸的顏色、漸變或模式。
屬性值：color 指示繪圖筆觸顏色的 CSS 顏色值。默認值是 #000000。
gradient 用于填充繪圖的漸變對象（線性或放射性）
pattern 用于創(chuàng)建 pattern 筆觸的 pattern 對象
stroke ()繪制已定義的路徑
arc() 方法創(chuàng)建弧/曲線（用于創(chuàng)建圓或部分圓）。如需通過 arc() 來創(chuàng)建圓，請把起始角設置為 0，結(jié)束角設置為 2*Math.PI。?
context.arc(x,y,r,sAngle,eAngle,counterclockwise);
參數(shù)
描述
x ? ?圓的中心的 x 坐標。 ?
y ? ?圓的中心的 y 坐標。 ?
r ? ?圓的半徑。 ?
sAngle ? ?起始角，以弧度計。（弧的圓形的三點鐘位置是 0 度）。 ?
eAngle ? ?結(jié)束角，以弧度計。 ?
counterclockwise ? ?可選。規(guī)定應該逆時針還是順時針繪圖。False = 順時針，true = 逆時針。 ?
4）drawScale — 自定義函數(shù)畫刻度
function drawScale(size, width, color, value, startx, starty, endx, endy){ ?
for(var i = 0; i size; i++){ ?
?drawPointer(width, color, value, i, startx, starty, endx, endy); ?
} ?} ?12345
5. 畫時鐘刻度依托點
function drawPointer(width, color, value, angle, startx, starty, endx, endy){ ?
cxt.save(); ? ? ? ? ? ? ? ? //先保存當前畫布 ?
cxt.lineWidth = width; ? ? ?//設置畫筆的寬度 ?
cxt.strokeStyle = color; ? ?//設置畫筆的顏色 ?
cxt.translate(550, 310); ? ?//重置異次元空間的原點坐標 ?
cxt.rotate(value * angle * Math.PI / 180); ?//設置旋轉(zhuǎn)的角度，參數(shù)是弧度 ?
cxt.beginPath(); ?
cxt.moveTo(startx, starty); ?
cxt.lineTo(endx, endy); ?
cxt.closePath(); ? ? ? ? ? ?//先閉合路徑，再畫線 ?
cxt.stroke(); ? ? ? ? ? ? ? //開始畫線 ?
cxt.restore(); ? ? ? ? ? ? ?//將旋轉(zhuǎn)后的線段返回給畫布 ?} ?12345678910111213
translate() 方法重新映射畫布上的 (0,0) 位置。
-
JS代碼如下：
//獲取上下文文檔對象 ?var clock = document.getElementById('clock'); ?
var cxt = clock.getContext('2d'); ?
//畫指針 ?function drawPointer(width, color, value, angle, startx, starty, endx, endy){ ?
cxt.save(); ? ? ? ? ? ? ? ? //先保存當前畫布 ?
cxt.lineWidth = width; ? ? ?//設置畫筆的寬度 ?
cxt.strokeStyle = color; ? ?//設置畫筆的顏色 ?
cxt.translate(550, 310); ? ?//重置異次元空間的原點坐標 ?
cxt.rotate(value * angle * Math.PI / 180); ?//設置旋轉(zhuǎn)的角度，參數(shù)是弧度 ?
cxt.beginPath(); ?
cxt.moveTo(startx, starty); ?
cxt.lineTo(endx, endy); ?
cxt.closePath(); ? ? ? ? ? ?//先閉合路徑，再畫線 ?
cxt.stroke(); ? ? ? ? ? ? ? //開始畫線 ?
cxt.restore(); ? ? ? ? ? ? ?//將旋轉(zhuǎn)后的線段返回給畫布 ?} ?
//畫刻度 ?function drawScale(size, width, color, value, startx, starty, endx, endy){ ?
for(var i = 0; i size; i++){ ?
?drawPointer(width, color, value, i, startx, starty, endx, endy); ?
} ?
} ?
//為表盤的中心填充顏色 ?function drawFill(){ ?
cxt.save(); ?
cxt.beginPath(); ?
cxt.arc(550, 310, 7, 0, 360, false); ?
cxt.closePath(); ?
cxt.fillStyle = "red"; ?
cxt.fill(); ?
cxt.restore(); ?
} ?
//畫時鐘 ?function drawClock(){ ?
cxt.clearRect(0, 0, 1350, 620); ?//清空整個畫布 ?
var now = new Date(); ? ? ? ? ? ?//獲取系統(tǒng)時間，取出時,分,秒 ?
var sec = now.getSeconds(); ?
var min = now.getMinutes(); ?
var hour = now.getHours(); ?
min += sec / 60; ?
hour += min / 60; ?
if(hour 12) hour -= 12; ?
cxt.beginPath(); ?
cxt.lineWidth = 10; ?
cxt.strokeStyle = "blue"; ?
cxt.arc(550, 310, 300, 0, 360, false); ?
cxt.closePath(); ?
cxt.stroke(); ?
drawScale(12, 7, "pink", 30, 0, -280, 0, -260); ? ? ?//畫時刻度 ?
drawScale(60, 5, "pink", 6, ?0, -280, 0, -270); ? ? ?//畫分刻度 ?
drawPointer(7, "purple", hour, 30, 0, 12, 0, -210); ?//畫時針 ?
drawPointer(5, "yellow", min, 6, 0, 15, 0, -240); ? ?//畫分針 ?
drawPointer(4, "red", sec, 6, 0, 17, 0, -250); ? ? ? //畫秒針 ?
//細化秒針,為秒針加箭頭 ?
drawPointer(3, "red", sec, 6, -7, -235, 0, -255); ?
drawPointer(3, "red", sec, 6, 7, -235, 0, -255); ?
drawFill(); ?
} ?
drawClock(); ?
setInterval(drawClock, 1000); ? //setInterval()方法中表示每隔1000ms，就執(zhí)行drawClock一次 ?1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
JavaScript 如何實現(xiàn)的簡單時鐘？
背景時鐘
====1、以下是這個效果的全部代碼。[最好從一個空頁面開始]
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畫鐘,javascript鐘表效果
文章地址：http://fisionsoft.com.cn/article/dsccogd.html
