HTML+JS实现时钟

HTML+JS实现时钟

效果:

知识点:

  1. Canvas 对象及其属性。
  2. setTimeout() 方法,用于在指定的毫秒数后调用函数或计算表达式。
  3. Date()对象
  4. 时分秒对应弧度制的计算:
      var pi=Math.PI
      var dat=new Date()
	  var hours=dat.getHours()  //获取小时
	  var minuntes=dat.getMinutes()  //获取分钟
	  var seconds=dat.getSeconds()   //获取秒
	  var seconds_angle=pi/180*(360/60)*seconds   //计算秒针的弧度
	  var minuntes_angle=pi/180*(360/60)*minuntes+seconds_angle/60   计算分针的弧度  
      var hours_angle=pi/180*(360/12)*hours+minuntes_angle/12    计算时针的弧度

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>时钟</title>
		
		<style type="text/css">
			#Canvas
			{
				display: block;
				margin: auto;
				background-color:darkslategrey;
				
			}
		</style>
		
		<script type="text/javascript">
			
			window.onload=function()
			{
				 window.requestAnimationFrame(draw_HMS)
			}
			
			function draw_arc()   //画表盘
			{
				var pi=Math.PI
				var Tools=document.getElementById("Canvas").getContext("2d")
				
				Tools.save()
				Tools.translate(250,250)
				Tools.beginPath()
				Tools.arc(0,0,155,0,pi*2,true)
				Tools.lineWidth=5
				Tools.strokeStyle="bisque"
				Tools.closePath()
				Tools.stroke()
				Tools.restore()
				
				
				Tools.save()
				Tools.translate(250,250)
				Tools.beginPath()
				Tools.arc(0,0,5,0,pi*2,true)
				Tools.fill()
				Tools.closePath()
				Tools.restore()
				
				var i;
				for(i=1;i<=60;i++)
				{
					Tools.save()
					Tools.translate(250,250)
					Tools.rotate(-pi/2+(pi/180)*(360/60)*i)
					Tools.beginPath()
					
					
					
					if(i%5==0) {
						Tools.moveTo(114,0)
						Tools.strokeStyle="crimson"
						Tools.lineWidth=5
					}
					else
					{
						Tools.moveTo(120,0)
						Tools.strokeStyle="aqua"
						Tools.lineWidth=3
                       
					}
					Tools.lineTo(150,0)
					Tools.closePath()
					Tools.stroke()
					Tools.restore()
				}
				
			}
			
			function draw_HMS()   //计算 时分秒针弧度制,设置属性
			{
				window.setTimeout(function(){
					window.requestAnimationFrame(draw_HMS)
				},1000/5)
				clear()
				draw_arc()
				var pi=Math.PI
				var dat=new Date()
				var hours=dat.getHours()  //获取小时
				var minuntes=dat.getMinutes()  //获取分钟
				var seconds=dat.getSeconds()   //获取秒
				
				var seconds_angle=pi/180*(360/60)*seconds   //计算秒针的弧度
				var minuntes_angle=pi/180*(360/60)*minuntes+seconds_angle/60   计算分针的弧度  
				var hours_angle=pi/180*(360/12)*hours+minuntes_angle/12    计算时针的弧度
				
				var seconds_length=108   //设置指针长度
				var minuntes_length=90
				var hours_length=62
				
				var seconds_width=2   //设置指针宽度
				var minuntes_width=3
				var hours_width=4
				
				var seconds_color="red"   //设置指针颜色
				var minuntes_color="green"
				var hours_color="darkred"
				
				var seconds_size=25  
				var minuntes_size=15
				var hours_size=10
				
				draw_h_m_s(seconds_angle,seconds_length,seconds_width,seconds_color,seconds_size,pi)
				draw_h_m_s(minuntes_angle,minuntes_length,minuntes_width,minuntes_color,minuntes_size,pi)
				draw_h_m_s(hours_angle,hours_length,hours_width,hours_color,hours_size,pi)


			}
			
			function draw_h_m_s(angle,length,width,color,size,pi)   //画 时分秒针
			{
				
				var Tools=document.getElementById("Canvas").getContext("2d")
				Tools.save()
				Tools.translate(250,250)   //将每次画指针的原点移到(250,250)
				Tools.rotate(-pi/2+angle)
				Tools.lineWidth=width
				Tools.beginPath()
				Tools.moveTo(-size,0)
				Tools.lineTo(length,0)
				Tools.strokeStyle=color
				Tools.stroke()
				Tools.closePath()
				Tools.restore()
				
				
			}
			
			function clear()   //清除画布
			{
				var Tools=document.getElementById("Canvas")
				console.log("2")
				var ss=Tools.getContext("2d")
				ss.clearRect(0,0,500,500)
			}
			
		</script>
	</head>
	<body>
		<canvas id="Canvas" width="500" height="500"></canvas>
	</body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 浙大版《C语言程序设计(第3版)》题目集 习题8-1 拆分实数的整数与小数部分

    其中x是被拆分的实数(0≤x<10000),intpart和fracpart分别是将实数x拆分出来的整数部分与小数部分。

    C you again 的博客
  • HTML+JS动态获取当前时间

    window.requestAnimationFrame()方法告诉浏览器您希望执行动画并请求浏览器在下一次重绘之前调用指定的函数来更新动画,通常与 setTi...

    C you again 的博客
  • PAT (Basic Level) Practice (中文)1009 说反话

    测试输入包含一个测试用例,在一行内给出总长度不超过 80 的字符串。字符串由若干单词和若干空格组成,其中单词是由英文字母(大小写有区分)组成的字符串,单词之间用...

    C you again 的博客
  • Spring AOP环绕异常影响的报错

    网上去stackoverflow搜,也是搜到这个问题:https://stackoverflow.com/search?q=java.lang.ClassCas...

    SmileNicky
  • js实现磁性吸附

    星辉
  • 安装 Linux系统监控工具 systat

    sysstat 是一款开源的自由软件,其源代码开源在 GitHub ,您可以首先拉取仓库源码:

    宋天伦
  • 神箭手js爬取房天下

    /* 神箭手云_爬虫开发 支持原生JavaScript 开发教程:http://docs.shenjian.io/develop/...

    用户2337871
  • 全方位的开源监控工具链介绍

    说到监控现在最火的是全链路监控(服务调用+HTTP调用+数据源访问+MQ链路的监控),但我认为这是狭义的全链路监控,广义的概念应该不仅仅指APM(Appliat...

    smooth00
  • pygame系列_第一个程序_图片代替鼠标移动

    ==============================================

    Hongten
  • 创业者的痛苦:流氓竞争越来越多

    这段时间一款叫美柚的App忽然大量出现在各大自媒体的版面,知乎、微博、微信朋友圈同样开始出现类似话题,大意是说美柚逆袭了大姨吗,相比大姨吗有各种好处,更适合女性...

    罗超频道

扫码关注云+社区

领取腾讯云代金券