1、准备好需要用到的图标。
2、新建html文档。
3、书写hmtl代码。<div class="clok"><div class="circle"> <div class="circlecenter"></div> <div class="miaozhen"></div> <div class="fenzhen"></div> <div class="shizhen"></div></div></div>
4、书写css代码。<style>* { margin: 0; padding: 0; }bo颊俄岿髭dy { background: #000; }.circlecenter { position: absolute; left: 50%; top: 50%; margin-left: -6px; margin-top: -6px; width: 12px; height: 12px; background: url(img/3.png) no-repeat center; background-size: 100% 100%; z-index: 5; }.shizhen { width: 16px; height: 38px; background: url(img/shizhen.png) center no-repeat; background-size: 100% 100%; position: absolute; left: 64px; top: 34px;}</style>
5、书写并添加js蜣贺鱿柢代码。<script src="js/jquery.js"></script><script>var ad=$('audio')[0];ad.play();setInterval(function(){ad.play();},1000);var myTime=new Date();var houre=myTime.getHours();var minutes=myTime.getMinutes();var seconds=myTime.getSeconds();console.log(houre);console.log(minutes);console.log(seconds);var miao=seconds;var mz=$('.miaozhen');setInterval(function(){if(miao==59){miao=0;mz.css({'-web kit-transform': 'rotate(0deg)','-ms-transform': 'rotate(0deg)','-moz-transform': 'rotate(0deg)','-o-transform': 'rotate(0deg)','transform': 'rotate(0deg)'})}else{miao++;miaodu=miao*6;mz.css({'-web kit-transform': 'rotate('+miaodu+'deg)','-ms-transform': 'rotate('+miaodu+'deg)','-moz-transform': 'rotate('+miaodu+'deg)','-o-transform': 'rotate('+miaodu+'deg)','transform': 'rotate('+miaodu+'deg)'})}},1000);var minutesdeg=parseInt(minutes*6)+parseInt(seconds/10);$('.fenzhen').css({'-web kit-transform': 'rotate('+minutesdeg+'deg)','-ms-transform': 'rotate('+minutesdeg+'deg)','-moz-transform': 'rotate('+minutesdeg+'deg)','-o-transform': 'rotate('+minutesdeg+'deg)','transform': 'rotate('+minutesdeg+'deg)'})var houredeg=parseInt(houre%12*30)+parseInt(minutes/2);$('.shizhen').css({'-we bkit-transform': 'rotate('+houredeg+'deg)','-ms-transform': 'rotate('+houredeg+'deg)','-moz-transform': 'rotate('+houredeg+'deg)','-o-transform': 'rotate('+houredeg+'deg)','transform': 'rotate('+houredeg+'deg)'})</script>
6、代码整体结构。
7、查看效果。
