HTML5时钟用来教小朋友认识时钟

灌水王 · 发表于 2022-12-4 21:16:47

专门用来教小朋友认识时钟
[HTML]

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML5time</title>
<script src="./jquery.min.js"></script>
<style>
.clocks {
height: 900px;
margin: 25px auto;
position: relative;
width: 900px;
}
</style>
</head>
<body>
<header>
</header>
<div class="clocks">
<canvas id="canvas" width="800" height="800"></canvas>
</div>
</body>
<script>
//初始化参数
var canvas, ctx;
var clockRadius = 250;
var clockImage;
//清空画布
function clear() {
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}
//画图
function drawScene(hours = 0,minutes = 0,seconds = 0) {
clockImage = new Image();
clockImage.src = "./time.png";//本地图片
clockImage.onload = function(){ctx.drawImage(clockImage, 50, 50, 700, 700)};
clear();
//获取时间
var date = new Date();
var hours = hours>0?hours:date.getHours();
var minutes = minutes>0?minutes:date.getMinutes();
var seconds = seconds>0?seconds:date.getSeconds();
hours = hours > 12 ? hours - 12 : hours;
var hour = hours + minutes / 60;
var minute = minutes ;
ctx.save();
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 * 1 * Math.cos(theta);
var y = clockRadius * 1 * Math.sin(theta);
ctx.fillText(n, x, y);
}
//标注分钟
for (var n = 1; n <= 60; n++) {
var theta = (n-15) * (Math.PI * 2) / 60;
var x = clockRadius * 1.4 * Math.cos(theta);
var y = clockRadius * 1.4 * Math.sin(theta);
ctx.fillStyle = 'red';
ctx.font = "20px sans-serif"
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(clockRadius * 0.7, 1);
ctx.lineTo(clockRadius * 0.7, -1);
ctx.fillStyle = 'blue';
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 * 1, 1);
ctx.lineTo(clockRadius * 1, -1);
ctx.fillStyle = 'red';
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 * 1.2, 1);
ctx.lineTo(clockRadius * 1.2, -1);
ctx.fillStyle = '#D5D52B';
ctx.fill();
ctx.restore();
ctx.restore();
}
$(function(){
canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
//setInterval(drawScene, 1000);//当前时间
drawScene(12,1,30);//手动调整时间
});
</script>
</html>

复制代码

钟表背景图片

效果图

灌水王 · 发表于 2022-12-4 21:17:35

https://img12.360buyimg.com/ddimg/jfs/t1/6650/26/26983/43130/637d6e84E2b619ce6/5fb355870546c27e.png

wwwak18 · 发表于 2022-12-4 21:18:29

[HTML]

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML5time</title>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<style>
.clocks {
height: 900px;
margin: 25px auto;
position: relative;
width: 900px;
}
#canvas{
background:url();
background-size:800px 800px;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<header>
</header>
<div class="clocks">
<canvas id="canvas" width="800" height="800"></canvas>
</div>
</body>
<script>
//初始化参数
var canvas, ctx;
var clockRadius = 250;
var clockImage;
//清空画布
function clear() {
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}
//画图
function drawScene(hours = 0,minutes = 0,seconds = 0) {
clockImage = new Image();
clockImage.src = "";//本地图片
clockImage.onload = function(){ctx.drawImage(clockImage, 50, 50, 700, 700)};
clear();
//获取时间
var date = new Date();
var hours = hours>0?hours:date.getHours();
var minutes = minutes>0?minutes:date.getMinutes();
var seconds = seconds>0?seconds:date.getSeconds();
hours = hours > 12 ? hours - 12 : hours;
var hour = hours + minutes / 60;
var minute = minutes ;
ctx.save();
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 * 1 * Math.cos(theta);
var y = clockRadius * 1 * Math.sin(theta);
ctx.fillText(n, x, y);
}
//标注分钟
for (var n = 1; n <= 60; n++) {
var theta = (n-15) * (Math.PI * 2) / 60;
var x = clockRadius * 1.4 * Math.cos(theta);
var y = clockRadius * 1.4 * Math.sin(theta);
ctx.fillStyle = 'red';
ctx.font = "20px sans-serif"
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(clockRadius * 0.7, 1);
ctx.lineTo(clockRadius * 0.7, -1);
ctx.fillStyle = 'blue';
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 * 1, 1);
ctx.lineTo(clockRadius * 1, -1);
ctx.fillStyle = 'red';
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 * 1.2, 1);
ctx.lineTo(clockRadius * 1.2, -1);
ctx.fillStyle = '#D5D52B';
ctx.fill();
ctx.restore();
ctx.restore();
}
$(function(){
canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
setInterval(drawScene, 1000);//当前时间
// drawScene(12,1,30);//手动调整时间
});
</script>
</html>

复制代码

灌水王 · 发表于 2022-12-4 21:18:40

我把他搞下来了，给你补上链接，谢谢分享

https://wkdxz.lanzout.com/iLaaM0gl170b
密码:7i21

灌水王 · 发表于 2022-12-4 21:19:04

dd，支持一下

灌水王 · 发表于 2022-12-4 21:19:37

没有jquery.min.js脚本？

灌水王 · 发表于 2022-12-4 21:20:08

那个无法上传,网上随便搞一个就行了

灌水王 · 发表于 2022-12-4 21:21:04

感谢分享

灌水王 · 发表于 2022-12-4 21:21:50

写得不错。

灌水王 · 发表于 2022-12-4 21:22:06

$(function)可以用window.onload

灌水王 · 发表于 2022-12-4 21:22:43

为啥我的不会动，js要放入同目录了

灌水王 · 发表于 2022-12-4 21:23:25

感谢分享

江南村 · 发表于 2022-12-4 21:24:03

你确定你一下,jQuery的路径问题,直接在网页上面F12是否能打开jQuery文件

HTML5时钟用来教小朋友认识时钟

本帖子中包含更多资源

本帖子中包含更多资源

本帖子中包含更多资源