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

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

什么是css

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

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

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

html代碼如下：

代碼如下:

<div class="main">
       <div id="timeLabel"></div>
       <div id="hour"></div>
       <div id="minute"></div>
       <div id="second"></div>
   </div>

css 代碼如下：

代碼如下:

 <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;
        }
        #timeLabel {
            position: absolute;
            background-color:pink;
            width:100px;
            height:30px;
            left:100px;
            top:180px;
        }
        #hour {
            width: 100px;
            height: 10px;
            background-color: red;
            position:absolute;
            left:150px;
            top:145px;
        }
        #minute {
            width:120px;
            height:8px;
            background-color:blue;
            position:absolute;
            left:150px;
            top:146px;
        }
        #second {
            width: 140px;
            height: 4px;
            background-color: green;
            position: absolute;
            left: 150px;
            top: 148px;
        }
    </style>

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

更改后的css代碼：

代碼如下:

<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>

初始化 js代碼：

代碼如下:

window.onload = function () {
           initClock();
       }
       var timer = null;
       function $(id) {
           return document.getElementById(id)
       }
       function CreateKeDu(pElement, className, deg, translateWidth) {
           var Pointer = document.createElement("div");
           Pointer.className = className
           Pointer.style.transform = "rotate(" + deg + "deg)   translate(" + translateWidth + "px)";
           pElement.appendChild(Pointer);
       }
       function initClock() {
           var main = $("biaopan");
           var timeLabel = $("timeLabel");
           var hour = $("hour");
           var minute = $("minute");
           var second = $("second");
           var now = new Date();
           var nowHour = now.getHours();
           var nowMinute = now.getMinutes();
           var nowSecond = now.getSeconds();
           //初始化timeLabel
           timeLabel.innerHTML = nowHour + ":" + nowMinute + ":" + nowSecond;
           //初始化表盤(pán)
           for (var index = 0; index < 4; index++) {
               CreateKeDu(main, "hourPointer", index * 90, 138);
           }
           for (var index = 0; index < 12; index++) {
               CreateKeDu(main, "minuterPointer",index*30, 140);
           }
           for (var index = 0; index < 60; index++) {
               CreateKeDu(main, "secondPointer", index * 6, 142);
           }
           //初始化時(shí)分秒針
           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)";
       }

3.添加定時(shí)器：

js代碼如下：

代碼如下:

//定時(shí)器
       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代碼如下：

代碼如下:

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;
           //初始化表盤(pán)
           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);
       }

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

代碼如下:

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

最終頁(yè)面代碼：

代碼如下:

<!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;
           //初始化表盤(pán)
           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的位移效果。

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

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

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

廣告

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