首頁 >web前端 >css教學 >利用Css3和Js製作時鐘的程式碼

利用Css3和Js製作時鐘的程式碼

不言原創: 2018-06-22 13:09:251891瀏覽

這篇文章主要介紹了關於利用Css3和Js製作時鐘的程式碼，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

Css3 Js實現漂亮時鐘，瀏覽器支援IE9/GoogleChrome/FireFox/Safari等等，有興趣的朋友可以下載測試，希望對你學習css3有所幫助

Css3 Js 漂亮時鐘
瀏覽器支援IE9/GoogleChrome/FireFox/ Safari
效果圖：

HTML程式碼

<!DOCTYPE html> 
<html> 
<head> 
<meta > 
<title>css3+js打造漂亮时钟</title> 
<style> 
body{background: -webkit-radial-gradient(center center,circle,#666,#000); margin: 0;} 
p{margin: 0; padding: 0;} 
.box{padding-top: 50px; width:410px; margin: 0 auto;} 
.clock{position: relative; width:400px; height: 400px; border: 5px solid #fff; border-radius: 200px; background:-webkit-radial-gradient(center center,circle,#fff,#bbb); box-shadow: 1px 1px 30px rgba(0, 0, 0, 0.8); } 
.clock .clock-xin{position: absolute; top: 50%; left: 50%; width:30px; height: 30px; border-radius: 15px; background: #eee;margin:-15px 0 0 -15px;} 
.clock .clock-xin2{position: absolute; top: 50%; left: 50%; width:12px; height: 12px; border-radius: 6px; background: #f00; z-index: 100; margin:-6px 0 0 -6px;} 
.clock .date{position: absolute; z-index: 3; top: 245px; left: 130px; font-size: 20px; color: #000; text-shadow: 1px 1px white; } 
.clock .hour{position: absolute; z-index: 3; top: 50%; left: 50%; width:160px; height: 6px; border-radius:5px; background: #000; -webkit-transform-origin: 10px 50%; margin:-3px 0 0 -10px;} 
.clock .min{position: absolute; z-index: 4;top: 50%; left: 50%; width:180px; height: 4px; border-radius:5px; background: #333; -webkit-transform-origin: 10px 50%; margin:-2px 0 0 -10px;} 
.clock .sec{position: absolute; z-index: 5; top: 50%; left: 50%; width:210px; height: 2px; background: #f00; -webkit-transform-origin: 30px 50%; margin:-1px 0 0 -30px;} 
.clock em{display: block; width: 2px; height: 5px; background: #000; position: absolute; top: 0; left: 0; -webkit-transform-origin: 50% 0; margin-left: -1px;} 
.clock em.ishour{width: 6px; height: 10px; margin-left: -3px;} 
.clock em.ishour i{font-size: 25px; color: #000; position: absolute; top: 12px; left: -7px;text-shadow: 1px 1px white; } 
</style> 
</head> 
<body> 
<p style="color:white;">浏览器支持：GoogleChrome</p> 
<p class="box"> 
<p class="clock" id="clock"> 
<p class="clock-xin"></p> 
<p class="clock-xin2"></p> 
<p id="date" class="date"></p> 
<p id="hour" class="hour"></p> 
<p id="min" class="min"></p> 
<p id="sec" class="sec"></p> 
</p> 
</p> 
<script> 
window.onload = function() { 
var winHeight = document.documentElement.clientHeight; 
document.getElementsByTagName(&#39;body&#39;)[0].style.height = winHeight+&#39;px&#39;; 
var $clock = document.getElementById(&#39;clock&#39;), 
$date = document.getElementById(&#39;date&#39;), 
$hour = document.getElementById(&#39;hour&#39;), 
$min = document.getElementById(&#39;min&#39;), 
$sec = document.getElementById(&#39;sec&#39;), 
oSecs = document.createElement(&#39;em&#39;); 
for (var i = 1; i < 61; i++) { 
var tempSecs = oSecs.cloneNode(), 
pos = getSecPos(i); 
if(i%5==0){ 
tempSecs.className = &#39;ishour&#39;; 
tempSecs.innerHTML = &#39;<i style="-webkit-transform:rotate(&#39;+(-i*6)+&#39;deg);">&#39;+(i/5)+&#39;</i>&#39;; 
} 
tempSecs.style.cssText=&#39;left:&#39;+pos.x+&#39;px; top:&#39;+pos.y+&#39;px; -webkit-transform:rotate(&#39;+i*6+&#39;deg);&#39;; 
$clock.appendChild(tempSecs); 
} 
// 圆弧上的坐标换算 
function getSecPos(dep) { 
var hudu = (2*Math.PI/360)*6*dep, 
r = 200; //半径大小 
return { 
x: Math.floor(r + Math.sin(hudu)*r), 
y: Math.floor(r - Math.cos(hudu)*r), 
} 
} 
;(function() { 
// 当前时间 
var _now = new Date(), 
_h = _now.getHours(), 
_m = _now.getMinutes(), 
_s = _now.getSeconds(); 
var _day = _now.getDay(); 
_day = (_day==0)?7:_day; 
if(_day==1){ 
_day = "一"; 
}else if(_day==2){ 
_day = "二"; 
}else if(_day==3){ 
_day = "三"; 
}else if(_day==4){ 
_day = "四"; 
}else if(_day==5){ 
_day = "五"; 
}else if(_day==6){ 
_day = "六"; 
}else if(_day==7){ 
_day = "日"; 
} 
$date.innerHTML = _now.getFullYear()+&#39;-&#39;+(_now.getMonth()+1)+&#39;-&#39;+_now.getDate()+&#39; 星期&#39;+_day; 
//绘制时钟 
var gotime = function(){ 
var _h_dep = 0; 
_s++; 
if(_s>59){ 
_s=0; 
_m++; 
} 
if(_m>59){ 
_m=0; 
_h++; 
} 
if(_h>12){ 
_h = _h-12; 
} 
//时针偏移距离 
_h_dep = Math.floor(_m/12)*6; 
$hour.style.cssText = &#39;-webkit-transform:rotate(&#39;+(_h*30-90+_h_dep)+&#39;deg);&#39;; 
$min.style.cssText = &#39;-webkit-transform:rotate(&#39;+(_m*6-90)+&#39;deg);&#39;; 
$sec.style.cssText = &#39;-webkit-transform:rotate(&#39;+(_s*6-90)+&#39;deg);&#39;; 
}; 
gotime(); 
setInterval(gotime, 1000); 
})(); 
}; 
</script> 
</body> 
</html>

以上就是本文的全部內容，希望對大家的學習有所幫助，更相關內容請關注PHP中文網！

利用Css3和Js製作時鐘的程式碼

相關文章