时钟

最新推荐文章于 2022-04-12 20:08:13 发布

笑语轻柔

最新推荐文章于 2022-04-12 20:08:13 发布

阅读量303

点赞数

分类专栏： JAVAWEB 文章标签： HTML5

本文链接：https://blog.csdn.net/u012716909/article/details/52295355

版权

JAVAWEB 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

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>

sz.js

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鐨勬祻瑙堝櫒")
        }
    }

界面显示：