首页手记绚丽的时钟,可以来看看

绚丽的时钟,可以来看看

标签：

Html5 前端工具

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>表</title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            #canvas{
                background: lightseagreen;;
                box-shadow: 10px 10px 10px rgba(0,0,0,0.5);
            }
            #a2{
                width: 600px;
                height: 600px;
            }
            #a2:before{
                width: 600px;
                height: 600px;
                opacity: 0.1;
                position: absolute;
                border-radius: 50%;
                z-index: 5;
                left: 0;
                top: 0;
                content: '你';
                font-size: 600px;
                color: red;
                background-color: gold;
                animation: move2 5s linear infinite;
            }
            @keyframes move2{
                0%{
                    transform: scale3d(0.1,0.1,0.1);
                    /*opacity: 0.5;*/
                }
                100%{
                    transform: scale3d(2,2,2);
                    /*opacity: 0.5;*/
                }
            }
            #a1{
                position: absolute;
                top: 0;
                width: 50px;
                animation: move3 5s linear infinite;
            }
            @keyframes move3{
                0%{
                    left: 0px;
                    top:300px;
                    opacity: 1;
                }
                100%{
                    left: 600px;
                    top:300px;
                    opacity: 0;
                }
            }
        </style>
    </head>
    <body>
        <canvas id="canvas" width="600" height="600"></canvas>
        <div id="a2"></div>
        <img id="a1" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/阿童木.png"/>
    </body>
    <script type="text/javascript">
        var canvas=document.getElementById('canvas');
        var a=canvas.getContext('2d');
            function randomR (m,n) {
            return Math.floor(Math.random()*(n-m+1)+m);
        }
        function randomC () {
            var r=randomR(0,250);
            var g=randomR(0,250);
            var b=randomR(0,250);
            var strcolor='rgb('+r+','+g+','+b+')';
            return strcolor;
        }
        var num=0;
        function move () {
        canvas.style.backgroundColor=randomC();
//      canvas.style.boxShadow.backgroundColor=randomC();
        a.restore();
        a.clearRect(0,0,canvas.width,canvas.height);

            //画外层表
        a.beginPath();
        a.arc(300,300,280,0,Math.PI*2,false);
        a.fillStyle=randomC();
        a.fill();
        //画内层
        a.beginPath();
        a.arc(300,300,260,0,Math.PI*2,false);
        a.fillStyle='white';
        a.fill();
        a.save();
        //平移
        a.translate(300,300);
//      a.save();
            //画分刻度
        for (var i=0;i<60;i++) {
            a.restore();
            a.save();
            a.translate(300,300);
            a.beginPath();
            a.rotate(Math.PI/30*i);
            a.fillStyle=randomC();
            a.fillRect(0,-260,3,20);
        }
        //数字
        var str=['12','1','2','3','4','5','6','7','8','9','10','11'];

        for (var i=0;i<12;i++) {
            a.restore();
            a.save();
            a.translate(300,300);
            a.beginPath();
            a.rotate(Math.PI/6*i);
            a.font='50px 宋体';
            a.strokeStyle=randomC();
            a.strokeText(str[i],-12,-200);
//          a.rotate(2*Math.PI-2*Math.PI/6*i);
//          a.fillRect(0,-260,5,40);
        }
        //画时刻度
        for (var i=0;i<12;i++) {
            a.restore();
            a.save();
            a.translate(300,300);
            a.beginPath();
            a.rotate(Math.PI/6*i);
            a.fillStyle='black';
            a.fillRect(0,-260,5,40);
        }
        //获取时间
        var now=new Date();
        var hour=now.getHours();
        var minutes=now.getMinutes();
        var senconds=now.getSeconds();
        num++;
            //画时针
        a.restore();
        a.save();
        a.translate(300,300);
        var y1=hour/12;
        var y11=minutes/2;
        a.rotate(Math.PI*2*y1+Math.PI+Math.PI*y11/180);
        a.beginPath();
        a.fillStyle=randomC();
        a.fillRect(0,0,7,100);

        //画分针
        a.restore();
        a.save();
        a.translate(300,300);
        var y2=minutes/60;
        var y22=senconds/10;
        a.rotate(Math.PI*2*y2+Math.PI+Math.PI*y22/180);
        a.beginPath();
        a.fillStyle=randomC();
        a.fillRect(0,0,5,180);
        //画秒针
        a.restore();
        a.save();
        a.translate(300,300);
        var y3=senconds/60;
        a.rotate(Math.PI*2*y3+Math.PI);
//      for (var i=0;i<num;i++) {
//          a.rotate(Math.PI/30);
//      }
        a.beginPath();
        a.fillStyle=randomC();
        a.fillRect(0,0,3,200);

        //画中心圆
        a.beginPath();
        a.arc(0,0,10,0,Math.PI*2,false);
        a.strokeStyle=randomC();
        a.lineWidth='3px';
        a.fillStyle='white';
        a.fill();
        a.stroke();
        console.log(num);
        }
        move();
        setInterval(move,1000);

    </script>
</html>

点击查看更多内容