資訊專欄INFORMATION COLUMN
摘要：創(chuàng)建一個的對象并且用三個變量分別表示小時分鐘秒并存放到一個函數(shù)中。
這就是我說的簡易的表盤，有點簡陋了 QaQ
剛學習的時鐘動畫，覺得還有很多東西要去學習，有時候發(fā)現(xiàn)代碼真是很神奇的。
首先呢 我們需要有一個圓的輪廓，這個就是定義一個div寬和高相同，然后用到了一個css3的屬性 border-radius：50% 50% 當然只要是大于等于50%都是可以成圓的。
輪廓做出來后我們需要插入60個表盤上的刻度。這個時候有兩種辦法
1.可以用dom進行插入
var oDial=document.getElementById("dial");
for(var i=0;i<60;i++) {
var oLi=document.createElement("li");
oDial.appendChild(oLi);
}
2.可以用html結(jié)構(gòu)插入
var Lis="";
for(var i=0;i<60;i++) {
Lis+="";
}
oDial.innerHTML=Lis;
表盤刻度插入以后呢我們需要對這60個刻度進行定位寫出旋轉(zhuǎn)的原點然后每個刻度都在上一個刻度的基礎(chǔ)上多旋轉(zhuǎn)6° 我們需要寫出表針用三個div分別表示時針 分針 秒針并且這三個需要在一個點上進行旋轉(zhuǎn) 那就是三個div的底部
然后我們應該知道現(xiàn)在所處的時間是多少 這是我們需要用到j(luò)s了。
創(chuàng)建一個Date的對象 并且用三個變量分別表示小時 分鐘 秒并存放到一個函數(shù)中。
var now=new Date();
var hour=now.getHours();
var second=now.getSeconds();
var minute=now.getMinutes();
當?shù)玫綍r間以后 得到這三個dom對象
var oSecond=document.getElementById("second");
var oMinute=document.getElementById("minute");
var oHour=document.getElementById("hour");
當?shù)玫竭@三個dom對象時需要進行轉(zhuǎn)動用到transform：rotate（度數(shù)）
oSecond.style.transform="rotate("+ second * 6+"deg)";
oMinute.style.transform="rotate("+ minute*6 +"deg)";
oHour.style.transform="rotate("+( hour*30+minute/60 *30 )+"deg)";
最后封裝好的函數(shù)run的代碼如下：
function run() {
var now=new Date();
var hour=now.getHours();
var second=now.getSeconds();
var minute=now.getMinutes();
oSecond.style.transform="rotate("+ second * 6+"deg)";
oMinute.style.transform="rotate("+ minute*6 +"deg)";
oHour.style.transform="rotate("+( hour*30+minute/60 *30 )+"deg)";
這樣只能轉(zhuǎn)動一次 我們需要開一個定時器把run這個函數(shù)放進去
setInterval(run,1000);html代碼：
css代碼
* {
padding: 0;
margin: 0;
}
#clock {
width: 200px;
height: 200px;
border-radius: 50%;
border: 1px solid ;
margin: 200px auto;
position: relative;
}
li {
list-style: none;
width: 2px;
height: 6px;
background: black;
position: absolute;
left: 100px;
top: 0;
transform-origin: 0 100px;
}
#dial li:nth-child(5n+1) {
height: 10px;
}
#clock div {
transform-origin: bottom;
}
#hour{
width: 4px;
height: 40px;
background: #000000;
position: absolute;
left: 98px;
top: 60px;
}
#minute{
width: 4px;
height: 60px;
background: #999;
position: absolute;
left: 98px;
top: 40px;
}
#second{
width: 2px;
height: 70px;
background: #ff0000;
position: absolute;
left: 99px;
top: 30px;
}
全部代碼:
Title
寫的不好 還望各位指出錯誤 共同進步。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/51088.html
摘要：簡易版時鐘時鐘清除畫布，每次執(zhí)行重新繪圖，解決時鐘模糊，邊框有鋸齒。 canvas 簡易版時鐘 showImg(https://segmentfault.com/img/bVDNx7?w=405&h=370); 時鐘 *{ margin:0; padding:0; } bod...
摘要：簡易版時鐘時鐘清除畫布，每次執(zhí)行重新繪圖，解決時鐘模糊，邊框有鋸齒。 canvas 簡易版時鐘 showImg(https://segmentfault.com/img/bVDNx7?w=405&h=370); 時鐘 *{ margin:0; padding:0; } bod...
摘要：時鐘的實現(xiàn)主要是應用上下文的簡單變換文本添加及周期性調(diào)用方法。在繪制表盤及時針過程注意使用及方法添加用以保存或返回上一個畫布設(shè)置屬性。思路編寫兩個構(gòu)造函數(shù)，分別代表表盤和時針，最后利用函數(shù)加以實現(xiàn)。 寫在之前 canvas 元素中提供了看似簡單的繪圖方法，但仔細挖掘，可以以此做出非常復雜而漂亮的圖形。隨著 API 的逐漸完善，我相信自己能進行更多有意思的嘗試。 時鐘的 canvas ...
閱讀 2000·2023-04-26 01:41
閱讀 2498·2021-11-24 09:39
閱讀 1936·2021-11-24 09:38
閱讀 1965·2021-11-19 09:40
閱讀 3786·2021-11-11 11:02
閱讀 3307·2021-10-20 13:48
閱讀 3191·2021-10-14 09:43
閱讀 4425·2021-09-02 15:11
