原生 js 时钟实现
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
padding: ;
margin: ;
box-sizing: border-box
} ul,
li {
list-style: none;
} .clock-box {
position: absolute;
width: 200px;
height: 200px;
top: %;
left: %;
margin-top: -100px;
margin-left: -100px;
} .clock-box:after {
content: '';
width: 10px;
height: 10px;
position: absolute;
top: %;
left: %;
margin-top: -5px;
margin-left: -5px;
background: rebeccapurple;
border-radius: 5px;
} .clock-box .tick-box {
position: relative;
width: %;
height: %;
border: 2px solid black;
border-radius: %;
} .clock-box .tick-box li {
position: absolute;
height: 2px;
width: 5px;
top: 97px;
left: -2px;
background-color: #;
transform-origin: 100px center;
} .clock-box .tick-box li:nth-child(5n+) {
width: 10px;
} .item {
position: absolute;
background-color: red;
transform-origin: center bottom;
} .seconds-hand {
height: 89px;
width: 1px;
top: 11px;
left: 99px;
transform: rotate(0deg)
} .minutes-hand {
height: 76px;
width: 2px;
top: 24px;
left: 98px;
transform: rotate(60deg);
background: green;
} .hours-hand {
height: 60px;
width: 4px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
top: 40px;
left: 96px;
transform: rotate(72deg);
background: blue
}
</style>
</head> <body>
<div class="clock-box">
<ul class="tick-box">
</ul>
<div class="hours-hand item"></div>
<div class="minutes-hand item"></div>
<div class="seconds-hand item"></div>
</div>
</body>
<script>
const frag = document.createDocumentFragment();
const tickBox = document.querySelector('.tick-box')
const hour = document.querySelector('.hours-hand')
const minute = document.querySelector('.minutes-hand')
const second = document.querySelector('.seconds-hand')
for (let i = ; i < ; i++) {
let li = document.createElement('li');
li.style.transform = `rotate(${i * / }deg)`;
frag.appendChild(li)
}
tickBox.appendChild(frag) function time() {
const now = new Date();
const h = now.getHours();
const m = now.getMinutes();
const s = now.getSeconds();
hour.style.transform = `rotate(${(h+m/)*}deg)`
minute.style.transform = `rotate(${(m+s/)*}deg)`
second.style.transform = `rotate(${s*}deg)`
}
time()
setInterval(time, )
</script> </html>
效果如下:
原生 js 时钟实现的更多相关文章
- 基于canvas的原生JS时钟效果
概述 运用html5新增画布canvas技术,绘制时钟效果,无需引用任何插件,纯js. 详细 代码下载:http://www.demodashi.com/demo/11935.html 给大家介绍一个 ...
- css3和原生js时钟
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 圆盘时钟效果 原生JS
圆盘时钟 旋转时钟 数字时钟 写在前面 仿荣耀手机时钟,设计的同款时钟效果 实现效果 实现原理 数字时钟 利用Date内置对象获取当下的时间,通过处理呈现在页面上 这一步获取时间是非常简单的,通过Da ...
- 利用css+原生js制作简易钟表
利用css+原生js制作简单的钟表.效果如下所示 实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...
- 原生JS封装Ajax插件(同域&&jsonp跨域)
抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...
- 常用原生JS方法总结(兼容性写法)
经常会用到原生JS来写前端...但是原生JS的一些方法在适应各个浏览器的时候写法有的也不怎么一样的... 今天下班有点累... 就来总结一下简单的东西吧…… 备注:一下的方法都是包裹在一个EventU ...
- 原生JS实现"旋转木马"效果的图片轮播插件
一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...
- 再谈React.js实现原生js拖拽效果
前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...
- React.js实现原生js拖拽效果及思考
一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
随机推荐
- HDU 1392 Surround the Trees(几何 凸包模板)
http://acm.hdu.edu.cn/showproblem.php?pid=1392 题目大意: 二维平面给定n个点,用一条最短的绳子将所有的点都围在里面,求绳子的长度. 解题思路: 凸包的模 ...
- cocos代码研究(7)即时动作子类学习笔记
理论部分 即时动作是会立即被执行的动作.他们没有持续时间动作(ActionInterval)的持续时间属性.继承自 FiniteTimeAction.被 CallFunc, FlipX, FlipY, ...
- Typecho博客让文章列表页只显示摘要的方法
在当前主题的 index.php 文件中找到代码 <?php $this->content('阅读剩余部分...'); ?> 将其替换为 <?php $this->exc ...
- Perl的变量及语境(一)
Perl语言中的大部分语句表达式后都紧接一个分号,分隔不同的Perl语句. perl解释器能一次完成编译和运行这两个动作. perl通过一对反引号"``"来表示运行外部命令. 也可 ...
- mybatis例子
mybatis的mapper不允许重载,因为它需要通过方法名称[不加签名]去查找需要执行的sql 1.批量删除 <delete id="deletePlanLocations" ...
- 常用linux命令:locate 命令
locate 让使用者可以很快速的搜寻档案系统内是否有指定的档案.其方法是先建立一个包括系统内所有档案名称及路径的数据库,之后当寻找时就只需查询这个数据库,而不必实际深入档案系统之中了.在一般的 di ...
- Hive中的三种不同的数据导出方式介绍
问题导读:1.导出本地文件系统和hdfs文件系统区别是什么?2.带有local命令是指导出本地还是hdfs文件系统?3.hive中,使用的insert与传统数据库insert的区别是什么?4.导出数据 ...
- 轻量级文本标记语言-Markdown
Markdown简介 接触过github的都知道,在发布项目的时候可以建立一个说明文件README.md,这个md文件就是Markdown文本编辑语言的文件. Markdown 是一种轻量级标记语言, ...
- Python3.x(windows系统)安装libxml2库
Python3.x(windows系统)安装libxml2库 cmd安装命令: pip install lxml 执行结果: 再执行命令: pip install virtualenv 执行结果:
- # 20145106 《Java程序设计》第6周学习总结
教材学习内容总结 来源和目的都不知道的情况下还是可以撰写程序的,有这类需求的时候,可以设计一个通用的dump()方法.dump方法接受inputstream与outputstream实例,分别代表读取 ...