HTML+js手绘时钟动态效果

好多bug

已于 2022-04-13 16:41:59 修改

阅读量721

点赞数

CC 4.0 BY-SA版权

分类专栏： html内js实例文章标签： html js javascript

于 2022-03-19 16:26:28 首次发布

本文链接：https://blog.youkuaiyun.com/leaf_leaf__/article/details/123597191

本文介绍了一位开发者在创建HTML+JS手绘时钟动态效果时遇到的问题及解决方案。开发者起初通过外链引入JS文件，但未能在网页上显示效果。为解决此问题，他们选择将JS代码直接嵌入HTML的script标签中，最终成功实现了显示下午16:25的时钟效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

遇到的问题：

效果：

源码：

遇到的问题：

使用外链将js链入后网页上并不显示js部分的内容，后直接将js部分使用script标签写在html内

效果：

截图时间为下午16:25

源码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>4.1手绘时钟</title>
	</head>
	<body>
		<h3>手绘时钟</h3>
		<hr >
		<canvas id="clockCanvas" width="300" height="300" style="border: 1px solid">
			对不起，您的浏览器不支持HTML画布API
		</canvas>
		
		
		<script type="text/javascript">
			var c=document.getElementById('clockCanvas');
			var ctx=c.getContext('2d');
			
			
			//绘制时钟
			function drawClock(){
				ctx.save();
				
				ctx.clearRect(0,0,300,300);