钟表读数练习题生成器单文件 HTML 版可打印

csx · 发表于 2025-1-14 13:41

描述：供小学生学习钟表表盘认读练习的HTML版程序源码，打开或刷新即可生成 50 个随机表盘，供练习，可以直接在电脑上使用或打印为纸质版练习

打开记事本,将代码复制粘贴进去,另存为"练习.html",注意扩展名必须为html或htm,不能是txt.用浏览器打开保存的网页即可

[AppleScript] 纯文本查看 复制代码

<!DOCTYPE html>
<html lang="zh_CN">

<head>
    <meta charset="UTF-8">
    <title>钟表读数练习</title>
    <style>
        svg {
            width: 200px;
            height: 200px;
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>

    <script>
        function initClocks(num){
                // 创建一个DOM解析器
                const parser = new DOMParser();

                for(let id=0;id<num;id++){
                        const svgTemplate = `<svg id="clock${id}" viewBox="0 0 100 100"></svg>`;
                        // 将模板字符串解析为DOM文档
                        const svgDoc = parser.parseFromString(svgTemplate, 'text/html');
                        // 获取解析后的SVG元素
                        const svgElement = svgDoc.body.firstChild;
                        // 将SVG元素添加到当前HTML文档的body元素中
                        document.body.appendChild(svgElement);
                }
        }

        function drawClock(clockid, hour, minute) {
            // 获取SVG元素
            const svg = document.getElementById(clockid);

            // 清空之前可能存在的内容
            svg.innerHTML = '';
                        const r_in = 35;
                        const r_out = 50;

            // 绘制表盘外圆
            const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
            circle.setAttribute('cx', r_out);
            circle.setAttribute('cy', r_out);
            circle.setAttribute('r', r_out-10);
            circle.setAttribute('stroke', 'black');
            circle.setAttribute('fill', 'none');
            svg.appendChild(circle);

            // 绘制刻度
            for (let i = 0; i < 60; i++) {
                const angle = (i / 60) * 2 * Math.PI;
                const x = r_out + r_in * Math.sin(angle);
                const y = r_out - r_in * Math.cos(angle);
                                const x_t = r_out + (r_in-5) * Math.sin(angle);
                const y_t = r_out - (r_in-5) * Math.cos(angle);
                const innerX = r_out + (r_in+5) * Math.sin(angle);
                const innerY = r_out - (r_in+5) * Math.cos(angle);
                const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');

                                // 根据是否是5分钟刻度来设置不同的样式
                if (i % 5 === 0) {
                    line.setAttribute('stroke-width', '1');
                } else {
                    line.setAttribute('stroke-width', '0.2');
                }
                line.setAttribute('x1', x);
                line.setAttribute('y1', y);
                line.setAttribute('x2', innerX);
                line.setAttribute('y2', innerY);
                line.setAttribute('stroke', 'black');
                svg.appendChild(line);

                // 在12、3、6、9点位置添加数字标注
                if (i === 0 || i === 15 || i === 30 || i === 45) {
                    const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
                    text.setAttribute('x', x_t);
                    text.setAttribute('y', y_t);
                    text.setAttribute('text-anchor','middle');
                    text.setAttribute('dominant-baseline','middle');
                    text.style.fontSize = '9px';
                    text.textContent = i === 0? 12 : (i/5);
                    svg.appendChild(text);
                }
            }

            // 计算时针角度
            const hourAngle = ((hour % 12) + minute / 60) * (2 * Math.PI / 12);
            const hourX = r_out + 20 * Math.sin(hourAngle);
            const hourY = r_out - 20 * Math.cos(hourAngle);
            const hourHand = document.createElementNS('http://www.w3.org/2000/svg', 'line');
            hourHand.setAttribute('x1', r_out);
            hourHand.setAttribute('y1', r_out);
            hourHand.setAttribute('x2', hourX);
            hourHand.setAttribute('y2', hourY);
            hourHand.setAttribute('stroke', 'black');
            hourHand.setAttribute('stroke-width', '4');
            svg.appendChild(hourHand);

            // 计算分针角度
            const minuteAngle = (minute / 60) * 2 * Math.PI;
            const minuteX = r_out + 25 * Math.sin(minuteAngle);
            const minuteY = r_out - 25 * Math.cos(minuteAngle);
            const minuteHand = document.createElementNS('http://www.w3.org/2000/svg', 'line');
            minuteHand.setAttribute('x1', r_out);
            minuteHand.setAttribute('y1', r_out);
            minuteHand.setAttribute('x2', minuteX);
            minuteHand.setAttribute('y2', minuteY);
            minuteHand.setAttribute('stroke', 'black');
            minuteHand.setAttribute('stroke-width', '2');
            svg.appendChild(minuteHand);
        }

                let num=50;
                initClocks(num);
                function genInt(min, max){
                        const floatRandom = Math.random();
                        const difference = max - min;

                        // random between 0 and the difference
                        const random = Math.round(difference * floatRandom);

                        const randomWithinRange = random + min;

                        return Math.round(randomWithinRange);
                }
        for(let i=0;i<num;i++){
                        drawClock("clock"+i, genInt(0,12), genInt(0,59));
                }
    </script>
</body>

</html>

账号		自动登录	找回密码
密码			立即注册

钟表读数练习题生成器单文件 HTML 版可打印

论坛元老

灌水之王