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 钟表的主要内容,如果未能解决你的问题,请参考以下文章