我要发布

使用Javascript实现钟表

Boss 编程相关

2025-12-13 0 717

使用h5的方式来实现钟表

var cnavas = document.getElementById(\”demo\”);
var ctx = cnavas.getContext(\”2d\”);
var r = 100;//外圆半径
var r2 = 90;//内圆半径
var x = 200, y = 200; //圆心
function drawClock() {
ctx.clearRect(0, 0, 400, 400);//清除画布
ctx.lineWidth = 1 //线条的宽度
ctx.beginPath();
ctx.arc(x, y, r, 0, 2 * Math.PI); //绘制外圆
ctx.stroke();
//绘制刻度
for (let index = 0; index < 60; index++) {
ctx.beginPath();
var deg = index * 6;
r2 = index % 5 == 0 ? 80 : 90; //5的倍数可点要长一点的处理
//内圆作为起始点
var start = { x: x + r2 * Math.cos(deg * Math.PI / 180), y: y + r2 * Math.sin(deg * Math.PI / 180) };
//外圆作为结束点
var end = { x: x + r * Math.cos(deg * Math.PI / 180), y: y + r * Math.sin(deg * Math.PI / 180) };
ctx.moveTo(start.x, start.y);
ctx.lineTo(end.x, end.y);
ctx.stroke();
ctx.closePath();
}
var date = new Date();
var seconde = date.getSeconds();
var minute = date.getMinutes();
var hour = date.getHours();

var secDeg = seconde * 6 – 90;//秒钟的角度
var minuteDeg = minute * 6 – 90;//分钟的角度
var hourDeg = hour * 30 – 90;//时钟的角度
//绘制秒针
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x + 70 * Math.cos(secDeg * Math.PI / 180), y + 70 * Math.sin(secDeg * Math.PI / 180));
ctx.stroke();

//绘制秒针
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineWidth = 3
ctx.lineTo(x + 60 * Math.cos(minuteDeg * Math.PI / 180), y + 60 * Math.sin(minuteDeg * Math.PI / 180));
ctx.stroke();

//绘制秒针
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineWidth = 5
ctx.lineTo(x + 40 * Math.cos(hourDeg * Math.PI / 180), y + 40 * Math.sin(hourDeg * Math.PI / 180));
ctx.stroke();

}
setInterval(drawClock, 1000);

< script >
var cnavas = document.getElementById(\”demo\”);
var ctx = cnavas.getContext(\”2d\”);
var r = 100;//外圆半径
var r2 = 90;//内圆半径
var x = 200, y = 200; //圆心
function drawClock() {
ctx.clearRect(0, 0, 400, 400);//清除画布
ctx.lineWidth = 1 //线条的宽度
ctx.beginPath();
ctx.arc(x, y, r, 0, 2 * Math.PI); //绘制外圆
ctx.stroke();
//绘制刻度
for (let index = 0; index < 60; index++) {
ctx.beginPath();
var deg = index * 6;
r2 = index % 5 == 0 ? 80 : 90; //5的倍数可点要长一点的处理
//内圆作为起始点
var start = { x: x + r2 * Math.cos(deg * Math.PI / 180), y: y + r2 * Math.sin(deg * Math.PI / 180) };
//外圆作为结束点
var end = { x: x + r * Math.cos(deg * Math.PI / 180), y: y + r * Math.sin(deg * Math.PI / 180) };
ctx.moveTo(start.x, start.y);
ctx.lineTo(end.x, end.y);
ctx.stroke();
ctx.closePath();
}
var date = new Date();
var seconde = date.getSeconds();
var minute = date.getMinutes();
var hour = date.getHours();

//绘制秒针
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineWidth = 3
ctx.lineTo(x + 60 * Math.cos(minuteDeg * Math.PI / 180), y + 60 * Math.sin(minuteDeg * Math.PI / 180));
ctx.stroke();

//绘制秒针
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineWidth = 5
ctx.lineTo(x + 40 * Math.cos(hourDeg * Math.PI / 180), y + 40 * Math.sin(hourDeg * Math.PI / 180));
ctx.stroke();

}
setInterval(drawClock, 1000);
< /script >

收藏 (0) 打赏

感谢您的支持，我会继续努力的!

打开微信/支付宝扫一扫，即可进行扫码打赏哦，分享从这里开始，精彩与您同在

申明：本文由第三方发布，内容仅代表作者观点，与本网站无关。对本文以及其中全部或者部分内容的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。本网发布或转载文章出于传递更多信息之目的，并不意味着赞同其观点或证实其描述，也不代表本网对其真实性负责。

左子网编程相关使用Javascript实现钟表 https://www.zuozi.net/36187.html

Boss

上一篇： C# Linq中的Select和SelectMany

下一篇：使用vue来实现当当网

常见问题

发货方式是什么？

1、自动：拍下后，点击（下载）链接即可下载；2、手动：拍下后，联系卖家发放即可或者联系官方找开发者发货。

查看详情

交易周期是多久呢？

1、源码默认交易周期：手动发货商品为1-3天，并且用户付款金额将会进入平台担保直到交易完成或者3-7天即可发放，如遇纠纷无限期延长收款金额直至纠纷解决或者退款！；

查看详情

能退款么？

1、描述：源码描述(含标题)与实际源码不一致的（例：货不对板）； 2、演示：有演示站时，与实际源码小于95%一致的（但描述中有”不保证完全一样、有变化的可能性”类似显著声明的除外）； 3、发货：不发货可无理由退款； 4、安装：免费提供安装服务的源码但卖家不履行的； 5、收费：价格虚标，额外收取其他费用的（但描述中有显著声明或双方交易前有商定的除外）； 6、其他：如质量方面的硬性常规问题BUG等。注：经核实符合上述任一，均支持退款，但卖家予以积极解决问题则除外。

查看详情

注意事项

1、左子会对双方交易的过程及交易商品的快照进行永久存档，以确保交易的真实、有效、安全！ 2、左子无法对如“永久包更新”、“永久技术支持”等类似交易之后的商家承诺做担保，请买家自行鉴别； 3、在源码同时有网站演示与图片演示，且站演与图演不一致时，默认按图演作为纠纷评判依据（特别声明或有商定除外）； 4、在没有”无任何正当退款依据”的前提下，商品写有”一旦售出，概不支持退款”等类似的声明，视为无效声明； 5、在未拍下前，双方在QQ上所商定的交易内容，亦可成为纠纷评判依据（商定与描述冲突时，商定为准）； 6、因聊天记录可作为纠纷评判依据，故双方联系时，只与对方在左子上所留的QQ、手机号沟通，以防对方不承认自我承诺。 7、虽然交易产生纠纷的几率很小，但一定要保留如聊天记录、手机短信等这样的重要信息，以防产生纠纷时便于左子介入快速处理。

查看详情