南强小屋 Design By 杰米
用JavaScript+Canvas来实现最简单的时钟效果，供大家参考，具体内容如下
效果图：
先看html代码：
<html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="/UploadFiles/2021-04-02/demo3.js">JavaScript代码：
var canvas,context; function draw(){//定义划时钟的方法 var data = new Date(); var hHoure = data.getHours(); var mMin = data.getMinutes(); var sSec = data.getSeconds(); var hValue = (hHoure*30+mMin/2-90)*Math.PI/180; var mValue = (mMin*6-90)*Math.PI/180; var sValue = (sSec*6 -90)*Math.PI/180; var x = 200,y = 200,r = 150; context.clearRect(0,0,canvas.width,canvas.height); context.moveTo(x,y); context.arc(x,y,r,0,6*Math.PI/180,false); // context.beginPath(); context.lineWidth = 1; for(var i = 0;i<60;i++){ context.moveTo(x,y); context.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false); } context.closePath(); context.stroke(); // context.beginPath(); context.fillStyle = "white"; context.moveTo(x,y); context.arc(x,y,r/1.1,-0,2*Math.PI,false); context.closePath(); context.fill(); // context.beginPath(); context.lineWidth = 3; for(var i = 0;i<12;i++){ context.moveTo(x,y); context.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI,false); } context.closePath(); context.stroke(); // context.beginPath(); context.fillStyle = "white"; context.moveTo(x,y); context.arc(x,y,r/1.12,0,2*Math.PI,false); context.closePath(); context.fill(); context.beginPath(); context.fillStyle = "black"; context.moveTo(x,y); context.arc(x,y,r/30,0,2*Math.PI,false); context.fill(); // context.beginPath(); context.lineWidth = 5; context.moveTo(x,y); context.arc(x,y,r/2.5,hValue,hValue,false); context.stroke(); // context.beginPath(); context.lineWidth = 3; context.moveTo(x,y); context.arc(x,y,r/2,mValue,mValue,false); context.stroke(); // context.beginPath(); context.lineWidth = 2; context.moveTo(x,y); context.arc(x,y,r/1.6,sValue,sValue,false); context.stroke(); } window.onload = function(){ canvas = document.getElementById('canvas'); context = canvas.getContext('2d'); canvas.height = 500; canvas.width = 500; setInterval(draw,1000); draw(); }更多JavaScript时钟特效点击查看：JavaScript时钟特效专题
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
标签：
js,h5,Canvas,时钟
南强小屋 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
南强小屋 Design By 杰米
暂无JS+H5 Canvas实现时钟效果的评论...
稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！
昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？