又一款js時(shí)鐘!transform實(shí)現(xiàn)時(shí)鐘效果
更新時(shí)間：2016年08月15日 08:55:46 作者：小數(shù)點(diǎn)就是問(wèn)題
又一款js時(shí)鐘!這篇文章主要為大家詳細(xì)介紹了transform實(shí)現(xiàn)的時(shí)鐘效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
又來(lái)一個(gè)時(shí)鐘效果了，這個(gè)的實(shí)現(xiàn)不需要canvas，都是div、ul、li畫(huà)出的，好玩有真實(shí)。
哈哈~
需要的js才能實(shí)現(xiàn)到走動(dòng)這個(gè)效果，但js的內(nèi)容不多，也不難。
主要是一個(gè)css里transform的使用的思路，transform里有很多變幻屬性，而普通的時(shí)鐘
在我心中就是個(gè)圓圓的東西，那么是不是可以旋轉(zhuǎn)這個(gè)屬性（rotate）實(shí)現(xiàn)了，它的刻度
使用旋轉(zhuǎn)且把旋轉(zhuǎn)點(diǎn)設(shè)置在圓心，那不就可以繞著圓心轉(zhuǎn)了嗎，而時(shí)針?biāo)鼈兊牡撞坎皇呛?br />
圓心接觸的嗎，那么設(shè)置時(shí)針的底部為旋轉(zhuǎn)點(diǎn)不就OK了，大概的說(shuō)了說(shuō)思路。
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transform</title>
<style id="css">
#clock{
width: 200px;
height: 200px;
border: 2px solid #000;
border-radius: 50%;
margin: 100px auto 0;
position: relative;
}
#clock ul{
width: 200px;
height: 200px;
position: relative;
list-style: none;
padding:0;
margin: 0;
}
#clock ul li{
width: 2px;
height: 10px;
background: #000;
transform-origin: center 100px;
position: absolute;
top: 0;
left: 50%;
}
#clock ul li:nth-of-type(5n+1){
height: 20px;
}
#hour{
height: 40px;
width: 4px;
background: #00fefe;
position: absolute;
top: 60px;
left: 99px;
transform-origin:center bottom;
}
#min{
height: 60px;
width: 3px;
background: #001afe;
position: absolute;
top: 40px;
left: 99px;
transform-origin: center bottom;
transform: rotate(15deg);
}
#sec{
height: 70px;
width: 2px;
background: #000;
position: absolute;
top: 30px;
left: 99px;
transform-origin:center bottom;
}
#dot{
width: 10px;
height: 10px;
position: absolute;
left: 95px;
top: 95px;
background: #aaa;
border-radius: 50%;
}
</style>
</head>
<body>
<div id="clock">
<ul></ul>
<div id="hour"></div>
<div id="min"></div>
<div id="sec"></div>
<div id="dot"></div>
</div>
<script>
var oCss=document.getElementById("css");
var oClock=document.getElementById("clock");
var oUl=oClock.getElementsByTagName("ul")[0];
var oHour=document.getElementById("hour");
var oMin=document.getElementById("min");
var oSec=document.getElementById("sec");
var strLi="";
var strCss="";
for(var i=0;i<60;i++){
strLi+="<li></li>";
}
oUl.innerHTML=strLi;
for(var i=0;i<60;i++){
strCss+='#clock ul li:nth-of-type('+(i+1)+'){transform:rotate('+i*6+'deg);}';
}
oCss.innerHTML+=strCss;
time();
setInterval(time,1000);
function time(){
var date=new Date();
var h=date.getHours();
var m=date.getMinutes();
var s=date.getSeconds();
oHour.style.transform="rotate("+(h+m/60)*30+"deg)";
oMin.style.transform="rotate("+(m+s/60)*6+"deg)";
oSec.style.transform="rotate("+s*6+"deg)";
}
</script>
</body>
</html>
使用標(biāo)簽畫(huà)圖最主要的是定位，因?yàn)檫@樣我們就可以把弄到形狀的盒子放到你所想要的位置，內(nèi)部css樣式表是可以使用獲取元素的方式獲取的，這樣就可以 使用innerHTML為其添加樣式，且可以循環(huán)添加，還有因?yàn)榭潭忍嗨允褂醚h(huán)添加，這樣省時(shí)省力，至于剩下的就是定時(shí)器了，給定好1秒的時(shí)間，每1 秒執(zhí)行一次函數(shù)，這樣它就是動(dòng)起來(lái)了。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 基于css3新屬性transform及原生js實(shí)現(xiàn)鼠標(biāo)拖動(dòng)3d立方體旋轉(zhuǎn)
- 淺談javascript獲取元素transform參數(shù)
- 用js實(shí)現(xiàn)的模擬jquery的animate自定義動(dòng)畫(huà)(2.5K)
- 圖片的左右移動(dòng)，js動(dòng)畫(huà)效果實(shí)現(xiàn)代碼
- 九種原生js動(dòng)畫(huà)效果
- javascript判斷css3動(dòng)畫(huà)結(jié)束 css3動(dòng)畫(huà)結(jié)束的回調(diào)函數(shù)
- js動(dòng)畫(huà)(animate)簡(jiǎn)單引擎代碼示例
- JS判斷頁(yè)面加載狀態(tài)以及添加遮罩和緩沖動(dòng)畫(huà)的代碼
- 實(shí)現(xiàn)動(dòng)畫(huà)效果核心方式的js代碼
- JS實(shí)現(xiàn)超炫網(wǎng)頁(yè)煙花動(dòng)畫(huà)效果的方法
- javascript與css3動(dòng)畫(huà)結(jié)合使用小結(jié)
- js動(dòng)畫(huà)效果打開(kāi)層 關(guān)閉層
- JS實(shí)現(xiàn)動(dòng)畫(huà)兼容性的transition和transform實(shí)例分析
相關(guān)文章
js showModalDialog參數(shù)的使用詳解
本篇文章主要是對(duì)js中showModalDialog參數(shù)的使用進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-01-01
JS實(shí)現(xiàn)簡(jiǎn)單網(wǎng)頁(yè)倒計(jì)時(shí)器
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)簡(jiǎn)單網(wǎng)頁(yè)倒計(jì)時(shí)器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
公司原先的JS和CSS文件都是用在線壓縮程序壓縮的，看似方便，但很容易出錯(cuò)，可能是壓縮程序把CSS里面的一些Hack語(yǔ)句給混淆了，于是我決定用大名鼎鼎的YUI compressor。
2011-01-01 
這篇文章主要介紹了微信小程序全選多選效果實(shí)現(xiàn)代碼解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-01-01 
這篇文章詳細(xì)介紹了js兼容的placeholder屬性，有需要的朋友可以參考一下
2013-08-08 
這篇文章主要為大家介紹了從Immutable.js到Redux函數(shù)式編程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-04-04 
javascript中的作用域(scope)和上下文(context)是這門(mén)語(yǔ)言的獨(dú)到之處，這部分歸功于他們帶來(lái)的靈活性。本文給大家介紹JavaScript中的作用域和上下文，感興趣的朋友一起學(xué)習(xí)
2016-03-03 
JavaScript設(shè)計(jì)模式之工廠模式和構(gòu)造器模式
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之工廠模式和構(gòu)造器模式,本文同時(shí)講解了設(shè)計(jì)模式的類別如創(chuàng)建型設(shè)計(jì)模式、結(jié)構(gòu)型設(shè)計(jì)模式、行為設(shè)計(jì)模式等內(nèi)容,需要的朋友可以參考下
2015-02-02 
JavaScript?Map?和?Object?的區(qū)別解析
在JavaScript中，Map 和 Object 看起來(lái)都是用鍵值對(duì)來(lái)存儲(chǔ)數(shù)據(jù)，那么他們有什么不同呢，這篇文章主要介紹了JavaScript?Map?和?Object?的區(qū)別,需要的朋友可以參考下
2022-08-08