JavaScript 表形时钟

最新推荐文章于 2024-06-08 22:15:04 发布
fulianzhou
最新推荐文章于 2024-06-08 22:15:04 发布
阅读量324
点赞数 1
分类专栏：软件网
本文链接：https://blog.youkuaiyun.com/fulianzhou/article/details/80204256
版权
软件同时被 2 个专栏收录
48 篇文章
订阅专栏
网
1 篇文章
订阅专栏
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>A watch</title>
    </head>
    <style>

    </style>
    <body bgcolor="#FEF423" οnlοad="drawWatch()">
        <center>
            <br><br>
            <b><font color=blue size=5>时间日期篇--表形时钟</font></b>
            <hr width=300>
            当前时间:<input type="text" id="curtime"/><br>
            <canvas id="myCanvas" style="width:400px;height:200px;background-color:#FEF423"></canvas>
            <form name="timeForm">
                秒针:<input type="text" name="sec" style="width:250px;"/><br>
                分针:<input type="text" name="min" style="width:250px"/><br>
                时针:<input type="text" name="hour" style="width:250px"/><br>
            </form>
           <script>
                var radius_sec = 60;
                var radius_min = 50;
                var radius_hour = 40;
                var ptr_hour = {
                    dAngle:0,
                    x:0,
                    y:0
                }
                var ptr_min = 
                {
                    dAngle:0,
                    x:0,
                    y:0
                }
                var ptr_sec = 
                {
                    dAngle:0,
                    x:0,
                    y:0
                }                
                function drawWatch()
                {                    
                    var canva=document.getElementById("myCanvas");
                    var ctx=canva.getContext("2d");
                    var ctPosX = canva.width/2;
                    var ctPosY = canva.height/2;   

                    ctx.beginPath();
                    ctx.fillStyle="#FEF423";
                    ctx.fillRect(0,0,canva.width,canva.height);
                    
                    ctx.arc(ctPosX,ctPosY,radius_sec,0,2*Math.PI);
                    ctx.stroke();
                    
                    var num = 1;
                    
                    for(var nAng = 60; nAng > -300;nAng-=30)
                    {
                        var point = 
                        {
                            x:0,
                            y:0
                        };
                        var point = calcXY(nAng, radius_sec,ctPosX,ctPosY);

                        switch(num)
                        {
                            case 4:
                            {
                                point.x+=3;
                            }break;
                            case 5:
                            {
                                point.x +=5;
                                point.y +=5;
                            }break;
                            case 6:
                            {
                                point.y+=8;
                            }break;
                            case 7:
                            {
                                point.x -= 8;
                                point.y += 8;
                            }break;
                            case 8:
                            {
                                point.x -= 8;
                                point.y += 4;
                            }break;
                            case 9:
                            {
                                point.x -= 7;
                            }break;
                            case 10:case 11:
                            {
                                point.x-=8;
                            }break;
                        }

                        ctx.strokeText(num,point.x, point.y,10);
                        num++;
                    }
                    
                    var ptCenter = 
                    {
                        x:ctPosX,
                        y:ctPosY
                    }
                    calcPointer(ptCenter);
                    ctx.moveTo(ptCenter.x, ptCenter.y);
                    ctx.lineTo(ptr_sec.x,  ptr_sec.y);
                    ctx.stroke();
                    ctx.moveTo(ptCenter.x, ptCenter.y);
                    ctx.lineTo(ptr_min.x,  ptr_min.y);
                    ctx.stroke();
                    ctx.moveTo(ptCenter.x, ptCenter.y);
                    ctx.lineTo(ptr_hour.x, ptr_hour.y);
                    ctx.stroke();
                }
                function calcXY(dAngle,nRadius,disx,disy)
                {
                    var point = 
                    {
                        x:0,
                        y:0
                    }
                    var dArc = dAngle*3.14/180;
                    var nX = nRadius * Math.cos(dArc);
                    var nY = nRadius * Math.sin(dArc);
                    point.x = disx + nX;
                    point.y = disy - nY;
                    return point;
                }
                function calcPointer(ptCenter)
                {
                    var time = new Date();
                    var nHour = time.getHours();
                    var nMin  = time.getMinutes();
                    var nSec  = time.getSeconds();
                    document.getElementById("curtime").value = ((nHour>9?nHour:("0"+nHour)) +":"+ (nMin>9?nMin:("0"+nMin))+":" + (nSec>9?nSec:("0"+nSec)));

                    ptr_sec.dAngle = 90 - nSec/60.0*360;
                    ptr_min.dAngle = 90 - (nMin*60+nSec)/10.0;
                    ptr_hour.dAngle = 90 - ((nHour%12)*60*60 + nMin*60 + nSec)*360/(12*60*60);
                    
                    var pt=
                    {
                        x:0,
                        y:0
                    }
                    pt = calcXY(ptr_sec.dAngle, radius_sec,ptCenter.x,ptCenter.y);
                    ptr_sec.x = pt.x.toFixed(2);
                    ptr_sec.y = pt.y.toFixed(2);
                    ptr_sec.dAngle = ptr_sec.dAngle.toFixed(2);
                    pt = calcXY(ptr_min.dAngle, radius_min,ptCenter.x,ptCenter.y);
                    ptr_min.x = pt.x.toFixed(2);
                    ptr_min.y = pt.y.toFixed(2);
                    ptr_min.dAngle = ptr_min.dAngle.toFixed(2);
                    pt = calcXY(ptr_hour.dAngle, radius_hour,ptCenter.x,ptCenter.y);
                    ptr_hour.x = pt.x.toFixed(2);
                    ptr_hour.y = pt.y.toFixed(2);
                    ptr_hour.dAngle = ptr_hour.dAngle.toFixed(2);
                    document.forms["timeForm"]["sec"].value = pointerToStr(ptr_sec);
                    document.forms["timeForm"]["min"].value = pointerToStr(ptr_min);
                    document.forms["timeForm"]["hour"].value = pointerToStr(ptr_hour);
                    setTimeout("drawWatch()", 1000);
                }
                function pointerToStr(ptr)
                {
                    return "ang:"+ptr.dAngle+"\tx:"+ptr.x+"\ty:"+ptr.y; 
                }
            </script> 
        </center>
    </body>
</html>