your broswer can not see the clock

var clock = document.getElementById("Clock");var cxt = clock.getContext("2d");

function DrawClock() {//clear canvas //要先清空画布,才能保持画面的动画效果

cxt.clearRect(0, 0, 500, 500);

cxt.font= "20px Blackadder ITC";

cxt.fillText("My clock", 220, 150);

cxt.font= "14px Blackadder ITC";

cxt.fillText("---Made by Lan", 240, 170);var image = newImage();

image.src= "1.png";

cxt.drawImage(image,220, 280, 100, 100);var now = newDate();var sec =now.getSeconds();var min =now.getMinutes();var hour = now.getHours(); //must be hour+ min/60

hour = hour + min / 60;

hour= hour > 12 ? hour - 12: hour;//round, scale, niddle

cxt.beginPath();

cxt.arc(250, 250, 200, 0, 360, false);

cxt.strokeStyle= "#ABCDEF";

cxt.lineWidth= 9;

cxt.stroke();

cxt.closePath();//scale 刻度,时刻

cxt.font = "30px Bold";for (var i = 0; i < 12; i++) {

cxt.save();

cxt.lineWidth= 7;

cxt.strokeStyle= "Black";

cxt.translate(250, 250);

cxt.rotate(i* 30 * Math.PI / 180);

cxt.beginPath();

cxt.moveTo(0, -170);

cxt.lineTo(0, -190);if (i == 0) {

cxt.fillText("12", -10, -145);

}else{

cxt.fillText(i.toString(),-10, -145);

}

cxt.stroke();

cxt.closePath();

cxt.restore();

}

// 分for (var j = 0; j < 60; j++) {

cxt.save();

cxt.lineWidth= 4;

cxt.translate(250, 250);

cxt.rotate(j* 6 * Math.PI / 180);

cxt.beginPath();

cxt.moveTo(0, -180);

cxt.lineTo(0, -190);

cxt.strokeStyle= "Black";

cxt.stroke();

cxt.closePath();

cxt.restore();

}

cxt.beginPath();

cxt.save();

cxt.lineWidth= 7;

cxt.strokeStyle= "Black";

cxt.translate(250, 250);

cxt.rotate(hour* 30 * Math.PI / 180);

cxt.moveTo(0, -150);

cxt.lineTo(0, 10);

cxt.stroke();

cxt.restore();

cxt.closePath();

cxt.beginPath();

cxt.save();

cxt.lineWidth= 5;

cxt.strokeStyle= "Black";

cxt.translate(250, 250);

cxt.rotate(min* 6 * Math.PI / 180);

cxt.moveTo(0, -130);

cxt.lineTo(0, 10);

cxt.stroke();

cxt.restore();

cxt.closePath();

cxt.beginPath();

cxt.save();

cxt.lineWidth= 3;

cxt.strokeStyle= "red";

cxt.fillStyle= "Black";

cxt.translate(250, 250);

cxt.rotate(sec* 6 * Math.PI / 180);//秒

cxt.moveTo(0, 150);

cxt.lineTo(0, -15);

cxt.stroke();

cxt.beginPath();

cxt.arc(0, 0, 5, 0, 360, false);

cxt.fillStyle= "gray";

cxt.strokeStyle= "red";

cxt.fill();

cxt.closePath();

cxt.beginPath();

cxt.arc(0, 130, 5, 0, 360, false);

cxt.fillStyle= "black";

cxt.strokeStyle= "red";

cxt.fill();

cxt.stroke();

cxt.restore();

cxt.closePath();

}

DrawClock();

setInterval(DrawClock,1000);

