您現在的位置是:電腦技術吧?>? 編程技術 ??>??時鐘html,html時鐘代碼??>??正文詳情

時鐘html,html時鐘代碼

運傲菡2019-11-17 19:30:35 人圍觀
簡介動態時鐘htmlCanvas id=clock width=500 height=500 style=背景色:黃色/畫布代碼如下:varclock=document.getelhtml5時鐘運行動畫

canvas id=clock width=500 height=500 style=background-color: yellow/canvas代碼如下:var clock=document.getElementById(clock);var cxt=clock.getContext(2d);function drawNow(){var now=new Date();var hour=now.getHours();var min=now.getMinutes();var sec=now.getSeconds();hour=hour12?hour-12:hour;hour=hour min/60;//表盤(藍色)cxt.lineWidth=10;cxt.strokeStyle=bluecxt.beginPath();cxt.arc(250,250,200,0,360,false);cxt.closePath();cxt.stroke();//刻度//時刻度for(var i=0;i12;i ){cxt.save();cxt.lineWidth=7;cxt.strokeStyle=black;cxt.translate(250,250);cxt.rotate(i*30*Math.PI/180);//旋轉角度 角度*Math.PI/180=弧度cxt.beginPath();cxt.moveTo(0,-170);cxt.lineTo(0,-190);cxt.closePath();cxt.stroke();cxt.restore();}//分刻度for(var i=0;i60;i ){cxt.save();//設置分刻度的粗細cxt.lineWidth=5;//重置畫布原點cxt.translate(250,250);//設置旋轉角度cxt.rotate(i*6*Math.PI/180);//畫分針刻度cxt.strokeStyle=black;cxt.beginPath();cxt.moveTo(0,-180);cxt.lineTo(0,-190);cxt.closePath();cxt.stroke();cxt.restore();}//時針cxt.save();// 設置時針風格cxt.lineWidth=7;cxt.strokeStyle=black;cxt.translate(250,250);cxt.rotate(hour*30*Math.PI/180);cxt.beginPath();cxt.moveTo(0,-140);cxt.lineTo(0,10);cxt.closePath();cxt.stroke();cxt.restore();//分針cxt.save();cxt.lineWidth=5;cxt.strokeStyle=black;//設置異次元空間分針畫布的中心cxt.translate(250,250);cxt.rotate(min*6*Math.PI/180);cxt.beginPath();cxt.moveTo(0,-160);cxt.lineTo(0,15);cxt.closePath();cxt.stroke()cxt.restore();//秒針cxt.save();//設置秒針的風格//顏色:紅色cxt.strokeStyle=red;cxt.lineWidth=3;//重置原點cxt.translate(250,250);//設置角度//cxt.rotate(330*Math.PI/180);cxt.rotate(sec*6*Math.PI/180);cxt.beginPath();cxt.moveTo(0,-170);cxt.lineTo(0,20);cxt.closePath();cxt.stroke();//畫出時針,分針,秒針的交叉點cxt.beginPath();cxt.arc(0,0,5,0,360,false);cxt.closePath();//設置填充cxt.fillStyle=gray;cxt.fill();//cxt.strokeStyle=red;cxt.stroke();//畫出秒針的小圓點cxt.beginPath();cxt.arc(0,-140,5,0,360,false);cxt.closePath();//設置填充cxt.fillStyle=gray;cxt.fill();//cxt.strokeStyle=red;cxt.stroke();/p p cxt.restore();/p p}function drawClock(){cxt.clearRect(0,0,500,500);drawNow();}drawNow();setInterval(drawClock,1000);

版權聲明:本文由 運傲菡 整理編輯。

原標題:html編寫一個時鐘,html5文字時鐘

轉載注明出處:http://www.dn9ww09s.icu/program/13263.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 迅雷x和迅雷影音區別,迅雷影音

    迅雷x和迅雷影音區別,迅雷影音 相關圖片迅雷看看好用安裝迅雷時,迅雷通常會給你一個桶給你的家人,并自動安裝迅雷的迅雷視頻和迅雷視頻進行查看,并關聯你的本地視頻。但是,作為一款能夠觀看視頻的軟件,有些用戶...

  • 文件域,html文件域

    文件域,html文件域 相關圖片通過域如何把文件拷貝到桌面如果需要將整個文件傳輸到服務器,可以通過在表單中創建文件字段來完成此操作。若要使用文件字段,必須將窗體設置為“發布”。訪問者可以將文件上...

  • 運行chkdsk工具修復,chkdsk修復不了

    運行chkdsk工具修復,chkdsk修復不了 相關圖片chkdsk命令修復當您的系統被關閉或非法關閉時,它將對系統造成一些損壞。在這種情況下,需要CHKDSK工具。CHKDSK工具通常用于檢查分區和驗證文件系統的邏輯完整性。所以,chchkdsk工具怎...

  • Adobe imageready,imageready在ps哪里

    Adobe imageready,imageready在ps哪里 相關圖片imageready修改圖片ImageReady是adobe下的一個圖像編輯軟件,主要處理網絡圖形。有些人認為ImageReady很奇怪,因為它在早期是一個獨立的軟件,但是在Photoshps的imageready在哪...

  • html canvas,html2canvas

    html canvas,html2canvas 相關圖片html2canvas沒有樣式Canvas id=Canvas width=500 height=500 style=background color:yellow;/畫布代碼如下:varchtml解析 canvas...

  • bt文件如何打開文件,torrent文件手機怎么打開

    bt文件如何打開文件,torrent文件手機怎么打開 相關圖片torrent手機 怎么打開在百度云問世之前,在下載資源的過程中經常會遇到torrent文件。即使現在百度云資源猖獗,因為其下載速度太慢,所以還是有很多人愿意用torrent文件下載Tor百度云...

  • 字符串換行,字符串內換行

    字符串換行,字符串內換行 相關圖片js拼接字符串換行通常從DW復制一段HTML代碼(比如table)并將其用作字符串。習慣性地粘貼到記事本中,用兩個雙引號替換一個雙引號,刪除換行符,連接,復制并粘貼回DW中。但是字符...

  • 金山游俠v 序列號,金山游俠v5序列號

    金山游俠v 序列號,金山游俠v5序列號 相關圖片金山游俠v如何修改英雄聯盟幾年前,當我們談到游戲輔助時,很多人都會提到一個軟件:金山游騎兵。游戲關卡的變形讓人質墻分離的時候有很多次。在這個時候,金山游戲通常是打開...

  • 電腦上安裝不了itunes怎么辦,電腦itunes無法安裝

    電腦上安裝不了itunes怎么辦,電腦itunes無法安裝 相關圖片itunes安裝器當蘋果手機用戶想要通過電腦管理手機時,他們必須使用iTunes。但是,有許多小合作伙伴報告說,他們已經安裝了iTunes,并且總是在安裝iTunes時提示錯誤。itunes無法安裝的原...

  • css瀏覽器,css如何區分瀏覽器

    css瀏覽器,css如何區分瀏覽器 相關圖片ie瀏覽器支持css3嗎!DOCTYPE HTML PUBLIC-//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/css瀏覽器兼容前綴...

熱評文章

  • ipad cellular實用嗎,cellular中文意思

    ipad cellular實用嗎,cellular中文意思 相關圖片網絡cellular當我們從iPad開始,熟悉這個的小朋友會提醒我們注意iPad的版本。當談到iPad的版本時,有人提到了手機版。手機版是什么意思texcellular什么意思...

  • 網頁文本框無法輸入文字,文本框無法輸入

    網頁文本框無法輸入文字,文本框無法輸入 相關圖片軟件文本框輸入卡不能輸入信息方法1和方法4只能輸入數字輸入類型=textonkeypress='return/^D$/。測試(字符串。Fromcharcode(事件。Keycode))'輸文本框不能輸入文字...

  • 應用程序異常unknown,應用程序異常0xc0000409

    應用程序異常unknown,應用程序異常0xc0000409 相關圖片應用程序異常怎么解決在計算機上運行程序時,必須有大量用戶在應用程序中有異常。在這種情況下,或者。未安裝Net framework或注冊表錯誤。當這種情況發生時,如何解決?應用程序發...

  • draw的用法,draw的用法和意思

    draw的用法,draw的用法和意思 相關圖片draw的名詞分析了在HTML5中使用drawinimage存在的問題及解決方法。與您分享以供參考。具體分析如下:使用鏡像時遇到的問題:代碼如下:!Doctypehtmlhtdraw picture...

  • facetime要錢么,facetime要不要錢

    facetime要錢么,facetime要不要錢 相關圖片facetime怎么用FaceTime是蘋果操作系統中內置的視頻通話軟件。只要蘋果的設備上安裝了FaceTime,支持蘋果ID登錄和正常網絡,你就可以通過FaceTime FA進行視facetime怎么用不了...

  • 迅雷離線下載取消了嗎,迅雷9離線下載沒了

    迅雷離線下載取消了嗎,迅雷9離線下載沒了 相關圖片迅雷x離線下載在哪離線下載是迅雷非常重要的功能。不過,仍有很多朋友不知道如何離線下載。迅雷離線下載是什么意思?現在,超人軟件將為您帶來迅雷網下下載的相關內容。希望你...

  • 邊框簡單又漂亮,邊框簡單

    邊框簡單又漂亮,邊框簡單 相關圖片花紋邊框簡單又漂亮首先,讓我們看看效果。我會告訴你一些可能不清楚的事情,特別是簡單的,為了不浪費大家的時間,灰色四邊形是一個矩形移動節點:為了使四邊形按鈕具有某種...

  • 360網頁收藏夾位置,360瀏覽器 收藏夾路徑

    360網頁收藏夾位置,360瀏覽器 收藏夾路徑 相關圖片360收藏夾網頁版最近,許多360瀏覽器用戶報告他們的瀏覽器收藏夾突然丟失,他們找不到他們最喜歡的內容。那么360瀏覽器的最愛在哪里呢?如果它們不見了,我怎么能把它們復原呢?...

  • 游覽器和瀏覽器的區別,360瀏覽器和ie瀏覽器的區別

    游覽器和瀏覽器的區別,360瀏覽器和ie瀏覽器的區別 相關圖片x瀏覽器不同的瀏覽器,CSS黑客寫作,從互聯網上看了很多文章,現在總結一下,盡量全面,供以后參考。注意,下面描述的黑客只適用于XHTML1.0。如果你不加!DOCTYPChromium瀏覽器...

  • 迅雷9的網頁怎么關閉,迅雷網頁怎么關閉

    迅雷9的網頁怎么關閉,迅雷網頁怎么關閉 相關圖片迅雷手機網頁版登錄迅雷一直是一款熱門的下載軟件,但最近,很多小伙伴都反映迅雷9號右側的網絡廣告太煩人了。那么迅雷9如何關閉正確的網頁呢?霹靂九號如何關閉正確的廣告?接...

關注微信

变脸官网查询