二年级——钟表学习工具

最新推荐文章于 2024-07-17 18:00:00 发布

阿贵小白

最新推荐文章于 2024-07-17 18:00:00 发布

阅读量603

点赞数

文章标签： html 其他

本文链接：https://blog.csdn.net/weixin_38491074/article/details/121893143

版权

背景：今天尝试个自己二年纪的儿子出题目，但是在出题的时候，发现认识时间，画钟表的时间非常的不方便，所以在网上找了很多的相关的代码，稍微修改了一下，写了一个html文件，希望对后面的家长提供一些帮助

参考：canvas绘制表盘时钟 - 幽幽冷瞳 - 博客园<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"https://www.cnblogs.com/ifworld/p/7696188.html

功能：根据学习进度，当秒的数字为空时，秒针不会出现

代码：这个功能是使用canvas绘制出来的。边学边抄的，哪里有问题。因为是自己使用，所以很多的判断条件，我都没有处理，还请尽量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    　　<title>canvas绘制表盘</title>
</head>
<body>
    <div id='clockDiv'>
        <span>小时: </span><input type="text" id="hoursValue" />
        <span>分钟: </span><input type="text" id="minValue" />
        <span>秒: </span><input type="text" id="secValue" />
        <button type="button" onclick="changClick()">提交</button>
    </div>
    　　<canvas id='box' width="300" height="300">
        　　　　您的浏览器不支持canvas
        </canvas>
</body>
<script>
    var box = document.getElementById('box');
    var cxt = box.getContext('2d');
    // 时钟动起来
    var timer = null;
    function clock(hour, mm, ss) {
        var m = parseInt(mm);
        var h = parseInt(hour) + m / 60;
        h = h > 12 ? h - 12 : h;
        // 清画布
        cxt.clearRect(0, 0, 700, 700);
        cxt.font = "bold 14px Arial";
        // 画表盘
        cxt.lineWidth = 6;
        cxt.beginPath();
        cxt.arc(150, 150, 100, 0, 2 * Math.PI);
        cxt.stroke();
        // 画时钟刻度
        for (var i = 0; i < 12; i++) {
            cxt.save();
            cxt.translate(150, 150);
            cxt.rotate(30 * i * Math.PI / 180);
            cxt.lineWidth = 3;
            cxt.beginPath();
            cxt.moveTo(0, -80);
            cxt.lineTo(0, -92);
            if (i == 0) {
                hourCxt = 12;
            }
            else {
                hourCxt = i;
            }
            cxt.fillText(hourCxt, -4, -65)
            cxt.stroke();
            cxt.restore();
        }
        //画分钟刻度
        for (var i = 0; i < 60; i++) {
            cxt.save();
            cxt.translate(150, 150);
            cxt.rotate(6 * i * Math.PI / 180);
            cxt.lineWidth = 2;
            cxt.beginPath();
            cxt.moveTo(0, -86);
            cxt.lineTo(0, -92);
            cxt.stroke();
            cxt.restore();
        }
        // 画时针
        cxt.save();
        cxt.lineWidth = 5;
        cxt.translate(150, 150);
        cxt.rotate(h * 30 * Math.PI / 180);
        cxt.beginPath();
        cxt.moveTo(0, 6);
        cxt.lineTo(0, -40);
        cxt.stroke();
        cxt.restore();
        // 画分针
        cxt.save();
        cxt.lineWidth = 3;
        cxt.translate(150, 150);
        cxt.rotate(m * 6 * Math.PI / 180);
        cxt.beginPath();
        cxt.moveTo(0, 8);
        cxt.lineTo(0, -60);
        cxt.stroke();
        cxt.restore();
        if ("" != ss) {
            // 画秒针
            s = parseInt(ss);
            cxt.save();
            cxt.lineWidth = 1;
            cxt.translate(150, 150);
            cxt.rotate(s * 6 * Math.PI / 180);
            cxt.beginPath();
            cxt.moveTo(0, 10);
            cxt.lineTo(0, -75);
            cxt.stroke();
            cxt.restore();

            // 画秒针上的园
            cxt.save();
            cxt.lineWidth = 2;
            cxt.translate(150, 150);
            cxt.rotate(s * 6 * Math.PI / 180);
            cxt.beginPath();
            cxt.arc(0, -60, 2, 0, 360, false);
            cxt.stroke();
            cxt.fill();
            cxt.restore();
        }

        // 画中心的小圆固定三根针
        cxt.save();
        cxt.beginPath();
        cxt.lineWidth = 2;
        cxt.translate(150, 150);
        cxt.arc(0, 0, 2, 0, 360, false);
        cxt.stroke();
        cxt.fill();
        cxt.restore();

    }
    function changClick() {
        hour = document.getElementById('hoursValue').value;
        min = document.getElementById('minValue').value;
        ss = document.getElementById('secValue').value;
        clock(hour, min, ss);
    }
    clock(12,0,0)
</script>
</html>

html文件下载：https://download.csdn.net/download/weixin_38491074/61794354https://download.csdn.net/download/weixin_38491074/61794354

阿贵小白

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
二年级——钟表学习工具

背景：今天尝试个自己二年纪的儿子出题目，但是在出题的时候，发现认识时间，画钟表的时间非常的不方便，所以在网上找了很多的相关的代码，稍微修改了一下，写了一个html文件，希望对后面的家长提供一些帮助参考：canvas绘制表盘时钟 - 幽幽冷瞳 - 博客园<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"https://www.cnblogs.com/ifworld/p/7696188.html.
复制链接

扫一扫