js实现时钟效果

最新推荐文章于 2022-04-12 23:14:24 发布

a267252a

最新推荐文章于 2022-04-12 23:14:24 发布

阅读量95

点赞数

本文链接：https://blog.csdn.net/a267252a/article/details/118163592

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .clocks{
            height: 500px;
            margin: 25px auto;
            position: relative;
            width: 500px;
        }
    </style>

    <script src="./HTML5高级实践素材/项目实践课素材/第二部分/综合项目2/Hou/assets/js/jquery.min.js"></script>
</head>
<body>
    <header>
        <h2>时钟</h2>
    </header>
    <div class="clocks">
        <canvas id="canvas" width="500" height="500"></canvas>
    </div>
    <script>
        //定义变量
        var canvas,ctx;
        var clockRadius = 250;
        var clockImage;
        //清空
        function clear() {
            ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
        }
        function drawScene()
        {
            //清空
            clear();
            //得到系统时间
            var date = new Date();
            var hours = date.getHours();
            var minutes = date.getMinutes();
            var seconds = date.getSeconds();
            hours = hours > 12 ? hours - 12 : hours;
            var hour = hours + minutes / 60;
            var minute = minutes + seconds / 60;

            // console.log(hours+" "+minutes+" "+seconds);
            //保存
            ctx.save();
            //画外框
            ctx.drawImage(clockImage,0,0,500,500);
            ctx.translate(canvas.width / 2,canvas.height / 2);
            ctx.beginPath();
            //画数字
            ctx.font = '36px Arial';
            ctx.fillStyle = '#000';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            for(var n = 1;n <= 12;n++){
                var theta = (n - 3) * (Math.PI * 2)/12;
                var x = clockRadius *0.7*Math.cos(theta);
                var y = clockRadius * 0.7 * Math.sin(theta);
                ctx.fillText(n,x,y);
            }
            //画小时
            ctx.save();
            var theta = (hour - 3) * 2 * Math.PI / 12;
            ctx.rotate(theta);
            ctx.beginPath();
            ctx.moveTo(-15,-5);
            ctx.lineTo(-15,5);
            ctx.lineTo(-15,5);
            ctx.lineTo(clockRadius *0.5,1);
            ctx.lineTo(clockRadius *0.5,-1);
            ctx.fill();
            ctx.restore();
            //画分钟
            ctx.save();
            var theta = (minute - 15) * 2 * Math.PI / 60;
            ctx.rotate(theta);
            ctx.beginPath();
            ctx.moveTo(-15,-4);
            ctx.lineTo(-15,4);
            ctx.lineTo(clockRadius *0.8,1);
            ctx.lineTo(clockRadius *0.8,-1);
            ctx.fill();
            ctx.restore();

            //画秒钟
            ctx.save();
            var theta = (seconds - 15) * 2 * Math.PI / 60;
            ctx.rotate(theta);
            ctx.beginPath();
            ctx.moveTo(-15,-3);
            ctx.lineTo(-15,3);
            ctx.lineTo(clockRadius *0.9,1);
            ctx.lineTo(clockRadius *0.9,-1);
            ctx.fillStyle = '#0f0';
            ctx.fill();
            ctx.restore();
            // ctx.fillRect(50,50,100,100);

            ctx.restore();
        }
        //初始化
        $(function(){
            canvas = document.getElementById('canvas');
            ctx = canvas.getContext('2d');
            clockImage = new Image();
            clockImage.src = './HTML5高级实践素材/项目实践课素材/第一部分/第7章/img/125855_nnla_89964.png';
            setInterval(drawScene,1000);
        });
    </script>
</body>
</html>

a267252a

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实现时钟效果

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .clocks{ .
复制链接

扫一扫