H5+JS制作钟表

最新推荐文章于 2024-06-04 17:34:26 发布
最新推荐文章于 2024-06-04 17:34:26 发布
阅读量1k 收藏 3
点赞数 1
分类专栏： H5 文章标签： H5 JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41451415/article/details/82906308
版权

源代码：

 <!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<center>
    			<canvas width="600" height="600" id="time-paint"></canvas>
    		</center>
    		<script>
    			var context = document.getElementById("time-paint").getContext("2d");
    			context.translate(300, 300); //原点设置
    			setInterval("draw()",1000);//隔1秒执行函数一次
    			function draw() {
    				//每次绘制图形之前 先清空画布所有的区域
    				context.clearRect(-300, -300, 600, 600);
    				var time = new Date();
    				var hour = time.getHours();
    				var minutes = time.getMinutes();
    				var seconds = time.getSeconds();
    				var dateNum = time.getFullYear() + "年" +
    					(time.getMonth() > 9 ? time.getMonth() : "0" + time.getMonth()) + "月" +
    					(time.getDay() > 9 ? time.getDay() : "0" + time.getDay()) + "日";
    				var timeNum = (hour > 9 ? hour : "0" + hour) +
    					":" + (minutes > 9 ? minutes : "0" + minutes) + ":" + (seconds > 9 ? seconds : "0" + seconds);
    				//钟表边
    				context.beginPath();
    				context.arc(0, 0, 200, Math.PI * 0, Math.PI * 2);
    				context.strokeStyle = "#660000"
    				context.lineWidth = "10";
    				context.fillStyle = "rgba(100,150,185,0.2)";
    				context.stroke();
    				context.fill();
    				context.closePath();
    				//中心原点
    				context.beginPath();
    				context.arc(0, 0, 13, Math.PI * 0, Math.PI * 2);
    				context.fillStyle = "white";
    				context.fill();
    				context.closePath();
    				
    				for(var i = 0; i < 60; i++) {
    					context.beginPath();
    					context.moveTo(0, -186);
    					context.lineTo(0, -192);
    					context.strokeStyle = "#BBBB00";
    					context.lineWidth = "3";
    					context.stroke();
    					context.closePath();
    					context.rotate(1 / 30 * Math.PI); //旋转坐标系
    				}
    				for(var i = 0; i < 12; i++) {
    					context.beginPath();
    					context.moveTo(0, -180);
    					context.lineTo(0, -192);
    					context.strokeStyle = "#AA7700";
    					context.lineWidth = "5";
    					context.stroke();
    					context.closePath();
    					context.rotate(1 / 6 * Math.PI); //旋转坐标系
    				}
                  //数字显示
    				context.beginPath();
    				context.font = "22px 'franklin gothic medium'";
    				context.strokeStyle = "black";
    				context.lineWidth = "1";
    				context.strokeText(dateNum, -85, 50);
    				context.strokeText(timeNum, -45, 80);
    				context.closePath();
    
    				//时针
    				var hours = hour >= 12 ? hour - 12 : hour;
    				context.beginPath();
    				context.rotate((hours + minutes / 60) * 30 / 180 * Math.PI);
    				context.moveTo(0, 30);
    				context.lineTo(0, -120);
    				context.strokeStyle = "#990000";
    				context.lineWidth = "8";
    				context.stroke();
    				context.closePath();
    				context.rotate(-(hours+minutes/60) * 30 / 180 * Math.PI);
    				//分针
    				context.rotate(minutes * 6 / 180 * Math.PI);
    				context.beginPath();
    				context.moveTo(0, 25);
    				context.lineTo(0, -150);
    				context.lineWidth = "5";
    				context.strokeStyle = "orange";
    				context.stroke();
    				context.closePath();
    				context.rotate(-minutes * 6 / 180 * Math.PI);
    				//绘制秒针
    				context.rotate(seconds * 6 / 180 * Math.PI);
    				context.beginPath();
    				context.moveTo(0, 30);
    				context.lineTo(0, -175);
    				context.lineWidth = '3';
    				context.strokeStyle = "red";
    				context.stroke();
    				context.closePath();
    				context.beginPath();
    				context.arc(0, -160, 5, Math.PI * 0, Math.PI * 2);
    				context.fillStyle = "red";
    				context.fill();
    				context.closePath();
    				context.rotate(-seconds * 6 / 180 * Math.PI);
    				//中心原点
    				context.beginPath();
    				context.arc(0, 0, 9, Math.PI * 0, Math.PI * 2);
    				context.fillStyle = "red";
    				context.fill();
    				context.closePath();
    			}
    		</script>
    	</body>
    </html>

