CSS3+js如何實現(xiàn)簡單的時鐘特效-創(chuàng)新互聯(lián)

小編給大家分享一下CSS3+js如何實現(xiàn)簡單的時鐘特效，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

我們注重客戶提出的每個要求，我們充分考慮每一個細(xì)節(jié)，我們積極的做好成都網(wǎng)站制作、成都做網(wǎng)站、外貿(mào)營銷網(wǎng)站建設(shè)服務(wù)，我們努力開拓更好的視野，通過不懈的努力，創(chuàng)新互聯(lián)建站贏得了業(yè)內(nèi)的良好聲譽，這一切，也不斷的激勵著我們更好的服務(wù)客戶。主要業(yè)務(wù)：網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)站設(shè)計,微信小程序開發(fā),網(wǎng)站開發(fā),技術(shù)開發(fā)實力，DIV+CSS，PHP及ASP，ASP.Net，SQL數(shù)據(jù)庫的技術(shù)開發(fā)工程師。

什么是css

css是一種用來表現(xiàn)HTML或XML等文件樣式的計算機(jī)語言，主要是用來設(shè)計網(wǎng)頁的樣式，使網(wǎng)頁更加美化。它也是一種定義樣式結(jié)構(gòu)如字體、顏色、位置等的語言，并且css樣式可以直接存儲于HTML網(wǎng)頁或者單獨的樣式單文件中，而樣式規(guī)則的優(yōu)先級由css根據(jù)這個層次結(jié)構(gòu)決定，從而實現(xiàn)級聯(lián)效果，發(fā)展至今，css不僅能裝飾網(wǎng)頁，也可以配合各種腳本對于網(wǎng)頁進(jìn)行格式化。

學(xué)習(xí)css3ing，正在學(xué)習(xí)transfomr，突發(fā)奇想用此做個小時鐘，開始吧：

準(zhǔn)備前期工作，把時鐘的表盤，時分秒針，實時時間標(biāo)簽的大概樣子做好，效果如圖：

CSS3+js如何實現(xiàn)簡單的時鐘特效

html代碼如下：

代碼如下:

css 代碼如下：

代碼如下:

2. 初始化默認(rèn)時間，和表盤刻度，效果如下：

CSS3+js如何實現(xiàn)簡單的時鐘特效

更改后的css代碼：

代碼如下:

初始化 js代碼：

代碼如下:

3.添加定時器：

js代碼如下：

代碼如下:

//定時器
function startMove() {
clearInterval(timer);
timer = setInterval(function () {
var now = new Date();
var nowSecond = now.getSeconds();
var nowMinute = now.getMinutes();
var nowHour = now.getHours();
second.style.transform = "rotate(" + (nowSecond * 6 - 90) + "deg)";
minute.style.transform = "rotate(" + (nowMinute * 6 + 1 / 10 * nowSecond - 90) + "deg)";
hour.style.transform = "rotate(" + (nowHour * 30 + 1 / 2 * nowMinute + 1 / 120 * nowSecond - 90) + "deg)";
timeLabel.innerHTML = nowHour + ":" + nowMinute + ":" + nowSecond;
}, 1000);
}

4.使用OOP方式更改：

修改后的js代碼如下：

代碼如下:

最后調(diào)用如下：

代碼如下:

window.onload = function () {
new Clock();
}

最終頁面代碼：

代碼如下:

