成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

用css3+js寫了一個(gè)鐘表

番茄西紅柿 / 1917人閱讀

摘要：有一天看到旋轉(zhuǎn)這個(gè)屬性突發(fā)奇想的寫了一個(gè)鐘表沒做瀏覽器兼容來(lái)一起看看是怎么寫的吧先給個(gè)成品圖最終結(jié)果是個(gè)樣子的動(dòng)態(tài)的首先思考了一下頁(yè)面的布局大致需要層最底層是一個(gè)表盤的背景圖然后其余層分別是時(shí)針分針秒針的圖層代碼如下變量名是隨便起的不要

有一天看到css3旋轉(zhuǎn)這個(gè)屬性,突發(fā)奇想的寫了一個(gè)鐘表(沒做瀏覽器兼容),來(lái)一起看看是怎么寫的吧!

先給個(gè)成品圖,最終結(jié)果是個(gè)樣子的(動(dòng)態(tài)的).

　　　　　　

首先,思考了一下頁(yè)面的布局,大致需要4層div,最底層是一個(gè)表盤的背景圖,然后其余3層分別是時(shí)針,分針,秒針的圖層.

html代碼如下 ↓

<div class="dial">
div>
<div class="bigdiv bigdiv1" id="secondHand">
    <div class="secondHand">div>
div>
<div class="bigdiv bigdiv2" id="minuteHand">
    <div class="minuteHand">div>
div>
<div class="bigdiv bigdiv3" id="hourHand">
    <div class="center">div>
    <div class="hourHand">div>
div>

變量名是隨便起的,不要介意; class=center的這個(gè)div是表中心那個(gè)小黑點(diǎn).

時(shí)針是12*60*60s轉(zhuǎn)一圈, 分針是60*60s轉(zhuǎn)一圈, 秒針是60s轉(zhuǎn)一圈, 所以css代碼如下 ↓

.dial{
    width:600px;
    height:600px;
    margin:0 auto;
    position: absolute;
    border-radius: 50%;
    overflow: hidden;
    background-color: rgba(153,50,204,0.2);
    background-image: url(img/表盤.jpg);
    background-size: 100% 100%;
}
.bigdiv{
    width:600px;
    height:600px;
    margin:0 auto;
    position: absolute;
    border-radius: 50%;
    overflow: hidden;
}
.bigdiv>div{
    position: absolute;
    left:298px;
    border-radius: 100px;
}
.bigdiv1{
    animation: moves 60s steps(60) infinite;
}
.bigdiv1 .secondHand{
    width:4px;
    height:250px;
    background-color: red;
    top:50px;
    left:298px;
}
.bigdiv2{
    animation: moves 3600s steps(3600) infinite;
}
.bigdiv2 .minuteHand{
    width:6px;
    height:180px;
    background-color: green;
    top:120px;
    left:297px;
}
.bigdiv3{
    animation: moves 43200s steps(216000) infinite;
}
.bigdiv3 .hourHand{
    width:8px;
    height:160px;
    background-color: orange;
    top:140px;
    left:296px;
    border-radius: 100px;
}
.bigdiv .center{
    top:290px;
    left:290px;
    width:20px;
    height:20px;
    background-color: black;
    z-index: 2;
}
@keyframes moves{
    from{ transform: rotateZ(0deg); }
    to{ transform: rotateZ(360deg); }
}

 

這一步做完后效果圖是這個(gè)樣子的:

然后用js計(jì)算當(dāng)前時(shí)間,

var date = new Date();
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();

然后計(jì)算當(dāng)前每個(gè)針的旋轉(zhuǎn)角度

var secondAngle = seconds;
var minuteAngle = minutes * 60 + seconds;
var hourAngle = 43200 * ((hours%12)/12) + minuteAngle;

現(xiàn)在的思路就是:每個(gè)針會(huì)按照自己定的時(shí)間轉(zhuǎn)一圈,初始角度也能知道,怎么組成一個(gè)顯示當(dāng)前時(shí)間的動(dòng)態(tài)鐘表呢?

剛開始的想法是讓這3層div旋轉(zhuǎn)對(duì)應(yīng)的角度,然后再開始,后來(lái)一想不行,因?yàn)樗€是固定的時(shí)間旋轉(zhuǎn)一周,指針指向會(huì)有偏差,

現(xiàn)在需要的是頁(yè)面進(jìn)來(lái)的第一圈旋轉(zhuǎn)固定角度,其余的按照原來(lái)固定的時(shí)間旋轉(zhuǎn)一周就行了,

css3里面有一個(gè)animation-delay屬性,它表示的意思是動(dòng)畫延遲,負(fù)數(shù)就表示提前開始(比如-5s就表示動(dòng)畫從第5s的時(shí)間開始),

剛好可以用到,讓這幾個(gè)指針提前開始對(duì)應(yīng)的角度.

js代碼如下↓

hourHand.style.cssText = "animation-delay: -"+ hourAngle +"s";
minuteHand.style.cssText = "animation-delay: -"+ minuteAngle +"s";
secondHand.style.cssText = "animation-delay: -"+ secondAngle +"s";

