浅谈时钟的生成(js手写简洁代码)
在生成时钟的过程中自己想到布置表盘的写法由这么几种：
当然利用那种模式都可以实现，所以我们要用一个最好理解，代码有相对简便的方法实现
1、利用三角函数
用js在三角函数布置表盘的过程中有遇见到这种情况：是在表盘的刻度处，利用三角函数计算具体的值时不能得到整数，需要向上或者向下取整，这样无形中就会存在些许偏差，而且这样的偏差难利用样式来调整到位，即使最终效果都可以实现，但是细微处的缝隙和角度的偏差都会影响整体的视觉体验，作为一名程序开发人员，这样的视觉体验很难让别人认可，放弃。
2、利用遮罩层
js利用遮罩层，主要还是在表盘的刻度处，表盘的刻度有长和短，每5个刻度都有一根较长的刻度，这样我们利用遮罩层遮住的刻度的长短都是一致的，很难继续调整其余的刻度所以也放弃。
3、利用定位以及（父子级关系）（推荐）
利用定位以及父子级关系的方法我觉得最好理解和上手，在这里为大家分享一下。下面是实现代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
* {
margin: 0;
padding: 0;
}
#clock {
width: 600px;
height: 600px;
border: 4px solid lightgray;
margin: auto;
position: relative;
border-radius: 50%;
}
#scale {
width: 20px;
height: 100%;
position: absolute;
left: 50%;
margin-left: -10px;
/*background: green;*/
}
#point {
width: 4px;
height: 10px;
background: lightgray;
margin: auto;
}
#number {
width: 20px;
height: 20px;
margin-top: 5px;
/*background: red;*/
font-size: 20px;
text-align: center;
line-height: 20px;
}
#hour {
width: 12px;
height: 180px;
background: red;
border-radius: 6px;
transform-origin: 50% 150px;
position: absolute;
top: 150px;
left: 50%;
margin-left: -6px;
}
#minute {
width: 8px;
height: 250px;
background: orange;
position: absolute;
border-radius: 4px;
transform-origin: 50% 200px;
top: 100px;
left: 50%;
margin-left: -4px;
}
#second {
width: 4px;
height: 360px;
background: red;
border-radius: 2px;
position: absolute;
top: 0;
left: 50%;
margin-left: -2px;
transform-origin: 50% 300px;
z-index: 100;
}
</style>
</head>
<body>
<div id="clock">
<div id="hour">
</div>
<div id="minute">
</div>
<div id="second">
</div>
</div>
</body>
<script type="text/javascript">
var clock = document.getElementById('clock');
var hour = document.getElementById('hour');
var minute = document.getElementById('minute');
var second = document.getElementById('second');
function surface() {
var currentDate = new Date();
var hours = currentDate.getHours();
var minutes = currentDate.getMinutes();
var seconds = currentDate.getSeconds();
seconds = hours * 3600 + minutes * 60 + seconds;
hour.style.transform = 'rotate('+seconds / 120+'deg)';
minute.style.transform = 'rotate('+seconds * 0.1+'deg)';
second.style.transform = 'rotate('+seconds * 6+'deg)';
}
setInterval('surface()', 1000);
for (var i = 1; i < 61; i++) {
var scale = document.createElement('div');
scale.id = 'scale';
scale.style.transform = 'rotate('+i * 6+'deg)';
clock.appendChild(scale);
var point = document.createElement('div');
point.id = 'point';
scale.appendChild(point);
var number = document.createElement('div');
number.id = 'number';
number.style.transform = 'rotate(-'+i * 6+'deg)'
if (i % 5 == 0) {
number.innerHTML = i / 5;
point.style.height = '15px';
}
scale.appendChild(number);
}
</script>
</html>
校正中需要注意：
1、以下是分步实现的效果图，最后做到细节处紧密贴合，不用其他的方法在对她进行微调，当样式布局全部完成之后就可以获取当前的时间加以校正，在校正的过程中有这样一个问题，希望大家能注意： 时针的转动角度不能以小时为单位来计算，例如：9:58 这时的时针指的位置是9，当10 ：00 时，时针以下跳转到10的位置，所以时针的角度要以分钟或者秒来计算，分针的角度跳转要以分钟或者秒来计算，秒针就是每秒跳转6度。
2、还有一点要注意，三个指针的转动圆心问题，利用transform-origin 来定指针转动点一定要定准
以上这篇浅谈时钟的生成(js手写简洁代码)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。
相关推荐
-
JS+Canvas绘制时钟效果
本文实例为大家分享了使用canvas绘制时钟的具体代码,供大家参考,具体内容如下 1. clock.html <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Description" content=""> <title>canvas时钟</t
-
最丑的时钟效果！js canvas时钟制作方法
今日就发个丑丑的时钟,老实说 有没有什么调试canvas的工具,老是要在浏览器刷新查看效果,好累啊~ (┬＿┬) 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ background: #eee; } canvas{ ba
-
纯js代码制作的网页时钟特效【附实例】
纯js代码制作的网页时钟特效,需要的码农可以拿去看一下.给大家做个参考. <HTML><HEAD> <META http-equiv=Content-Type content="text/html; charset=gb2312"> <META content="MSHTML 6.00.6000.16414" name=GENERATOR></HEAD> <BODY> <DIV style
-
又一款js时钟!transform实现时钟效果
又来一个时钟效果了,这个的实现不需要canvas,都是div.ul.li画出的,好玩有真实. 哈哈~ 需要的js才能实现到走动这个效果,但js的内容不多,也不难. 主要是一个css里transform的使用的思路,transform里有很多变幻属性,而普通的时钟 在我心中就是个圆圆的东西,那么是不是可以旋转这个属性(rotate)实现了,它的刻度 使用旋转且把旋转点设置在圆心,那不就可以绕着圆心转了吗,而时针它们的底部不是和 圆心接触的吗,那么设置时针的底部为旋转点不就OK了,大概的说了说思路.
-
javascript实现滚动效果的数字时钟实例
网上关于javascript实现数字时钟效果的实例很多,但是本文给大家介绍的是滚动效果的数字时钟.小编觉得效果很炫,下面分享给大家. 先来看看很炫的效果 下面是代码实例 javascript代码部分: window.onload=function(){ function toDou(n){ return n<10?"0"+n:""+n; } var oImg=document.getElementsByTagName("img"); set
-
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
前言:今天看完了Js书的canvas画布那张,好开心~又是心爱的canvas~欧耶~ 之前看到有人建议我画蓝胖子,对哦,我怎么把童年最喜欢的蓝胖子忘了,为了表达我对蓝胖子的歉意,所以今天画了会动的hello world,也算是一种进步咯~ 好的各位,请上车的乘客往里走,请不要堵塞通道,谢谢.我们开车吧~ 正文: 今天先上图吧,看看效果再说 今天的蓝胖子长这样,看到它还是这么胖,我就放心了.这世界还是充满正能量的,总归还有人比我胖,哈哈哈 然后是上代码 html部分 <canvas id="
-
js+html5实现canvas绘制网页时钟的方法
本文实例讲述了js+html5实现canvas绘制网页时钟的方法,画的是一个可用于网页的.带摆的钟表,可以通过按钮调整其大小和位置,具体实现内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Clock</title> <script type="tex
-
浅谈时钟的生成(js手写简洁代码)
在生成时钟的过程中自己想到布置表盘的写法由这么几种: 当然利用那种模式都可以实现,所以我们要用一个最好理解,代码有相对简便的方法实现 1.利用三角函数 用js在三角函数布置表盘的过程中有遇见到这种情况:是在表盘的刻度处,利用三角函数计算具体的值时不能得到整数,需要向上或者向下取整,这样无形中就会存在些许偏差,而且这样的偏差难利用样式来调整到位,即使最终效果都可以实现,但是细微处的缝隙和角度的偏差都会影响整体的视觉体验,作为一名程序开发人员,这样的视觉体验很难让别人认可,放弃. 2.利用遮罩层 j
-
浅谈webpack打包生成的bundle.js文件过大的问题
问题 使用webpack进行打包时,发现bundle.js竟然有2M多. 解决办法 网上有去除插件.提取第三方库.压缩代码等方法. 还有一个比较容易忽略的原因就是开了sourcemap 在生产环境中,应使用devtool: false 关闭sourcemap后bundle.js的大小从2.46M降到302k 以上这篇浅谈webpack打包生成的bundle.js文件过大的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: 彻底解决 webpa
-
浅谈JAVA如何生成UUID唯一标识
1.UUID 简介 UUID 含义是通用唯一识别码 (Universally Unique Identifier),这是一个软件建构的标准. 也是被开源软件基金会 (Open Software Foundation, OSF)的组织应用在分布式计算环境 (Distributed Computing Environment, DCE) 领域的一部分. UUID 的目的,是让分布式系统中的所有元素,都能有唯一的辨识资讯,而不需要透过中央控制端来做辨识资讯的指定. 如此一来,每个人都可以建立不与其它人
-
Django 浅谈根据配置生成SQL语句的问题
想要根据django中的模型和配置生成SQL语句,需要先进行一定的设置: 首先需要在你的app文件夹中进入setting.py文件,里面有一个DATABASES,进行设置数据库的配置信息: DATABASES = { 'default': { # 'ENGINE': 'django.db.backends.sqlite3', # 'NAME': os.path.join(BASE_DIR, 'db.sqlite3'), 'ENGINE': 'django.db.backends.mysql',
-
JS手写一个自定义Promise操作示例
本文实例讲述了JS手写一个自定义Promise操作.分享给大家供大家参考,具体如下: 经常在面试题中会看到,让你实现一个Promsie,或者问你实现Promise的原理,所以今天就尝试利用class类的形式来实现一个Promise 为了不与原生的Promise命名冲突,这里就简单命名为MyPromise. class MyPromise { constructor(executor) { let _this = this this.state = 'pending' // 当前状态 this.v
-
浅谈Android studio 生成apk文件时的 key store path 的问题
使用Android studio生成apk文件时,Key store path 是密钥库文件地址的意思,新手菜鸟会想,我怎么知道他在哪里,其实他的地址是你来决定的. 如下图,你选择一个文件夹后,填写file name,然后点击ok就生成了. 大佬们见怪了~ 补充知识:AndroidStudio每次打开项目不自动打开上一次打开的文件.每次打包都需要重新输入key store path 最近在运行AS时,发现每次打开都要重新的打开目录及打开相关的文件,打包必须重新添加签名文件,我也是醉了. 问题原因
-
浅谈Redis跟MySQL的双写问题解决方案
目录 写在前面 三种读写缓存策略 Cache-AsidePattern(旁路缓存模式) Read-Through/Write-Through(读写穿透) WriteBehindPattern(异步缓存写入) 旁路缓存模式解析 CacheAsidePattern的一些疑问 CacheAsidePattern的缺陷 项目中有遇到这个问题,跟MySQL中的数据不一致,研究一番发现这里面细节并不简单,特此记录一下. 写在前面 严格意义上任何非原子操作都不可能保证一致性,除非用阻塞读写实现强一致性,所以缓
-
JS手写bind之处理new的情况详解
目录 new 判断函数是否通过 new 被调用 new 和 bind 实现完整的 bind 结尾 大家好,我是前端西瓜哥. 之前写了一篇关于 JS 中 bind 方法的实现的文章,并给出了实现: Function.prototype.myBind = function(thisArg, ...prefixArgs) { const fn = this; return function(...args) { return fn.call(thisArg, ...prefixArgs, ...arg
-
Tensorflow卷积实现原理+手写python代码实现卷积教程
从一个通道的图片进行卷积生成新的单通道图的过程很容易理解,对于多个通道卷积后生成多个通道的图理解起来有点抽象.本文以通俗易懂的方式讲述卷积,并辅以图片解释,能快速理解卷积的实现原理.最后手写python代码实现卷积过程,让Tensorflow卷积在我们面前不再是黑箱子! 注意: 本文只针对batch_size=1,padding='SAME',stride=[1,1,1,1]进行实验和解释,其他如果不是这个参数设置,原理也是一样. 1 Tensorflow卷积实现原理 先看一下卷积实现原理,对于
-
如何从零开始利用js手写一个Promise库详解
前言 ECMAScript 是 JavaScript 语言的国际标准,JavaScript 是 ECMAScript 的实现.ES6 的目标,是使得 JavaScript 语言可以用来编写大型的复杂的应用程序,成为企业级开发语言. 概念 ES6 原生提供了 Promise 对象. 所谓 Promise,就是一个对象,用来传递异步操作的消息.它代表了某个未来才会知道结果的事件(通常是一个异步操作),并且这个事件提供统一的 API,可供进一步处理. 三道思考题 刚开始写前端的时候,处理异步请求经常用