ClockRotate.css
* {
padding: 0px;
margin: 0px;
}
#clock {
width: 800px;
height: 800px;
/* border: 1px solid red; */
margin: auto;
background: url("../imgs/timg.png") 0px 0px no-repeat;
background-size: 100% 100%;
position: relative;
top:-42px;
left:-14px;
transform:scale(0.283);
}
.second {
width: 22px;
height: 373px;
/* border: 1px solid red; */
background: url("../imgs/pointer.png") -9px 0px no-repeat;
background-size: 606% 100%;
position: absolute;
left: 393px;
top: 135px;
/* opacity:0.5; */
transform:rotate(0deg);
transform-origin:11px 273px;
}
.secHead{
width:40px;
height:40px;
background:url("../imgs/dog.jpg") 0px 0px no-repeat;
background-size:100% 100%;
position:absolute;
left:-10px;
top:64px;
border-radius:50%;
}
.minute{
width: 22px;
height: 373px;
/* border: 1px solid red; */
background: url("../imgs/pointer.png") -53px 0px no-repeat;
background-size: 606% 100%;
position: absolute;
left: 393px;
top: 135px;
/* opacity:0.5; */
transform:rotate(0deg);
transform-origin:11px 273px;
}
.hour{
width: 31px;
height: 373px;
/* border: 1px solid red; */
background: url("../imgs/pointer.png") -101px 0px no-repeat;
background-size: 468% 100%;
position: absolute;
left: 389px;
top: 135px;
/* opacity:0.5; */
transform:rotate(0deg);
transform-origin:16px 273px;
}
#btnSound{
width:80px;
height:80px;
border-radius:50%;
border:5px solid darkgray;
position:absolute;
left:20px;
top:20px;
}
.muteBack{
background:url("../imgs/mute.png") 2px 3px no-repeat;
}
.soundBack{
background:url("../imgs/sound.png") 2px 3px no-repeat;
animation:rotateBtn 5s linear infinite;
}
@keyframes rotateBtn{
0%{
transform:rotate(0deg);
}
100%{
transform:rotate(360deg)
}
}
007-Shop-购物网站应用钟表案例.html
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>购物</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
.main{
background:url("./imgs/gouwu.jpg") 0px 0px no-repeat;
background-size:100% 100%;
width:1000px;
height:4500px;
margin:auto;
position:relative;
}
.plane2{
background:url("./imgs/plane2.jpg") 0px 0px no-repeat;
background-size:100% 100%;
width:571px;
height:520px;
position:absolute;
top:200px;
right:-336px;
z-index:-10;
}
</style>
<link rel="stylesheet" href="./css/ClockRotate.css" />
<script type="text/javascript" src="./js/jquery-3.4.1.slim.min.js"></script>
<script type="text/javascript" src="./js/JqueryRotate.js"></script>
<script type="text/javascript">
var secDegree = 0;
var minuteDeg = 0;
var hourDeg = 0;
// 声音是否在播放
var playing = false;
// 文档准备好以后，咱们就进行秒针的数据初始化
$(function(){
var now = new Date();
var sec = now.getSeconds();
secDegree = sec * 6;//一秒6度，比如15秒，15秒乘以6度=90度，30秒乘以6度=180度。
// 计算当前时间的分针旋转角度
var min = now.getMinutes();
// minuteDeg = min * (0.1 * 60);//每秒转0.1度，1分钟等于60秒。比如现在15分钟是90度，15*0.1*60=90度
minuteDeg = min * 6;
// 计算当前时间的时针旋转角度
var hour = now.getHours();
// hourDeg = hour * (0.00833 * 3600);//时钟一秒0.00833度，1小时等于3600秒，比如现在3点钟是90度，3*0.00833*3600=89.964度
// hourDeg = hour*(360/12);//360度,12份。
hourDeg = (hour + min/60) * 30; //加上分钟的时间，不然比如9点50，时钟依然指向9点，而不是靠近10点的位置。
$("#btnSound").click(function(){
playing = !playing;
if(playing == true){
$(this).removeClass("muteBack");
$(this).addClass("soundBack");
}
else{
$(this).removeClass("soundBack");
$(this).addClass("muteBack");
}
});
});
// 每秒钟调用一次
function clockRotate(){
if(playing == true){
$("audio")[0].volume = 0.02;
$("audio")[0].play();
}
// 秒针的旋转
secDegree += 6;//360度/60秒=6度/秒
$(".second").rotate(
{
angle:secDegree,
center:[11,273]
}
);
// 分针的旋转
minuteDeg += 0.1; //360度/3600秒=0.1度/秒
$(".minute").rotate({
angle:minuteDeg,
center:[11,273]
});
// 时针的旋转
// hourDeg += 360/(12*3600);//360度/12小时*3600秒=0.00833度/秒
hourDeg += 0.00833;
$(".hour").rotate({
angle:hourDeg,
center:[16,273]
});
}
// 启动定时器，定时调用旋转函数
setInterval("clockRotate()",1000);
</script>
</head>
<body>
<div class="main">
<div class="plane2">
<div id="clock">
<div class="hour"></div>
<div class="minute"></div>
<div class="second">
<div class="secHead"></div>
</div>
<div id="btnSound" class="muteBack" style="display:none"></div>
</div>
</div>
</div>
</body>
</html>