最后自己再加了個(gè)動(dòng)態(tài)時(shí)間在鐘表的上面展示

 

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/1780.html

相關(guān)文章

  • 用CSS3實(shí)現(xiàn)鐘表效果

    摘要：背景最近在學(xué)習(xí)，看到了一個(gè)小案例，通過自己的學(xué)習(xí)，動(dòng)手實(shí)現(xiàn)了它，現(xiàn)在把它分享出來(lái)。效果圖實(shí)現(xiàn)過程首先我們需要在頁(yè)面中寫出一個(gè)靜態(tài)的鐘表效果。并對(duì)其進(jìn)行簡(jiǎn)單樣式設(shè)置。 背景：最近在學(xué)習(xí)CSS3，看到了一個(gè)小案例，通過自己的學(xué)習(xí)，動(dòng)手實(shí)現(xiàn)了它，現(xiàn)在把它分享出來(lái)。 效果圖 showImg(https://segmentfault.com/img/bV5hBr?w=457&h=366); 實(shí)現(xiàn)...

    1treeS 評(píng)論0 收藏0

  • 用CSS3實(shí)現(xiàn)鐘表效果

    摘要：背景最近在學(xué)習(xí)，看到了一個(gè)小案例，通過自己的學(xué)習(xí)，動(dòng)手實(shí)現(xiàn)了它，現(xiàn)在把它分享出來(lái)。效果圖實(shí)現(xiàn)過程首先我們需要在頁(yè)面中寫出一個(gè)靜態(tài)的鐘表效果。并對(duì)其進(jìn)行簡(jiǎn)單樣式設(shè)置。 背景：最近在學(xué)習(xí)CSS3，看到了一個(gè)小案例，通過自己的學(xué)習(xí)，動(dòng)手實(shí)現(xiàn)了它，現(xiàn)在把它分享出來(lái)。 效果圖 showImg(https://segmentfault.com/img/bV5hBr?w=457&h=366); 實(shí)現(xiàn)...

    codergarden 評(píng)論0 收藏0

  • 用CSS3實(shí)現(xiàn)鐘表效果

    摘要：背景最近在學(xué)習(xí)，看到了一個(gè)小案例，通過自己的學(xué)習(xí)，動(dòng)手實(shí)現(xiàn)了它，現(xiàn)在把它分享出來(lái)。效果圖實(shí)現(xiàn)過程首先我們需要在頁(yè)面中寫出一個(gè)靜態(tài)的鐘表效果。并對(duì)其進(jìn)行簡(jiǎn)單樣式設(shè)置。 背景：最近在學(xué)習(xí)CSS3，看到了一個(gè)小案例，通過自己的學(xué)習(xí)，動(dòng)手實(shí)現(xiàn)了它，現(xiàn)在把它分享出來(lái)。 效果圖 showImg(https://segmentfault.com/img/bV5hBr?w=457&h=366); 實(shí)現(xiàn)...

    SimonMa 評(píng)論0 收藏0

  • （30個(gè)原生js挑戰(zhàn)）原生js實(shí)現(xiàn)鐘表

    摘要：緊接著昨天的實(shí)例，第二個(gè)是原生實(shí)現(xiàn)鐘表特效。然后根據(jù)鐘表中，角度和時(shí)間的算法關(guān)系。需要注意的是，我的算法和之前的算法不一樣，這個(gè)可以根據(jù)自己的想法實(shí)現(xiàn)，實(shí)現(xiàn)的效果是不一樣的。首先知道鐘表是，然后根據(jù)一個(gè)小時(shí)，來(lái)算出各個(gè)針的角度。 緊接著昨天的實(shí)例，第二個(gè)是原生js實(shí)現(xiàn)鐘表特效。首先介紹下大致思路，首先要用css把時(shí)針分針和秒針畫出來(lái)。然后根據(jù)鐘表中，角度和時(shí)間的算法關(guān)系。 設(shè)置角度。 ...

    pcChao 評(píng)論0 收藏0

  • （30個(gè)原生js挑戰(zhàn)）原生js實(shí)現(xiàn)鐘表

    摘要：緊接著昨天的實(shí)例，第二個(gè)是原生實(shí)現(xiàn)鐘表特效。然后根據(jù)鐘表中，角度和時(shí)間的算法關(guān)系。需要注意的是，我的算法和之前的算法不一樣，這個(gè)可以根據(jù)自己的想法實(shí)現(xiàn)，實(shí)現(xiàn)的效果是不一樣的。首先知道鐘表是，然后根據(jù)一個(gè)小時(shí)，來(lái)算出各個(gè)針的角度。 緊接著昨天的實(shí)例，第二個(gè)是原生js實(shí)現(xiàn)鐘表特效。首先介紹下大致思路，首先要用css把時(shí)針分針和秒針畫出來(lái)。然后根據(jù)鐘表中，角度和時(shí)間的算法關(guān)系。 設(shè)置角度。 ...

    taowen 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<