JS + HTml 时钟代码实现

JS+ Html 画布实现的时钟
效果图：

闲来无聊做了一个网页的时钟，效果模拟传统时钟的运行方式，

运用了html 的画布实现指针，背景图片引用了网络图片。

具体原理：

首先将时钟分为四个不同区域，对每个区域计算cos，sin 来确实指针顶点位置。在通过画布来绘画出指针。
通过setInterval 每秒刷新指针位置实现传统机械表针的动态跳动。

本人是JS开发程序员，从业1年多。闲来无聊的简单页面，

欢迎大家提问，或者建议。共同进步

代码部分，直接复制HTML 文件中即可查看效果：

<!DOCTYPE html>
<html>
<head><meta charset=utf-8><title>clock</title>
</head>
<body style="color:green; <!--background-image:url('http://image.lxway.com/upload/b/f0/bf0d97dcee487096548e6edbc89d4963_thumb.png');--> background-size:100%; background-repeat: no-repeat; background-attachment:fixed"><div style="width: 900px; height: 900px; margin-top: 50px; margin-left: 50px;"><div style="position: absolute; left:119px;top: 193px; width: 900px; height: 900px; background-image:url('http://image.lxway.com/upload/b/f0/bf0d97dcee487096548e6edbc89d4963_thumb.png');  background-repeat: no-repeat; z-index: -1;"></div><canvas id="t" width="800" height="800"></canvas><div style="position: absolute; left:118px;top: 464px; width: 100px; height: 200px; background-color: white;  background-repeat: no-repeat; z-index: 10;"></div></div><script language="javascript">var s = setInterval(moveI, 1000);function moveI() {var c = document.getElementById("t");var pc = c.getContext("2d");c.height = c.height;//秒
                    pc.lineWidth = 3;pc.strokeStyle = 'rgba(255,0,0,0.8)';var now = new Date();var sindex = getxy(150, now.getSeconds());pc.moveTo(400, 400);pc.lineTo(sindex.x, sindex.y);pc.stroke();pc.beginPath();//分
                    pc.lineWidth = 7;pc.strokeStyle = 'rgba(50,50,50,0.8)';var mindex = getxy(120, now.getMinutes() + (now.getSeconds() / 60));pc.moveTo(400, 400);pc.lineTo(mindex.x, mindex.y);pc.stroke();pc.beginPath();//时
                    pc.lineWidth = 10;pc.strokeStyle = 'rgba(0,0,0,0.8)';var hindex = getxy(80, ((now.getHours() > 12 ? now.getHours() - 12 : now.getHours()) + (now.getMinutes() / 60)) * 5);pc.moveTo(400, 400);pc.lineTo(hindex.x, hindex.y);pc.stroke();};function getxy(r, t) {//计算分区  0,1,2,3var a = parseInt(t / 15);//分区角度
                    t = t - 15 * a;var y;var x;//基于分区的坐标计算switch (a) {case 0:y = r - (r * Math.cos(2 * Math.PI / 360 * 90 * (t / 15)));x = r + (r * Math.sin(2 * Math.PI / 360 * 90 * (t / 15)));break;case 1:y = r + (r * Math.sin(2 * Math.PI / 360 * 90 * (t / 15)));x = r + (r * Math.cos(2 * Math.PI / 360 * 90 * (t / 15)));break;case 2:y = r + (r * Math.cos(2 * Math.PI / 360 * 90 * (t / 15)));x = r - (r * Math.sin(2 * Math.PI / 360 * 90 * (t / 15)));break;case 3:y = r - (r * Math.sin(2 * Math.PI / 360 * 90 * (t / 15)));x = r - (r * Math.cos(2 * Math.PI / 360 * 90 * (t / 15)));break;default:break;}y = (400 - r) + y;x = (400 - r) + x;return {'x': x,'y': y};};</script>
</body></html>

假如生活欺骗了你，找50个程序员问问为什么编程；

假如生活让你想死，找50个程序员问问BUG改完了没有；

假如你觉得生活拮据，找50个程序员问问工资涨了没有；

假如你觉得活着无聊，找50个程序员问问他们一天都干了什么！

转载于:https://www.cnblogs.com/zwcai/p/6497053.html

JS + HTml 时钟代码实现相关推荐

html显示时钟翻页 js,js css3翻页数字时钟代码
特效描述:js css3翻页数字时钟.js获取本地时间数字时钟翻页动画代码. 代码结构 1. 引入JS 2. HTML代码 'use strict'; function _classCallCheck ...
HTML5 Canvas爱心时钟代码
这是一款数字时钟动画,数字又多个小爱心组成,又何问起整理,随着时间推进,每一秒钟新数字替换旧数字,旧数字离去使用天女散花动画,花是五颜六色的. 查看效果: http://hovertree.com/t ...
罗马时钟代码 jquery
罗马时钟代码最近非常流行的罗马时钟,今天Ta来了!!! 先来看一张效果图下载链接:罗马时钟代码抖音上面都是一行代码写出一片天地,今天咱们来看看他的"一行代码" .话不多说,直 ...
html css 圆圈数字,html5 css3带日期的圆形数字电子时钟代码
特效描述:html5 css3 带日期圆形数字电子时钟代码.HTML5+CSS3圆形数字电子时钟. 代码结构 1. 引入JS 2. HTML代码 6 5 4 3 2 1 12 11 10 9 8 ...
JS特效——时钟轮盘
JS特效--时钟轮盘文章目录 JS特效--时钟轮盘一.制作思路二.制作步骤首先定义相应的盒子为盒子渲染出自己喜欢的样式 JS创建盒子里的内容并且将内容填充到相应的地方定义旋转的函数设置定 ...
jQuery罗盘时钟代码
源码介绍: jQuery罗盘时钟代码基于jquery-3.4.1.min.js制作,环形罗盘,时钟动画. 网盘下载地址: http://www.bytepan.com/4iimSDHOqnu 图片:
js获取html代码中所有图片地址
/** * JS获取html代码中所有的图片地址 * @param htmlstr * @returns imgsrcArr 数组 */ function getimgsrc(htmlstr) { v ...
html漂浮广告随页面移动代码,JS漂浮广告代码，慢慢漂移的广告JS代码
JS漂浮广告代码,慢慢漂移的广告js代码,可以漂浮到任何位置,哈哈...直接贴代码,很简单. var xin = true, yin = true var step = 1 var delay = 5 ...
JS学习笔记 - 代码复用
本文章记录本人在学习 JavaScript 中看书理解到的一些东西,加深记忆和并且整理记录下来,方便之后的复习. js 中复用代码说道代码复用,一般都会涉及到对象继承.在js中有许多可以选择的继承方 ...
如何在页面调用JS函数的代码
如何在页面调用JS函数的代码这个所有的人都不能回复啊,只有一个人可以的,晕!我第一次发现JS的功能有"打下来",呵呵! 言归正传: 下面是一个很简单的例子: 首先写一个JS函数, ...

JS + HTml 时钟代码实现

JS + HTml 时钟代码实现相关推荐

最新文章

热门文章