<!DOCTYPE html>
<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.main {
position: relative;
margin: 100px auto;
width: 300px;
height: 300px;
border-radius: 300px;
border: 1px solid #000;
box-shadow: 2px 5px #808080;
}
#timeLabel {
position: absolute;
background-color: pink;
width: 80px;
height: 25px;
left: 110px;
top: 180px;
color: #fff;
line-height: 25px;
text-align: center;
}
#hour {
width: 100px;
height: 10px;
background-color: red;
position: absolute;
left: 150px;
top: 145px;
transform-origin: 0 50%;
}
#minute {
width: 120px;
height: 8px;
background-color: blue;
position: absolute;
left: 150px;
top: 146px;
transform-origin: 0 50%;
}
#second {
width: 140px;
height: 4px;
background-color: green;
position: absolute;
left: 150px;
top: 148px;
transform-origin: 0 50%;
}
.hourPointer, .minuterPointer, .secondPointer {
position: absolute;
transform-origin: 0 50%;
}
.hourPointer {
height: 10px;
width: 12px;
left: 150px;
top: 145px;
background-color: #f00;
z-index: 3;
}
.minuterPointer {
height: 8px;
width: 10px;
left: 150px;
top: 146px;
background-color: #b6ff00;
z-index: 2;
}
.secondPointer {
height: 6px;
width: 8px;
left: 150px;
top: 147px;
background-color: #fa8;
z-index: 1;
}
</style>
<script>
function Clock() {
//定義屬性
this.main = this.$("biaopan");
this.timeLabel = this.$("timeLabel");
this.hour = this.$("hour");
this.minute = this.$("minute");
this.second = this.$("second");
this.nowHour = null;
this.nowMinute = null;
this.nowSecond = null;
this.timer = null;
var _this = this;
//初始化函數(shù)
var init = function () {
_this.getNowTime();
_this.initClock();
_this.InterVal();
}
init();
}
Clock.prototype.$ = function (id) {
return document.getElementById(id)
}
Clock.prototype.CreateKeDu = function (className, deg, translateWidth) {
var Pointer = document.createElement("div");
Pointer.className = className
Pointer.style.transform = "rotate(" + deg + "deg) translate(" + translateWidth + "px)";
this.main.appendChild(Pointer);
}
Clock.prototype.getNowTime = function () {
var now = new Date();
this.nowHour = now.getHours();
this.nowMinute = now.getMinutes();
this.nowSecond = now.getSeconds();
}
Clock.prototype.setPosition = function () {
this.second.style.transform = "rotate(" + (this.nowSecond * 6 - 90) + "deg)";
this.minute.style.transform = "rotate(" + (this.nowMinute * 6 + 1 / 10 * this.nowSecond - 90) + "deg)";
this.hour.style.transform = "rotate(" + (this.nowHour * 30 + 1 / 2 * this.nowMinute + 1 / 120 * this.nowSecond - 90) + "deg)";
}
Clock.prototype.initClock = function () {
//初始化timeLabel
this.timeLabel.innerHTML = this.nowHour + ":" + this.nowMinute + ":" + this.nowSecond;
//初始化表盤
for (var index = 0; index < 4; index++) {
this.CreateKeDu("hourPointer", index * 90, 138);
}
for (var index = 0; index < 12; index++) {
this.CreateKeDu("minuterPointer", index * 30, 140);
}
for (var index = 0; index < 60; index++) {
this.CreateKeDu("secondPointer", index * 6, 142);
}
this.setPosition();
}
Clock.prototype.InterVal = function () {
clearInterval(this.timer);
var _this = this;
this.timer = setInterval(function () {
_this.getNowTime();
_this.second.style.transform = "rotate(" + (_this.nowSecond * 6 - 90) + "deg)";
_this.minute.style.transform = "rotate(" + (_this.nowMinute * 6 + 1 / 10 * _this.nowSecond - 90) + "deg)";
_this.hour.style.transform = "rotate(" + (_this.nowHour * 30 + 1 / 2 * _this.nowMinute + 1 / 120 * _this.nowSecond - 90) + "deg)";
_this.timeLabel.innerHTML = _this.nowHour + ":" + _this.nowMinute + ":" + _this.nowSecond;
}, 1000);
}
window.onload = function () {
new Clock();
}
</script>
</head>
<body>
<div class="main" id="biaopan">
<div id="timeLabel"></div>
<div id="hour"></div>
<div id="minute"></div>
<div id="second"></div>
</div>
</body>
</html>

總結(jié)：本例中使用了css3 的transform屬性中的 rotate的旋轉(zhuǎn)效果和translate的位移效果。

看完了這篇文章，相信你對“CSS3+js如何實現(xiàn)簡單的時鐘特效”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

新聞名稱：CSS3+js如何實現(xiàn)簡單的時鐘特效-創(chuàng)新互聯(lián)
URL分享：http://muchs.cn/article44/dpsoee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、小程序開發(fā)、動態(tài)網(wǎng)站、網(wǎng)站維護(hù)、電子商務(wù)、Google

聲明：本網(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)容