您的位置：首页 > Web前端 > JavaScript

JavaScript - 机械表 and 电子表 and 随机颜色切换 - 简单实现

2018-10-22 21:04 405 查看

机械表+电子表.html

[code]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>机械表+电子表</title>
<!-- 机械表 -->
<style>
/*body,div{
margin:0 ;
top: 0;
}*/

/*表盘*/
.clock{
width: 300px;
height: 300px;
border-radius: 50%;
background-color: #eee;
position: relative;
float: left;
}
.clock-dial{
position: absolute;
left: 140px;
width: 20px;
height: 300px;
/*border: 3px solid cyan;*/
}
.dial{
width: 20px;
height: 300px;
position: absolute;

}
.dial span{
display: block;
width: 20px;
font-size: 18px;
line-height: 20px;
text-align: center;
}
.dial span:first-child{
position: absolute;
top: 0;
left: 0;
}
.dial span:last-child{
position: absolute;
bottom: 0;
left: 0;
}

/*表盘中心圈*/
.clock-center {
width: 4px;
height: 4px;
border-radius: 50%;
border: 2px solid black;
position: absolute;
left: 146px;
top: 146px;
}

/*指针*/
.point-hour {
width: 10px;
height: 300px;
position: absolute;
left: 145px;
/*background-color: red;*/
position: absolute;
}
.hour {
width: 10px;
height: 80px;
border-radius: 5px;
background-color: orange;
position: absolute;
top: 80px;
}

.point-minute {
width: 6px;
height: 300px;
position: absolute;
left: 147px;
/*background-color: red;*/
position: absolute;
}
.minute {
width: 6px;
height: 110px;
border-radius: 3px;
background-color: pink;
position: absolute;
top: 50px;
}
.point-second {
width: 2px;
height: 300px;
position: absolute;
left: 149px;
/*background-color: red;*/
position: absolute;
}
.second {
width: 2px;
height: 140px;
border-radius: 1px;
background-color: yellow;
position: absolute;
top: 20px;
}
</style>

<!-- 电子表 -->
<style>
.dig_watch{
display: block;
width: 120px;
height: 40px;
font: normal 22px/40px 'STSong';
border: 2px solid cyan;
border-radius: 3px;
text-align: center;
margin:50px auto;
}
</style>

</head>
<body>
<!-- 机械表 -->
<div class="clock">
<!-- 表盘 -->
<div class="clock-dial">
<!-- 表盘上数字，成对位于两端 -->
<div class="dial dial-1">
<span>12</span>
<span>6</span>
</div>
<div class="dial dial-2">
<span>1</span>
<span>7</span>
</div>
<div class="dial dial-3">
<span>2</span>
<span>8</span>
</div>
<div class="dial dial-4">
<span>3</span>
<span>9</span>
</div>
<div class="dial dial-5">
<span>4</span>
<span>10</span>
</div>
<div class="dial dial-6">
<span>5</span>
<span>11</span>
</div>
</div>
<!-- 指针 -->
<div class="clock-point">
<div class="point-hour">
<div class="hour"></div>
</div>
<div class="point-minute">
<div class="minute"></div>
</div>
<div class="point-second">
<div class="second"></div>
</div>
</div>
<!-- 表盘中心 -->
<div class="clock-center"></div>
</div>

<!-- 电子表 -->
<div class="dig_watch">00:00:00</div>
</body>

<!-- 机械表 -->
<script>
//表盘数字循环绘制
var d = document.querySelectorAll('.clock-dial div');
console.log(d);
var div_span = document.querySelectorAll('.dial span');
console.log(div_span);

// 旋转包裹span的div
for(var i = 0;i<d.length;i++){
d[i].style.transform="rotate("+(i*30)+"deg)";
}
//反向旋转span内文字，抵消旋转
for (var j = 2;j<div_span.length;j++){
if(j%2==0){
div_span[j].style.transform="rotate("+((j/2)*-30)+"deg)";
}else{
div_span[j].style.transform="rotate("+(((j-1)/2)*-30)+"deg)";
}
}

// 指针根据时间旋转
// 获取指针们
var hour_point = document.querySelector('.point-hour');
var minute_point = document.querySelector('.point-minute');
var second_point = document.querySelector('.point-second');

// 初始化时间函数
function setPoint() {
// 获取当前时间
var date = new Date();

// 获取当前秒数，设置秒针旋转角度
var s = date.getSeconds();
// 60s旋转一圈360deg 则1s = 360/60 = 6deg
second_point.style.transform = "rotate("+(6*s)+"deg)";

// 获取当前分钟数，设置分针旋转角度
var m = date.getMinutes();
// 60m转一圈 1m = 6deg, 1s = 6/60 = 0.1deg
minute_point.style.transform = "rotate("+(6*m+0.1*s)+"deg)";

// 获取当前小时数，设置时针旋转角度
var h = date.getHours();
// 12h一圈 1h= 30deg，1m= 0.5deg
// 由于秒数不精确，忽略秒数影响
hour_point.style.transform = "rotate("+(30*h+m*0.5)+"deg)";

}

// 执行时间初始化函数
setPoint();
// 设置定时器，隔0.3s刷新表盘
setInterval(setPoint,300);
</script>

<!-- 电子表 -->
<script>
//获取电子表对象
var d = document.querySelector('.dig_watch');

//封装获取当前时间的函数
function getDate() {
var date = new Date();
var hour = date.getHours();
var min = date.getMinutes();
var sec = date.getSeconds();
return [hour,min,sec];
}

//设置定时器,0.3s执行一次匿名函数
setInterval(function () {
date = getDate();
//每次循环判断hour，min，sec的数字是否小于10，若小于10，则自动拼接字符串‘0’
for(var i= 0;i<date.length;i++){
date[i] = date[i]<10 ? '0'+date[i]:date[i];
}
//修改原来对象d内文字
d.innerText = date[0]+':'+date[1]+':'+date[2];
},300)
</script>

<!-- 电子表随机表盘颜色 -->
<script>
//获取随机数函数
function randomNum(min,max) {
return parseInt(Math.random()*(max-min +1))+min;
}
// 获取表盘
var d_watch = document.querySelector('.dig_watch');
// 定时器2.8s刷新表盘颜色
setInterval(function(){
var r = randomNum(0, 255);
var g = randomNum(0, 255);
var b = randomNum(0, 255);
d_watch.style.borderColor = "rgb("+r+","+g+","+b+")";
},2800);
</script>
</html>

阅读更多
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航