Html 制作简易时钟

最新推荐文章于 2024-05-12 06:37:18 发布

逗乐男神i

最新推荐文章于 2024-05-12 06:37:18 发布

阅读量302

点赞数 1

文章标签： html

本文链接：https://blog.csdn.net/a15044060515/article/details/124608727

版权

本文介绍如何使用HTML和JavaScript制作一个简单的动态时钟。通过结合HTML的显示元素和JavaScript的时间函数，实时更新页面上的时间显示，实现一个实用的学习项目。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
    <!--时钟-->
    <div>
        <canvas id="clock" height="500px" width="500px"></canvas>
        <script type="text/javascript" src="1/1.js"></script>
    </div>
  </html>

var dom=document.getElementById('clock');
var ctx=dom.getContext('2d');
var width=ctx.canvas.width;
var height=ctx.canvas.height;
var r=width/2;
 
//设置时钟边框
function setBorder(){
    ctx.save();
    ctx.translate(r,r)
    ctx.beginPath();
    ctx.lineWidth=10;
    ctx.arc(0,0,r-5,0,2*Math.PI,false);
    ctx.stroke();
 
    var hourNumbers=[3,4,5,6,7,8,9,10,11,12,1,2];
    ctx.font='18px Arial';
    ctx.textAlign='center';
    ctx.textBaseline='middle';
    hourNumbers.forEach(function(number,i){
        var rad=2*Ma

最低0.47元/天解锁文章

逗乐男神i

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Html 制作简易时钟

<!DOCTYPE html><html>  <div> <canvas id="clock" height="500px" width="500px"></canvas> <script type="text/javascript" src="1/1.js"></script> </div> </html>.
复制链接

扫一扫