用html5制作闹钟,HTM5制作的闹钟相关推荐

  1. 制作html相册需要什么环境,html5和CSS3怎么制作一个相册

    html5和CSS3怎么制作一个相册 发布时间:2021-01-25 10:23:25 来源:亿速云 阅读:78 作者:小新 这篇文章主要介绍了html5和CSS3怎么制作一个相册,具有一定借鉴价值, ...

  2. 微信html5电子相册,如何快速制作微信H5电子相册?

    电子相册的用途有很多种,常见的就是毕业相册.结婚相册.个人相册以及旅游相册,而用传统方式制作出来的电子相册精美度以及方便性都比较差,所以现在人们一般都是通过微信H5制作平台来制作电子相册的,制作步骤如 ...

  3. 抖音上css照片动态旋转怎么做,抖音里单张图片平移视频怎么制作?影音制作实现一张图片从左到右滑动视频效果...

    今天的影音制作,是实现视频画面中有一张图片从左往右慢慢滑动的视频效果.一张横屏图片要制作成竖视频的时候,要么就会出现图片显示不全的情况,要么显示全了就会出现上下有黑边的情况,基本很难解决这个问题~但是 ...

  4. php图片滑动怎么做,抖音里单张图片平移视频怎么制作?影音制作实现一张图片从左到右滑动视频效果...

    今天的影音制作,是实现视频画面中有一张图片从左往右慢慢滑动的视频效果.一张横屏图片要制作成竖视频的时候,要么就会出现图片显示不全的情况,要么显示全了就会出现上下有黑边的情况,基本很难解决这个问题~但是 ...

  5. jquery实现app开发闹钟功能_趣味闹钟APP开发,随意切换闹钟叫醒功能

    智能手机端的发展使得人们获取外界信息更加高效,然而智能手机的出现也有一定的弊端,生活中很多人常常因为浏览手机信息而选择熬夜,早起自然也就成为了一种困难,而趣味闹钟APP开发或多或少可以帮助用户解决问题 ...

  6. 计算机动画制作 实验要求,A074计算机动画制作实验——动画制作初步

    计算机动画制作实验--动画制作初步 计算机动画制作实验--动画制作初步 设计者 庞岩 单位 海南海口实验中学 e_mail technic88@http://doc.xuehai.net 案例名称 计 ...

  7. java 闹钟代码_JAVA可视化闹钟源码

    1 packageClock;2 3 importsun.audio.AudioPlayer;4 importsun.audio.AudioStream;5 6 import javax.swing. ...

  8. deepinu盘制作工具_u盘启动盘制作工具怎么制作 u盘启动盘制作工具制作方法【详细步骤】...

    在电脑城很多技术人员都会使用u盘装系统的方法给用户电脑安装系统,他们是怎么操作的呢?其实很简单,就是通过u盘启动盘来安装系统的.而u盘启动盘是需要用 u盘启动盘制作工具 来制作的.那么问题又来了,u盘 ...

  9. SubstanceDesigner制作PBR材质制作并且同步到Unity小尝试

    SubstanceDesigner制作PBR材质制作并且同步到Unity小尝试 1.下载安装SubstanceDesigner,网址:https://zixue.3d66.com/softhtml/d ...

最新文章

  1. 吃鸡服务器炸了会显示什么,绝地求生服务器再爆炸,还能不能好好吃鸡了?
  2. 如何搞定SVN目录的cleanup问题和lock问题
  3. [原]Oracle删除大表并回收空间的过程
  4. deep$wide keras
  5. pytorch 之 torch.eye()函数
  6. 蓝桥杯 ALGO-31 算法训练 开心的金明
  7. java生成二维码读取二维码,面试真题解析
  8. 设置response.setContentType(“application/json;charset=utf-8“)后还是中文乱码
  9. java用XSSFWorkbook实现读写Excel
  10. 一次ajax请求返回状态为Cancled的记录
  11. stm32开发3D打印机(一)——介绍(已完成)
  12. MySQL处理生意参谋_生意参谋低点击率怎么处理?
  13. 微机原理是微型计算机与接口技术吗,《微机原理与接口技术》课程教学大纲
  14. java宽度优先搜索之八数码,广度优先搜索解决八数码问题
  15. 拆分单元格怎么弄?合并起来了怎么办?
  16. xxl-job整合到微服务
  17. 美化你的Typora
  18. PCI GXL学习之再造篇
  19. Python IDEL查询和修改当前目录
  20. 输出一个 n 阶的方阵

热门文章

  1. linux缺页异常,操作系统缺页异常
  2. Excel如何快速提取单元格括号内数据
  3. 聚观早报|百度3月16日发布文心一言;特斯拉被控维修和零部件垄断
  4. 计算机往届生考研失败找工作,考研二战失败如何找工作 考研往届生找工作的方法...
  5. RefSeq Protein Accession转换为蛋白质(YP_009227197转换成Protein)
  6. android edittext 输入法表情,Android开发中EditText禁止输入Emoji表情符
  7. 【FPGA】:ip核---乘法器(multiplier)
  8. Python | Python保存高维数组array,Python用pandas将numpy保存csv文件,Python保存3维数组
  9. 用 .pth 文件附加 Python 模块搜索路径
  10. xshell双击无反应