标签：angle minuntes JS HTML var pi Tools 源码 时钟
欢迎访问博主个人网站，记得收藏哦，点击查看 - - - >>>>
公众号推荐：计算机类毕业设计系统源码，IT技术文章分享，游戏源码，网页模板
小程序推荐：网站资源快速收录–百度API网页提交助手，操作简单，效率高
HTML+JS实现时钟
效果：
知识点：
- Canvas 对象及其属性。
- setTimeout() 方法，用于在指定的毫秒数后调用函数或计算表达式。
- Date()对象
- 时分秒对应弧度制的计算：
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>
- - -》关注博主公众号【C you again】，获取更多IT资源（IT技术文章，毕业设计、课程设计系统源码，经典游戏源码，HTML网页模板，PPT、简历模板，！！还可以投稿赚钱！！，点击查看- - - >>>>>
欢迎访问博主个人网站，记得收藏哦，点击查看 - - - >>>>
标签：angle,minuntes,JS,HTML,var,pi,Tools,源码,时钟 来源： https://blog.51cto.com/u_13401026/2792554
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。