国产爆乳无码一区二区麻豆,免费成人午夜视频,久久av秘一区二区三区

導(dǎo)讀網(wǎng)頁(yè)的本質(zhì)就是超級(jí)文本標(biāo)記語(yǔ)言，通過(guò)結(jié)合使用其他的Web技術(shù)（如：腳本語(yǔ)言、公共網(wǎng)關(guān)接口、組件等），可以創(chuàng)造出功能強(qiáng)大的網(wǎng)頁(yè)。因而，超級(jí)文本標(biāo)記語(yǔ)言是萬(wàn)維網(wǎng)（Web）編程的基礎(chǔ)，也就是說(shuō)萬(wàn)維網(wǎng)是建立...

網(wǎng)頁(yè)的本質(zhì)就是超級(jí)文本標(biāo)記語(yǔ)言，通過(guò)結(jié)合使用其他的Web技術(shù)（如：腳本語(yǔ)言、公共網(wǎng)關(guān)接口、組件等），可以創(chuàng)造出功能強(qiáng)大的網(wǎng)頁(yè)。因而，超級(jí)文本標(biāo)記語(yǔ)言是萬(wàn)維網(wǎng)（Web）編程的基礎(chǔ)，也就是說(shuō)萬(wàn)維網(wǎng)是建立在超文本基礎(chǔ)之上的。超級(jí)文本標(biāo)記語(yǔ)言之所以稱為超文本標(biāo)記語(yǔ)言，是因?yàn)槲谋局邪怂^“超級(jí)鏈接”點(diǎn)。

本篇文章給大家?guī)?lái)的內(nèi)容是關(guān)于使用css3和js實(shí)現(xiàn)一個(gè)鐘表代碼過(guò)程，有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你有所幫助。

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

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

　　　　　　使用css3和js實(shí)現(xiàn)一個(gè)鐘表代碼過(guò)程

首先,思考了一下頁(yè)面的布局,大致需要4層p,最底層是一個(gè)表盤(pán)的背景圖,然后其余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è)p是表中心那個(gè)小黑點(diǎn).

時(shí)針是60*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/表盤(pán).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 216000s 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 = (60/12) * ((hours%12) * 3600 + minuteAngle);

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

剛開(kāi)始的想法是讓這3層p旋轉(zhuǎn)對(duì)應(yīng)的角度,然后再開(kāi)始,后來(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)畫(huà)延遲,負(fù)數(shù)就表示提前開(kāi)始(比如-5s就表示動(dòng)畫(huà)從第5s的時(shí)間開(kāi)始),

剛好可以用到,讓這幾個(gè)指針提前開(kāi)始對(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í)間在鐘表的上面展示

下面是整理后的完整代碼,復(fù)制粘貼即可使用

CSS

body,html{
    margin:0;
}
.location{
    position: relative;
    width:600px;
    height:600px;
    left: calc(50% - 300px);
}
.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/表盤(pán).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 216000s 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); }
}
#dateshow{
    text-align: center;
}

html代碼

<h1 id="dateshow"></h1>
<div class="location">
<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>
</div>

js代碼

var dateshow = document.getElementById("dateshow");
var clock = {
    weeks : ["一","二","三","四","五","六","日"],
    getDate:function(){
        date = new Date();
        year = date.getFullYear();
        month = date.getMonth()+1;
        day = date.getDate();
        hours = date.getHours();
        minutes = date.getMinutes();
        seconds = date.getSeconds();
        week = date.getDay();    // 星期
        dateText = year+"年"+month+"月"+clock.format(day)+"日 星期"+clock.formatnum(week)+" "+
            clock.format(hours)+":"+clock.format(minutes)+":"+clock.format(seconds);
        return dateText;
    },
    format:function (data){
        if(data.toString().length == 1){
            data = "0" + data;
        };
        return data;
    },
    formatnum:function (num){
        return clock.weeks[num-1];
    },
    showdate:function (){
        dateshow.innerText = clock.getDate();
    },
    go:function (){
        var secondHand = document.getElementById("secondHand");
        var minuteHand = document.getElementById("minuteHand");
        var hourHand = document.getElementById("hourHand");
        date = new Date();
        hours = date.getHours();
        minutes = date.getMinutes();
        seconds = date.getSeconds();
        var secondAngle = seconds;
        var minuteAngle = minutes * 60 + seconds;
        var hourAngle = (60/12) * ((hours%12) * 3600 + minuteAngle);
        hourHand.style.cssText = "animation-delay: -"+ hourAngle +"s";
        minuteHand.style.cssText = "animation-delay: -"+ minuteAngle +"s";
        secondHand.style.cssText = "animation-delay: -"+ secondAngle +"s";
    }
    
}
clock.go();
clock.showdate();
setInterval("clock.showdate()",1000);

以上就是使用css3和js實(shí)現(xiàn)一個(gè)鐘表代碼過(guò)程的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！

網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語(yǔ)，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。

溫馨提示：喜歡本站的話，請(qǐng)收藏一下本站！

當(dāng)前位置:雨林木風(fēng)下載站 > 網(wǎng)頁(yè)設(shè)計(jì)教程 > 詳細(xì)頁(yè)面

使用css3與js完成一個(gè)鐘表代碼過(guò)程

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

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

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

本類教程下載

系統(tǒng)下載排行