html网页静态时钟代码,网页时钟实现代码html5
canvas{position:absolute;top:0px;left:0px;}
时钟
//获取绘图对象
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var p_canvas = document.getElementById('p_canvas');
var p_context = p_canvas.getContext('2d');
var height=200,width=200;
//画大圆
context.beginPath();
context.strokeStyle="#009999";
context.arc(width/2,height/2,width/2-1,0,Math.PI*2,true);
context.stroke();
context.closePath();
//画中间点
context.beginPath();
context.fillStyle="#000";
context.arc(width/2,height/2,3,0,Math.PI*2,true);
context.fill();
context.closePath();
//画小刻度
var angle = 0,radius = width/2 - 4;
for(var i=0;i<60;i++){
context.beginPath();
context.strokeStyle="#000";
//确认刻度的起始点
var x = width/2 + radius*Math.cos(angle),y = height/2 + radius*Math.sin(angle);
context.moveTo(x,y);
//这里是用来将刻度的另一点指向中心点,并给予正确的角度
//PI是180度,正确的角度就是 angle+180度,正好相反方向
var temp_angle = Math.PI +angle;
context.lineTo(x +3*Math.cos(temp_angle),y+3*Math.sin(temp_angle));
context.stroke();
context.closePath();
angle+=6/180*Math.PI;
}
//大刻度
angle = 0,radius = width/2 - 4;
context.textBaseline = 'middle';
context.textAlign = 'center';
context.lineWidth = 2;
for(var i=0;i<12;i++){
var num = i+3>12? i+3-12:i+3 ;
context.beginPath();
context.strokeStyle="#FFD700";
var x = width/2 + radius*Math.cos(angle),y = height/2 + radius*Math.sin(angle);
context.moveTo(x,y);
var temp_angle = Math.PI +angle;
context.lineTo(x +8*Math.cos(temp_angle),y+8*Math.sin(temp_angle));
context.stroke();
context.closePath();
//大刻度 文字
context.fillText(num,x+16*Math.cos(temp_angle),y+16*Math.sin(temp_angle));
angle+=30/180*Math.PI;
}
function Pointer(){
var p_type = [['#000',70,1],['#ccc',60,2],['red',50,3]];
function drwePointer(type,angle){
type = p_type[type];
angle = angle*Math.PI*2 - 90/180*Math.PI;
var length= type[1];
p_context.beginPath();
p_context.lineWidth = type[2];
p_context.strokeStyle = type[0];
p_context.moveTo(width/2,height/2);
p_context.lineTo(width/2 + length*Math.cos(angle),height/2 + length*Math.sin(angle));
p_context.stroke();
p_context.closePath();
}
setInterval(function (){
p_context.clearRect(0,0,height,width);
var time = new Date();
var h = time.getHours();
var m = time.getMinutes();
var s = time.getSeconds();
h = h>12?h-12:h;
h = h+m/60;
h=h/12;
m=m/60;
s=s/60;
drwePointer(0,s);
drwePointer(1,m);
drwePointer(2,h);
},500);
}
var p = new Pointer();
做个参考,代码来源: http://www.php-source.com/article-6390-1.html
html网页静态时钟代码,网页时钟实现代码html5相关推荐
- 网页静态化和网页伪静态化之间的区别与选择
网页静态化和网页伪静态化,如果我们是一个不懂网站的人估计听到这些词可能会比较头晕,王晟璟在刚开始接触并尝试建设自己的个人博客网站的时候也是如此,看了很多关于这方面的资料也还是云里雾里的,不过后面终于整 ...
- 网页静态化技术Freemarker简单Demo
为什么要用网页静态化技术 网页静态化解决方案在实际开发中运用比较多,例如新闻网站,门户网站中的新闻频道或者是文章类的频道. 随着用户访问量以及数据量的增大,网页静态化技术方案如今越来越流行. 什么是网 ...
- HTML5七夕情人节表白网页(抖音-罗盘时钟) HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 css爱心表白
HTML5七夕情人节表白网页❤抖音罗盘时钟❤ HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 css爱心表白 这是程序员表白系列 ...
- html期末作业代码网页设计——化妆品电商网站(4页) HTML+CSS+JavaScript 使用html+css实现一个静态页面(含源码)
HTML5期末大作业:化妆品电商网站设计--化妆品电商网站(4页) HTML+CSS+JavaScript 使用html+css实现一个静态页面(含源码) 常见网页设计作业题材有 个人. 美食. 公司 ...
- HTML5期末大作业:商城网站设计——仿团购商城(1页) 简单个人网页设计作业 静态HTML旅行主题网页作业 DW个人网站模板下载 大学生简单个人网页作品代码 个人网页制作 学生个人网页Dreamwe
HTML5期末大作业:商城网站设计--仿团购商城(1页) 简单个人网页设计作业 静态HTML旅行主题网页作业 DW个人网站模板下载 大学生简单个人网页作品代码 个人网页制作 学生个人网页Dreamwe ...
- 期末作业代码网页设计代码——优分期大学生购物商城(7页) 大学生大学生购物商城作业模板下载 静态HTML购物商城网页制作下载_网页设计代码
HTML5期末大作业:大学生购物商城网站设计--优分期大学生购物商城(7页) 大学生大学生购物商城作业模板下载 静态HTML购物商城网页制作下载_网页设计代码 常见网页设计作业题材有 个人. 美食. ...
- HTML5期末大作业:大学生购物商城网站设计——优分期大学生购物商城(7页) 大学生大学生购物商城作业模板下载 静态HTML购物商城网页制作下载_网页设计代码
HTML5期末大作业:大学生购物商城网站设计--优分期大学生购物商城(7页) 大学生大学生购物商城作业模板下载 静态HTML购物商城网页制作下载_网页设计代码 常见网页设计作业题材有 个人. 美食. ...
- HTML+CSS网页设计期末课程大作——篮球专题设计(5页) 静态HTML运动网页制作下载_网页设计代码
HTML+CSS网页设计期末课程大作--篮球专题设计(5页) 静态HTML运动网页制作下载_网页设计代码 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. ...
- HTML5期末大作业:关于旅游网站设计——天津旅游(11页) 简单个人网页设计作业 静态HTML个人博客主页 DW个人网站模板下载 大学生简单个人网页作品代码 个人网页制作 学生个人网页设计作业
HTML5期末大作业:旅游网站设计--天津旅游(11页) HTML+CSS+JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载 web网页设计制作成品 大学生毕设网页设计源码HT ...
- 网页静态化技术Freemarker
网页静态化技术Freemarker 一.Freemarker的基本介绍 1.1为什么要使用网页静态化技术 网页静态化解决方案在实际开发中运用比较多,例如新闻网站,门户网站中的新闻频道或者是文章类的频道 ...
最新文章
- 影像组学视频学习笔记(25)-查看准确度、灵敏度、特异度及混淆矩阵、Li‘s have a solution and plan.
- 与孩子一起学编程 python_【和孩子一起学编程】 python笔记--第五天
- mysql_ping与mysql长连接
- mysqldump只导出数据或者只导出表结构
- jsp和mysql的乱码问题_jsp和servlet操作mysql中文乱码问题的解决办法
- 计算机网络设置无法保存,win10系统启用网络发现无法保存的解决步骤
- 使用无觅APP工场:你也可以拥有自己的APP
- 个人计算机键盘上的按键击键声音小,按键盘每个键出现嘟嘟的声音也打不出字是什么...
- 多层感知机的从零开始实现( 从D2L 包中抽取函数)
- 值得推荐五个编程学习的网站
- linux修改时间和日期,linux修改时间和日期的方法
- python-二维嵌套列表的元素删除、更改大小写
- 阿里云短信服务-个人账户测试短信服务
- item_get - 获得suning商品详情
- Win10系统通用串行总线(USB驱动损坏)的一种解决方法
- MyBatisPlus代码生成器使用
- c语言错误c1075,求助帖 关于C语言通讯录
- python实现linux命令输出两列_Python实现Linux命令xxd -i功能
- 闪讯客户端在Windows 10 1809上启动后会导致系统网络服务无法启动
- SRS+OBS实现网页HLS直播功能
热门文章
- 震惊世人的10个Python黑科技,你知道几个?
- 【颗粒归仓】(四)代码走查工具---StyleCop
- C语言航空订票系统课程设计
- 北大计算机专业毕业论文,北京大学毕业论文格式范本
- High-Quality Genome-Scale Models From Error-Prone, Long-Read Assemblies高质量的基因组尺度模型来自易出错的,长时间读取的程序集
- matlab 图像中加入高斯白噪声,matlab – 使用imnoise为图像添加高斯噪声
- shell之vi替换字符串
- 2021李宏毅机器学习笔记
- 10.可视化、可视分析、探索式数据分析
- 大数据之路、阿里巴巴大数据实践读书笔记目录