1、准备好需要用到的图标。
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>
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>
7、查看效果。
