linux脚本石英钟,原生JS实现的简单小钟表功能示例

本文实例讲述了原生JS实现的简单小钟表功能。分享给大家供大家参考，具体如下：

先来看看运行效果：

完整代码：

www.jb51.net 钟表

body {

background-color:#00A2D4;

}

.clock {

width: 200px;

height: 200px;

background: -webkit-radial-gradient(#3b3b3b, #000);

background: radial-gradient(#2E3F50, #0E1B29);

box-shadow: inset 0px 0px 30px #131313, 0px 2px 18px rgba(0,0,0,0.5);

border: 6px solid #172839;

border-radius: 106px;

margin: auto;

position: absolute;

top: 0; bottom: 0; left: 0; right: 0;

}

.hour-hand {

width: 4px;

height: 55px;

background: #fff;

box-shadow: 0px 0px 7px #000;

position: absolute;

top: 45px;

left: 98px;

}

.minute-hand {

width: 4px;

height: 80px;

background: #fff;

box-shadow: 0px 0px 4px #000;

position: absolute;

top: 20px;

left: 98px;

}

.second-hand {

width: 2px;

height: 80px;

background: #bbb;

box-shadow: 0px 0px 7px #000;

position: absolute;

top: 20px;

left: 99px;

}

.pin {

width: 10px;

height: 10px;

background: #222;

border-radius: 10px;

margin: auto;

position: absolute;

top: 0; bottom: 0; left: 0; right: 0;

}

.hour-hand,

.minute-hand,

.second-hand {

-webkit-transform-origin: 50% 100%;

-moz-transform-origin: 50% 100%;

-o-transform-origin: 50% 100%;

-ms-transform-origin: 50% 100%;

transform-origin: 50% 100%;

}

.circle{

width:20px;

height:20px;

line-height:20px;

text-align:center;

color:#fff;

position: absolute;

}

6

5

4

3

2

1

12

11

10

9

8

7

window.οnlοad=function(){

setInterval(function(){

var dt = new Date();

var sec_deg = dt.getSeconds() * (360/60);

var min_deg = dt.getMinutes() * (360/60);

var hr_deg = dt.getHours() * (360/12) + dt.getMinutes() * (360/60/12);

document.querySelector(".clock .second-hand").style.cssText='-webkit-transform:rotate(' + sec_deg + 'deg)','-moz-transform:rotate(' + sec_deg + 'deg)', '-o-transform:rotate(' + sec_deg + 'deg)', '-ms-transform:rotate(' + sec_deg + 'deg)', 'transform:rotate(' + sec_deg + 'deg)';

document.querySelector('.clock .minute-hand').style.cssText='-webkit-transform:rotate(' + min_deg + 'deg)', '-moz-transform:rotate(' + min_deg + 'deg)', '-o-transform:rotate(' + min_deg + 'deg)', '-ms-transform:rotate(' + min_deg + 'deg)', 'transform:rotate(' + min_deg + 'deg)';

document.querySelector('.clock .hour-hand').style.cssText='-webkit-transform:rotate(' + hr_deg + 'deg)', '-moz-transform:rotate(' + hr_deg + 'deg)', '-o-transform:rotate(' + hr_deg + 'deg)', '-ms-transform:rotate(' + hr_deg + 'deg)', 'transform:rotate(' + hr_deg + 'deg)';

}, 1000);

var dx=90,

dy=90,

s=87,//半径

x=Math.sin(0),

y=Math.cos(0),

dig=2*Math.PI/12;

var circle=document.querySelectorAll(".circle");

for(var i=0;i<12;i++){

var x=Math.sin(i*dig);

var y=Math.cos(i*dig);

var topValue=Number(dy+y*s),

leftValue=Number(dx+x*s);

circle[i].style.top=topValue+"px";

circle[i].style.left=leftValue+"px";

}

}

感兴趣的朋友可使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试一下运行效果。

PS：这里再为大家推荐几款时间及日期相关工具供大家参考使用：

希望本文所述对大家JavaScript程序设计有所帮助。