HTML5时钟

最新推荐文章于 2024-08-01 16:15:33 发布
匠子心
最新推荐文章于 2024-08-01 16:15:33 发布
阅读量1.1k
点赞数 1
文章标签： html5
本文链接：https://blog.csdn.net/wyc0991/article/details/14512587
版权
clock.html:
<!DOCTYPE html>
<!-- ahthor:jd1307 wangyachao-->
<html>
    <head>
        <meta charset="UTF-8">
        <style type="text/css">
            body {
                text-align: center;
            } #bottom {
                font-size: 14px;
                font-weight: normal;
                font-family: 微软雅黑;
                position: relative;
                color: #999999;
                padding: 0px;
            }
        </style>
    </head>
    <body>
        <canvas id="c" width="500px" height="500px">
        </canvas>
        <div id="bottom">
            <hr size="2" color="#448EF3" style="color: #448EF3;"/>
            <br>
            Copyright 
            © 2012-2014 王亚超  All Right Reserve 
            <br/>
            联系我:<a href="tencent://message/?uin=1102377905 %>&Site=网站在线QQ联系&Menu=yes" target="_blank">   <img src="images/qq.png" border="0px"/>  </a><a href="Mailto:wangyachao0991@sina.cn?CC=wangyachao0991@sina.cn&BCC=wangyachao0991@sina.cn&Subject=问题咨询&Body=我的问题："><img src="images/email.png" border="0px"/>wangyachao0991@sina.cn</a>
        </div>
        <script>
            function time(){
                var ct = document.getElementById("c").getContext("2d");
                ct.save();
                ct.clearRect(0, 0, 500, 500);//清空画布，重绘
                var g = ct.createLinearGradient(0, 0, 0, 400);//绘渐变色
                g.addColorStop(0, "#448EF3");//渐变开始色
                g.addColorStop(0.5, "white");//渐变开始色
                g.addColorStop(1, "#90BFFF");//渐变结束色
                ct.fillStyle = g;
                ct.fillRect(0, 0, 500, 500);
                ct.beginPath(); //表框 内圆
                ct.lineWidth = 5;
                ct.strokeStyle = "#448EF3";
                ct.arc(250, 250, 205, 0, Math.PI*2, true);
                ct.stroke();
                ct.closePath();
                ct.beginPath(); //外圆
                g = ct.createLinearGradient(0, -215, 0, 215);//绘渐变色
                g.addColorStop(0, "blue");//渐变开始色
                g.addColorStop(0.5, "white");//渐变开始色
                g.addColorStop(1, "#448EF3");//渐变结束色
                ct.strokeStyle = g;
                ct.lineWidth = 10;
                ct.arc(250, 250, 215, 0, Math.PI*2, true);
                ct.stroke();
                ct.closePath();
                for (var i = 1; i < 13; i++) {//表盘刻度
                    ct.save(); //保存状态  
                    ct.translate(250, 250);//原点
                    ct.lineWidth = 2; //设置线条粗细  
                    ct.font = "25px 微软雅黑";
                    ct.strokeStyle = "blue";
                    ct.beginPath();
                    var y = -(Math.cos((i) * Math.PI / 6)) * 190 + 10;
                    var x;
                    if (i < 10) {
                        x = (Math.sin((i) * Math.PI / 6)) * 190 - 6;
                    }
                    if (i >= 10 && i < 12) {
                        x = (Math.sin((i) * Math.PI / 6)) * 190 - 10;
                    }
                    if (i == 12) {
                        x = (Math.sin((i) * Math.PI / 6)) * 190 - 14;
                    }
                    ct.strokeText(i, x, y);
                    ct.restore();
                    ct.closePath();
                }
                for (var i = 0; i < 60; i++) {//分钟刻度
                    if (i % 5 != 0) {//不画和时针重复的
                        ct.save();
                        ct.translate(250, 250);//旋转原点
                        ct.rotate(i * 6 * Math.PI / 180);//旋转角度
                        ct.beginPath();
                        ct.lineWidth = 2;
                        ct.strokeStyle = "#448EF3";
                        ct.moveTo(0, -204);
                        ct.lineTo(0, -192);
                        ct.stroke();
                        ct.closePath();
                        ct.restore();
                    }
                }
                ct.save();
                ct.translate(250, 250);//旋转原点
                ct.lineWidth = 4; //设置线条粗细  
                ct.font = "60px 微软雅黑";
                ct.strokeStyle = "#90BFFF";
                ct.beginPath();
                ct.strokeText("HTML5", -100, 80);
                ct.closePath();
                ct.restore();
                var date = new Date(); //获取当前时间	
                var hour = date.getHours() % 12;
                var minute = date.getMinutes();
                var second = date.getSeconds();
                ct.save();//时针
                ct.translate(250, 250);//旋转原点
                ct.rotate(hour * 30 * Math.PI / 180 + minute / 60 * 30 * Math.PI / 180 + second / 60 / 60 * 30 * Math.PI / 180);//旋转角度 hour+minute+second
                ct.beginPath();
                ct.lineWidth = 10;
                g = ct.createLinearGradient(0, 20, 0, -80);
                g.addColorStop(0, "#90BFFF");
                g.addColorStop(1, "white");
                ct.strokeStyle = g;
                ct.moveTo(0, 20);
                ct.lineTo(0, -80);
                ct.stroke();
                ct.closePath();
                ct.restore();
                
                
                ct.save(); //分针
                ct.translate(250, 250);//旋转原点
                ct.rotate(minute * 6 * Math.PI / 180 + second / 60 * 6 * Math.PI / 180);//旋转角度 minute+second
                ct.beginPath();
                ct.lineWidth = 5;
                g = ct.createLinearGradient(0, 20, 0, -140);
                g.addColorStop(0, "#448EF3");
                g.addColorStop(1, "white");
                ct.strokeStyle = g;
                ct.moveTo(0, 20);
                ct.lineTo(0, -140);
                ct.stroke();
                ct.closePath();
                ct.restore();
                ct.save();//秒针
                ct.translate(250, 250);//旋转原点
                ct.rotate(second * 6 * Math.PI / 180);//旋转角度
                ct.beginPath();
                ct.lineWidth = 1;
                ct.strokeStyle = "blue";
                g = ct.createLinearGradient(0, 20, 0, -180);
                g.addColorStop(0, "blue");
                g.addColorStop(1, "white");
                ct.strokeStyle = g;
                ct.moveTo(0, 20);
                ct.lineTo(0, -180);
                ct.stroke();
                ct.closePath();
                ct.restore();
                ct.beginPath(); //中心
                ct.lineWidth = 4;
                ct.strokeStyle = "red";
                ct.arc(250, 250, 2, 0, 360, true);
                ct.stroke();
                ct.closePath();
            }
            
            window.onload = function(){
                time();
                setInterval(time, 1000);
            }
        </script>
    </body>
</html>
------------------------------
图片资源：
qq.png