css3+js繪制動態(tài)時鐘的示例代碼-創(chuàng)新互聯(lián)

這篇文章主要介紹了css3+js繪制動態(tài)時鐘的示例代碼，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

專注于為中小企業(yè)提供網(wǎng)站建設(shè)、做網(wǎng)站服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)高青免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了上1000+企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

先看看效果圖：

css3+js繪制動態(tài)時鐘的示例代碼

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

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的這個div是表中心那個小黑點.

時針是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/表盤.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); }
}

這一步做完后效果圖是這個樣子的:

css3+js繪制動態(tài)時鐘的示例代碼

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

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

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

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

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

剛開始的想法是讓這3層div旋轉(zhuǎn)對應(yīng)的角度,然后再開始,后來一想不行,因為它還是固定的時間旋轉(zhuǎn)一周,指針指向會有偏差,

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

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

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

js代碼如下：

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

最后自己再加了個動態(tài)時間在鐘表的上面展示

完整代碼：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			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/表盤.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;
			}
		</style>

	</head>

	<body>
		<h2 id="dateshow"></h2>
		<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>
		<script>
			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);
		</script>
	</body>

</html>

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“css3+js繪制動態(tài)時鐘的示例代碼”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司，關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、網(wǎng)站設(shè)計器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

分享名稱：css3+js繪制動態(tài)時鐘的示例代碼-創(chuàng)新互聯(lián)
新聞來源：http://aaarwkj.com/article32/dihepc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、ChatGPT、網(wǎng)站策劃、網(wǎng)站內(nèi)鏈、網(wǎng)站設(shè)計公司、域名注冊

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

css3+js繪制動態(tài)時鐘的示例代碼-創(chuàng)新互聯(lián)