JS+CSS 钟表

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS+CSS 钟表相关的知识,希望对你有一定的参考价值。

.<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<style type="text/css">

#wrap{

width: 580px;

height: 580px;

border-radius: 50%;

background: linear-gradient(to bottom,white 0px, gray 500px, white);

position: relative;

margin: 100px auto;

}

#content{

width: 500px;

height: 500px;

border-radius:50% ;

background-color: black;

position: absolute;

top: 40px;

left: 40px;

}

#second{

width:2px;

height: 200px;

position: absolute;

left: 249px;

bottom:250px;

background-color: white;

transform-origin:bottom center ;

}

#minute{

width:4px;

height: 160px;

position: absolute;

left: 248px;

bottom: 250px;

background-color: deeppink;

transform-origin:bottom center ;

}

#hour{

width:4px;

height: 120px;

position: absolute;

left: 248px;

bottom: 250px;

background-color:red;

transform-origin:bottom center ;

}

.num{

width: 500px;

height: 40px;

position: absolute;

left: 0px;

top:230px;

}

span{

display: block;

line-height: 40px;

text-align: center;

color: white;

width: 40px;

height: 40px;

}

.div1{

width: 500px;

height: 2px;

position: absolute;

left: 0;

top: 249px;

}

.div2{

width: 8px;

height: 2px;

background-color: white;

}

</style>

</head>

<body>

 

<div id="wrap">

<div id="content">

<div class="div1">

<div class="div2"></div>

</div>

<div class="div1">

<div class="div2"></div>

</div>

<div class="div1">

<div class="div2"></div>

</div>

<div class="div1">

<div class="div2"></div>

</div>

<div class="div1">

<div class="div2"></div>

</div>

<div class="div1">

<div class="div2"></div>

</div>

<div class="div1">

<div class="div2"></div>

</div>

<div class="div1">

<div class="div2"></div>

</div>

<div class="div1">

<div class="div2"></div>

</div>

<div class="div1">

<div class="div2"></div>

</div>

<div class="div1">

<div class="div2"></div>

</div>

<div class="div1">

<div class="div2"></div>

</div>

<div class="div1">

<div class="div2"></div>

</div>

<div class="div1">

<div class="div2"></div>

</div>

<div class="div1">

<div class="div2"></div>

</div>

<div class="div1">

<div class="div2"></div>

</div>

<div class="div1">

<div class="div2"></div>

</div>

<div class="div1">

<div class="div2"></div>

</div>

<div class="div1">

<div class="div2"></div>

</div>

<div class="div1">

<div class="div2"></div>

</div>

<div class="div1">

<div class="div2"></div>

</div>

<div class="div1">

<div class="div2"></div>

</div>

<div class="div1">

<div class="div2"></div>

</div>

<div class="div1">

<div class="div2"></div>

</div>

<div class="div1">

<div class="div2"></div>

</div>

<div class="div1">

<div class="div2"></div>

</div>

<div class="div1">

<div class="div2"></div>

</div>

<div class="div1">

<div class="div2"></div>

</div>

<div class="div1">

<div class="div2"></div>

</div>

<div class="div1">

<div class="div2"></div>

</div>

<div class="div1">

<div class="div2"></div>

</div>

<div class="div1">

<div class="div2"></div>

</div>

<div class="div1">

<div class="div2"></div>

</div>

<div class="div1">

<div class="div2"></div>

</div>

<div class="div1">

<div class="div2"></div>

</div>

<div class="div1">

<div class="div2"></div>

</div>

<div class="div1">

<div class="div2"></div>

</div>

<div class="div1">

<div class="div2"></div>

</div>

<div class="div1">

<div class="div2"></div>

</div>

<div class="div1">

<div class="div2"></div>

</div>

<div class="div1">

<div class="div2"></div>

</div>

<div class="div1">

<div class="div2"></div>

</div>

<div class="div1">

<div class="div2"></div>

</div>

<div class="div1">

<div class="div2"></div>

</div>

<div class="div1">

<div class="div2"></div>

</div>

<div class="div1">

<div class="div2"></div>

</div>

<div class="div1">

<div class="div2"></div>

</div>

<div class="div1">

<div class="div2"></div>

</div>

<div class="div1">

<div class="div2"></div>

</div>

<div class="div1">

<div class="div2"></div>

</div>

<div class="div1">

<div class="div2"></div>

</div>

<div class="div1">

<div class="div2"></div>

</div>

<div class="div1">

<div class="div2"></div>

</div>

<div class="div1">

<div class="div2"></div>

</div>

<div class="div1">

<div class="div2"></div>

</div>

<div class="div1">

<div class="div2"></div>

</div>

<div class="div1">

<div class="div2"></div>

</div>

<div class="div1">

<div class="div2"></div>

</div>

<div class="div1">

<div class="div2"></div>

</div>

<div class="div1">

<div class="div2"></div>

</div>

<div class="num" ><span>9</span></div>

<div class="num"><span>10</span></div>

<div class="num"><span>11</span></div>

<div class="num"><span>12</span></div>

<div class="num"><span>1</span></div>

<div class="num"><span>2</span></div>

<div class="num"><span>3</span></div>

<div class="num"><span>4</span></div>

<div class="num"><span>5</span></div>

<div class="num"><span>6</span></div>

<div class="num"><span>7</span></div>

<div class="num"><span>8</span></div>

<div id="second"></div>

<div id="minute"></div>

<div id="hour"></div>

</div>

</div>

</body>

<script type="text/javascript">

 

//表盘

var div1=document.getElementsByClassName(‘div1‘)

for(var i = 0;i<div1.length;i++){

div1[i].style.transform="rotate("+i*6+‘deg)‘

}

var div2=document.getElementsByClassName(‘div2‘)

for(var i = 0;i<div1.length;i+=5){

div2[i].style.width=‘13px‘;

div2[i].style.height=‘3px‘

 

}

 

 

//表盘数字

var num=document.getElementsByClassName(‘num‘);

var spanNum = document.getElementsByTagName("span");

for(var i=0;i<num.length;i++){

num[i].style.transform="rotate("+i*30+‘deg)‘

}

for(var i=0;i<spanNum.length;i++){

spanNum[i].style.transform="rotate("+i*-30+‘deg)‘

}

 

var second = document.getElementById(‘second‘);

 

 

 

 

var minute = document.getElementById(‘minute‘);

var hour = document.getElementById(‘hour‘);

function ColorNumber() {

var Houre = document.getElementById("hour");

var Minute = document.getElementById("minute");

var Second = document.getElementById("second");

var nowTime = new Date();

var nowHoure = nowTime.getHours();

var nowMinute = nowTime.getMinutes();

var nowSecond = nowTime.getSeconds();

var houreDeg = (nowMinute / 60) * 30;

var minuteDeg = (nowSecond / 60) * 6;

Houre.style.WebkitTransform = "rotate(" + (nowHoure * 30 + houreDeg) + "deg)";

Minute.style.WebkitTransform = "rotate(" + (nowMinute * 6 + minuteDeg) + "deg)";

Second.style.WebkitTransform = "rotate(" + (nowSecond * 6) + "deg)";

}

ColorNumber();

setInterval(ColorNumber, 1000);

</script>

</html>

以上是关于JS+CSS 钟表的主要内容,如果未能解决你的问题,请参考以下文章

css3++js钟表

html,css,js实现的一个钟表

简单的JS钟表计时

使用原生JS编写时钟

用CSS3写的钟表

css+JavaScript+html实现时钟钟表时间