HTML5动态时钟
时间:2022-05-31
本文章向大家介绍HTML5动态时钟,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
HTML5动态时钟
效果图
这里无法实时显示当前时间,可以看我这篇博客。
原理
先打上html5中的canvas标签,它定义了一块画布,可以用javascript在上前面做动态效果。
调用浏览器内置对象window的setInterval(animate,delay)方法,可以实现每隔delay时间调用一次自定义的animate方法,从而达到动态的效果。
代码实现
```javascript
<body>
<canvas id="mycanvas" width="500" height="500" style="background: #B0D141"></canvas>
<script>
var mycanvas = document.getElementById("mycanvas");
var context = mycanvas.getContext("2d");
function drawClock() {
//每次调用函数都要对指定区域清屏
context.clearRect(0, 0, 500, 500);
var date = new Date();
var hour = date.getHours();
var min = date.getMinutes();
var sec = date.getSeconds();
hour = (hour >= 12) ? hour - 12 : hour;
hour = hour + min / 60;
min = min + sec / 60;
//画圆
context.lineWidth=10;
context.strokeStyle='#000';
context.beginPath();
context.arc(250, 250, 200, 0, 360, false);
context.closePath();
context.stroke();
//画时刻度
for (var i = 0; i < 12; i++) {
context.save();
context.strokeStyle='black';
context.beginPath();
context.translate(250, 250);
context.rotate(i * 30 * Math.PI / 180);
context.beginPath();
context.moveTo(0, -190);
context.lineTo(0, -170);
context.closePath();
context.stroke();
context.restore();
}
//画分刻度
context.beginPath();
for (var i = 0; i < 60; i++) {
context.save();
context.strokeStyle='black';
context.beginPath();
context.translate(250, 250);
context.rotate(i * 6 * Math.PI / 180);
context.moveTo(0, -190);
context.lineTo(0, -180);
context.closePath();
context.stroke();
context.restore();
}
//画时针
context.save();
context.lineWidth=12;
context.beginPath();
context.translate(250, 250);
context.rotate(hour * Math.PI * 30 / 180);
context.moveTo(0, -135);
context.lineTo(0, 10);
context.closePath();
context.stroke();
context.restore();
//画分针
context.save();
context.lineWidth=8;
context.beginPath();
context.translate(250, 250);
context.rotate(min * Math.PI * 6 / 180);
context.moveTo(0, -160);
context.lineTo(0, 10);
context.closePath();
context.stroke();
context.restore();
//画秒针
context.save();
context.lineWidth=5;
context.strokeStyle='red';
context.beginPath();
context.translate(250, 250);
context.rotate(sec * Math.PI * 6 / 180);
context.moveTo(0, -182);
context.lineTo(0, 16);
context.closePath();
context.stroke();
context.restore();
}
setInterval(drawClock, 1000);
</script>
<body/>
“`
后记
没想到markdown还能支持javascript。这样以后可以通过类似的方法在blog中用js做动态效果了。
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 「文档数据库之争」MongoDB和CouchDB的比较
- 【Python】【爬虫】最近想买电脑,用Python爬取京东评论做个参考
- 新手如何快速入门Python
- 10行Python代码自动清理电脑内重复文件,解放双手!
- 模型评价指标—KS
- python 学习之:修饰器
- python 学习之:正则表达式(1)---- 可选函数参数
- PySpark——开启大数据分析师之路
- 一款直击痛点的优秀http框架,让我超高效率完成了和第三方接口的对接
- 强连通和连通算法在关联图谱中的应用
- PySpark SQL——SQL和pd.DataFrame的结合体
- 初识Kubernetes及快速安装
- 使用k8s部署springboot+redis简单应用
- React Ref 使用总结
- Python人脸识别—我的眼里只有你