基于JS和JQuery实现的两种时钟效果（7）
项目应用-布局钟表支架和页面图片
在前面实现两种时钟的效果，将前面用到的知识整合于一小项目中
用到的素材：
由于这张截取的素材太大，我就不放在该位置了
项目页面初始布局效果：
初始布局代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 *{ 8 margin:0px ; 9 padding: 0px; 10 } 11 .main{ 12 13 background: url(img/gouwu.jpg) 0 0 no-repeat; 14 background-size: 100% 100%; 15 width: 1000px; 16 height: 4500px; 17 position: relative; 18 } 19 .plane2{ 20 background: url(img/plane2.jpg) 0 0 no-repeat; 21 background-size: 100% 100%; 22 width: 571px; 23 height: 520px; 24 position: absolute; 25 right: -336px; 26 top: 200px; 27 z-index: -10; 28 29 30 } 31 32 33 </style> 34 </head> 35 <body> 36 <div class="main"> 37 <div class="plane2"></div> 38 39 40 </div> 41 </body> 42 </html>
项目应用-给页面添加旋转时钟
将之前实现的表盘时钟加进来，可是实现的效果如图所示：
表盘太大需要对其进行缩放：
transform: scale(0.5);
实现的最终效果：
实现该小项目的所有代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 *{ 8 margin:0px ; 9 padding: 0px; 10 } 11 .main{ 12 13 background: url(img/gouwu.jpg) 0 0 no-repeat; 14 background-size: 100% 100%; 15 width: 1000px; 16 height: 4500px; 17 position: relative; 18 } 19 .plane2{ 20 background: url(img/plane2.jpg) 0 0 no-repeat; 21 background-size: 100% 100%; 22 width: 571px; 23 height: 520px; 24 position: absolute; 25 right: -336px; 26 top: 200px; 27 z-index: -10; 28 29 30 } 31 32 33 </style> 34 <link rel="stylesheet" href="css/clock.css" /> 35 <script type="text/javascript" src="js/jquery-3.4.1.slim.min.js" ></script> 36 <script type="text/javascript" src="js/JqueryRotate.js" ></script> 37 <script> 38 var secDegree=0; 39 var minDegree=0; 40 var houDegree=0; 41 //声音是否在播放 42 var playing=false; 43 44 $(function() { 45 var now=new Date(); 46 var sec=now.getSeconds(); 47 secDegree=sec*6;//当前的秒数乘以6 48 49 50 //当前的分钟*（每秒钟旋转的度数*每分钟的秒数） 51 //计算当前分针旋转的角度 52 var min=now.getMinutes(); 53 // minDegree=min*(0.1*60); 54 minDegree=min*6; 55 56 57 //计算当前时针旋转的角度 58 var hou=now.getHours(); 59 // houDegree=hou*(360/12); 60 houDegree=(hou+min/60)*30; 61 62 $("#btnSound").click(function(){ 63 64 playing=!playing; 65 if(playing==true){ 66 $(this).removeClass("muteBack"); 67 $(this).addClass("soundBack"); 68 }else{ 69 70 $(this).removeClass("soundBack"); 71 $(this).addClass("muteBack"); 72 } 73 74 }) 75 76 77 78 79 80 }) 81 //每秒钟调用一次 82 function clockRotate(){ 83 if(playing==true){ 84 $("audio")[0].volume=0.02;//播放声音的大小 85 //播放声音 86 $("audio")[0].play(); 87 88 89 } 90 91 92 //秒针的旋转 93 secDegree+=6; 94 $(".second").rotate({angle:secDegree,center:[16,273]});//getElementsByClassName带s因此需要返回一个数组 95 96 97 98 //分针的旋转 99 minDegree+=0.1;// 100 $(".minute").rotate({angle:minDegree,center:[16,273]});//getElementsByClassName带s因此需要返回一个数组 101 102 103 //时针的旋转 104 houDegree+=0.008333;//360/(12*3600)=0.008333//时针一秒钟旋转的角度 105 $(".hour").rotate({angle:houDegree,center:[16,273]});//getElementsByClassName带s因此需要返回一个数组 106 107 } 108 //启动定时器，定时调用旋转函数 109 setInterval("clockRotate()",1000); 110 </script> 111 112 113 114 </head> 115 <body> 116 <div class="main"> 117 <div class="plane2"> 118 119 120 <div id="clock"> 121 <div class="hour"> 122 123 124 </div> 125 <div class="minute"> 126 127 128 </div> 129 130 <div class="second"> 131 <div class="secHead"> 132 133 134 </div> 135 136 137 </div> 138 <div id="btnSound" class="muteBack" style="display: none;"> 139 140 141 </div> 142 143 144 145 </div> 146 </div> 147 148 149 </div> 150 </body> 151 </html>
