大佬教程收集整理的这篇文章主要介绍了时钟，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
sz.jsp：
<%--
Document : index
Created on : 2016-8-23,22:55:17
Author : Administrator
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML5时钟</title>
<script type="text/javascript" src="js/szjs.js"></script>
</head>
<body>
<div></div>
<script type="text/javascript">
window.onload = setClock({
w:200,// 钟面大小
c:"#6c0",// 钟框颜色
bc:"#fff",// 钟面颜色
hc:"#333",// 时针颜色
mc:"#DDB11A",// 分针颜色
sc:"#DC0D07" // 秒针颜色
});
</script>
</body>
</html>
function setClock(o){ if(typeof(Worker)!=="undefined"){ var p='position:absolute;left:50%;top:50%;',hw=o.w*0.04,hh=o.w*0.52,mw=o.w*0.04,mh=o.w*0.64,sw=o.w*0.02,sh=o.w*0.98,a=""; function rotateTo(d){ return'-webkit-transform:rotate('+d+'deg);-moz-transform:rotate('+d+'deg);-o-transform:rotate('+d+'deg);-ms-transform:rotate('+d+'deg);' } function setCover(s,z,C){ return'<div style="width:'+(o.w*s)+'px;height:'+(o.w*s)+'px;'+p+'z-index:'+z+';margin-left:'+(-o.w*s*0.5)+'px;margin-top:'+(-o.w*s*0.5)+'px;border-radius:'+(o.w*s*0.5)+'px;BACkground-color:'+c+';"></div>' } function setHands(hand,width,height,color,indeX){ return'<p id="'+hand+'" style="width:'+width+'px;height:'+height+'px;'+p+'z-index:'+index+';margin-left:'+(-width*0.5)+'px;margin-top:'+(-height*0.5)+'px;"><span style="display:block;width:100%;height:'+(height*0.7)+'px;BACkground-color:'+color+';"></span></p>' } for(var n=0;n<30;n++){ var nd=n*6; a+='<p style="width:'+(o.w*0.02)+'px;height:100%;'+p+'z-index:0;margin-left:'+(-o.w*0.01)+'px;margin-top:'+(-o.w*0.5)+'px;BACkground:#444;'+rotateTo(nd)+'"></p>' } for(var j=0;j<6;j++){ var jd=j*30; a+='<p style="width:'+(o.w*0.04)+'px;height:100%;'+p+'z-index:2;margin-left:-'+(o.w*0.02)+'px;margin-top:'+(-o.w*0.5)+'px;BACkground:#333;'+rotateTo(jd)+'"></p>' } for(var i=1;i<13;i++){ var id=i*30; a+='<p style="width:'+(o.w*0.24)+'px;height:'+(o.w*0.92)+'px;'+p+'z-index:4;margin-left:'+(-o.w*0.12)+'px;margin-top:'+(-o.w*0.46)+'px;'+rotateTo(id)+'"><span style="display:block;width:100%;height:'+(o.w*0.14)+'px;line-height:'+(o.w*0.14)+'px;'+rotateTo(-id)+'">'+i+'</span></p>' } document.write('<div id="clock" style="width:'+o.w+'px;height:'+o.w+'px;position:relative;border-radius:'+(o.w*0.54)+'px;border:'+(o.w*0.04)+'px solid '+o.c+';BACkground-color:'+o.bc+';text-align:center;font:'+(o.w*0.12)+'px \'Helvetica\';">'+setCover(0.96,1,o.bC)+setCover(0.92,3,o.bC)+setCover(0.08,8,'#555')+setCover(0.02,9,'#eee')+setHands('clock-h',hw,hh,o.hc,5)+setHands('clock-m',mw,mh,o.mc,6)+setHands('clock-s',sw,sh,o.sc,7)+'</div>'); document.getElementById("clock").innerHTML+=a; function runClock(){ var t=new Date(),h=t.getHours(),m=t.getminutes(),s=t.getSeconds(); if(h>12){ h-=12 } document.getElementById("clock-s").style.cssText+=rotateTo(6*s); document.getElementById("clock-m").style.cssText+=rotateTo(6*m+0.1*s); document.getElementById("clock-h").style.cssText+=rotateTo(30*h+0.5*m+s/120); setTimeout(function(){ runClock() },30) } runClock() }else{ alert("璇蜂娇鐢ㄦ敮鎸丠TML5鐨勬祻瑙堝櫒") } }
以上是大佬教程为你收集整理的时钟全部内容，希望文章能够帮你解决时钟所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。