效果图
显示效果

Sir.悟空
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
h5实现时钟效果
11-24
h5的canvas实现的时钟效果
html5script计时器,javascript实现秒表计时器的制作方法
weixin_35084134的博客
06-27 381
本文实例为大家分享了js秒表计时器的制作代码，供大家参考，具体内容如下具体代码：Documentdiv{margin-top:40px;margin-left:25px;margin-bottom:10px;width:20px;height:20px;}input{width:30px;height:30px;margin-left:20px;font-size:20px;color:#fff;...
JavaScript设置最简单版时钟
weixin_63286753的博客
03-22 352
及其简单的JavaScript时钟
h5页面源码开源 h5制作平台源码 类似易企秀
最新发布
duizhangdaren的博客
06-04 391
平台内置了多种动画效果，如自动翻页、页面滚动、元素淡入淡出等，这些效果能够提升页面的视觉效果，吸引用户的注意力。背景音乐：用户可以为自己的H5页面添加动感的背景音乐，营造出更加浓厚的氛围，增强用户的参与感和沉浸感。平台内置了多套精心设计的模板，涵盖了各种场合和需求，用户可以直接选择模板进行修改，快速制作出符合自己需求的H5页面。平台支持一键分享到各大社交平台，如微信、QQ等，用户可以将自己的H5页面快速分享给朋友或粉丝，实现裂变传播。
JavaScript 制作实时电子时钟 ，点赞加关注经典案例持续更新~
小十七的个人分享博客
11-16 2396
效果动图，此动图时间仅为当时录制的时间，实际运行时间为实时时间。
乐易秒表HTML5开发
12-10
乐易秒表是基于html5技术写的一个小功能，该功能适用于新手参考
h5+css+js音乐播放器
08-21
其中，利用H5、CSS和JavaScript（JS）来开发音乐播放器是一个常见的实践，它使得用户可以直接在网页上享受音乐而无需额外的插件或应用程序。本文将深入探讨如何利用这些技术实现一个基础的音乐播放器。 一、...
H5+css3+js搭建带验证码的登录页面
10-14
【H5+CSS3+JS搭建带验证码的登录页面】是一个综合性的前端开发主题，它涉及到HTML5、CSS3和JavaScript三个核心技术。在这个项目中，开发者将创建一个包含验证码功能的用户登录界面，以增强安全性并防止自动化机器人...
H5+canvas+js实现连线题
05-09
综上所述，"H5+canvas+js实现连线题"项目涵盖了前端开发的多个重要方面，包括HTML5 Canvas的图形绘制、JavaScript的事件处理和算法设计，以及良好的交互体验构建。对于想要提升Web开发技能或对互动教育应用感兴趣的...
基于h5+svg制作的自定义地图实现拖拽、缩放、鼠标覆盖等事件
04-02
总的来说，基于H5+SVG制作的自定义地图不仅能够提供丰富的视觉效果，还允许用户进行各种交互操作，极大地提升了用户体验。通过这个项目，开发者不仅可以掌握SVG的基本用法，还能学习到H5事件处理和DOM操作，这对于...
h5+js+css 2048.zip
06-13
《使用H5+JS+CSS实现2048游戏详解》 2048是一款深受玩家喜爱的数字拼图游戏，其简洁的界面和有趣的玩法吸引了大量用户。在这个项目中，我们将探讨如何利用HTML5（H5）、JavaScript（JS）和CSS这三种核心技术来实现...
一个javascript做的时钟
05-31
一个javascript做的时钟请指教
H5实现计时器
G_JD1234的博客
08-14 1411
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>方法</title> <style type="text/css"> #div1{ width: 200px; height: 100px; posi...
Js实现简单的秒表
进击的葱
12-17 5836
描述： 实现一个简单的秒表，点击启动按钮时开始计时，随后启动按钮变为暂停， 点击暂停暂停计时，点击复位回到最初始状态。 效果： 代码： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&
如何使用html实现在线秒表,javascript实现一款好看的秒表计时器
weixin_36406678的博客
05-30 1840
本文实例为大家分享了javascript实现秒表计时的具体代码，供大家参考，具体内容如下实现图片：分+秒+跑秒时+分+秒+跑秒需求分析：1、显示整个秒表页面；2、在点击“开始”按钮之后，开始计时，并将按钮转为“暂停”按钮，在点击“暂停”按钮之后，将按钮转为“开始”按钮，并停止计时；3、在点击“复位”按钮之后，将显示的计时清零，并将按钮变回“开始”按钮。页面结构：00 :00 00开始复位页面的主体...
JS简易秒表计时器
热门推荐
前端向朔
06-06 2万+
<html lang="en"> <head> <meta charset="UTF-8"> <title>js计时器</title> </head> <body> <input type="text" value="00:00"> <input type="button" value="开始"> <input type="button" value="结束"> <input type="butto
h5和RN倒计时实现方法
小小喵的博客
01-02 1499
工作中我们经常遇到需要倒计时的功能，那么具体如何实现呢，下面我把自己写过的几种方法提供给大家，希望大家能共同进步，转载要注明出处哦！ 第一种写法： html： &lt;div class=""&gt; &lt;div class=""&gt; 距结束剩余 &lt;b v-if="time.day&gt;0"&gt; &lt;span v-t
h5计时器（requestAnimationFrame）
ICY___的博客
05-27 2572
上次写节拍器的时候用到了h5计时器，但只是简单的记录了一点，今天特在此总结一下。 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <s...
h5+js+.net framwork 开发技术文档
09-25
H5是指HTML5，是一种用于构建和呈现Web页面的标准化技术。它提供了很多新特性和功能，包括更丰富的媒体操作，地理定位，离线应用等。通过使用H5，开发人员可以更加灵活和高效地开发Web应用程序。 JS指的是JavaScript，是一种脚本语言，广泛用于Web开发中。它能够与HTML和CSS一起，用于实现页面的交互和动态效果。使用JS，开发人员可以实现一些复杂的功能，包括表单验证，数据操作，动画效果等。 .NET Framework是微软公司开发的应用程序开发平台，用于构建应用程序和Web服务。它提供了广泛的功能和库，包括安全性，数据访问，图形操作等。开发人员可以使用.NET Framework来开发各种类型的应用程序，包括桌面应用程序，Web应用程序和移动应用程序。 开发技术文档是为了方便其他开发人员理解和使用相关技术而编写的文档。在H5，JS和.NET Framework开发技术文档中，可能包含以下内容： 1. 技术概述：介绍H5，JS和.NET Framework的基本概念和特点。 2. 环境搭建：包括安装和配置开发环境的步骤，例如安装相关的开发工具和平台。 3. 开发指南：提供关于如何使用H5，JS和.NET Framework开发应用程序的详细指导，包括语法，API文档和示例代码等。 4. 工具和资源：介绍一些有用的开发工具和资源，例如调试器，集成开发环境和开发者社区等。 5. 常见问题解答：列出一些常见的问题和解决方法，帮助开发人员解决开发过程中可能遇到的问题。 总之，H5，JS和.NET Framework开发技术文档是开发人员进行相关技术开发时的重要参考资料，它们提供了详细的技术信息和指导，帮助开发人员更好地理解和应用这些技术。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值