html,css,js实现的一个钟表
效果如图：
实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Clock</title>
<style>
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
background: #2e1f27;
}
p{
color: #854d27;
}
code{
color: #f4c950;
}
.clock {
--clock-width: 50vmin;
width: var(--clock-width);
height: var(--clock-width);
position: relative;
overflow: hidden;
border: 6px solid #f4c950;
border-radius: 50%;
}
.clock:after {
content: '';
position: absolute;
z-index: 10;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 6px;
height: 6px;
background: #d0b8ac;
border-radius: 50%;
}
.scaleContainer {
--scale-width: 2px;
margin: 0;
padding: 0;
width: var(--scale-width);
height: calc(var(--clock-width) / 2 + 4px);
position: absolute;
bottom: calc(var(--clock-width) / 2);
left: calc((var(--clock-width) - var(--scale-width)) / 2);
/*background: #f4c950;*/
transform-origin: center bottom;
}
.scaleContainer:nth-of-type(5n + 5) {
--scale-width: 5px;
width: var(--scale-width);
left: calc((var(--clock-width) - var(--scale-width)) / 2);
}
.scale{
height: calc(var(--clock-width) / 22);
background: #f4c950;
}
.scaleContainer:nth-of-type(5n + 5) .scale{
height: calc(var(--clock-width) / 16);
}
.hand {
--hand-width: 4px;
--hand-length: calc(var(--clock-width) / 2 - 6px);
width: var(--hand-width);
height: var(--hand-length);
background: #d0b8ac;
position: absolute;
bottom: calc(var(--clock-width) / 2);
left: calc((var(--clock-width) - var(--hand-width)) / 2);
transform-origin: center bottom;
z-index: 20;
}
.hour-hand{
height: 15vmin;
}
.minute-hand {
--hand-height: 20vmin;
height: var(--hand-height);
}
.second-hand {
--hand-width: 2px;
width: var(--hand-width);
left: calc((var(--clock-width) - var(--hand-width)) / 2);
}
</style>
</head>
<body>
<div class="clock"> <div class="hand hour-hand"></div>
<div class="hand minute-hand"></div>
<div class="hand second-hand"></div>
</div>
<p>Responsive dimension via CSS <code>cal</code> and <code>var</code>.</p> <script>
const $clock = document.querySelector('.clock');
for (let i = 1; i <= 60; i++) {
const $scaleContainer = document.createElement('p');
$scaleContainer.classList.add('scaleContainer');
$scaleContainer.style.transform = `rotate(${6 * i}deg)`;
const $scale = document.createElement('div');
$scale.classList.add('scale');
// $scale.textContent = `${i}`;
$scaleContainer.appendChild($scale);
$clock.appendChild($scaleContainer);
} const $hourHand = document.querySelector('.hour-hand');
const $minuteHand = document.querySelector('.minute-hand');
const $secondHand = document.querySelector('.second-hand'); function tick() {
const date = new Date();
const CS = date.getSeconds();
const Sdeg = CS / 60 * 360;
const CM = date.getMinutes();
const Mdeg = CM / 60 * 360 + 360 / 60 / 60 * CS;
const Hdeg = date.getHours() / 12 * 360 + 360 / 12 / 60 * CM + 360 / 12 / 60 / 60 * CS;
$hourHand.style.transform = `rotate(${Hdeg}deg)`;
$minuteHand.style.transform = `rotate(${Mdeg}deg)`;
$secondHand.style.transform = `rotate(${Sdeg}deg)`;
} tick(); setInterval(tick, 1000);
</script>
</body>
</html>
html,css,js实现的一个钟表的更多相关文章
- 用css3+js写了一个钟表
有一天看到css3旋转这个属性,突发奇想的写了一个钟表(没做浏览器兼容),来一起看看是怎么写的吧! 先给个成品图,最终结果是个样子的(动态的). 首先,思考了一下页面的布局,大致需要4层div,最底层 ...
- 【html css js】实现一个简易日历
——[效果预览] 实现了日历最基础的功能,当前日期红色显示,可通过上方的左右按钮查看上一月或下一月的日期. ——[代码部分] 1. HTML <body> <div class=&q ...
- 利用前端三大件（html+css+js）开发一个简单的“todolist”项目
一.介绍 todolist,即待办事项.在windows android ios上参考微软家出的那个To-Do应用,大概就是那样的.我这个更简单,功能只有“待办” “已完成”两项,并且是在浏览器打开的 ...
- 一个小公司的前端笔试HTML CSS JS
网上有这套题的答案,版本也很多,我做了很多参考.本文就当个小笔记,可能有错误,还望指正~ 第1章 Html篇 1. 你做的网页在哪些浏览器测试过?这些浏览器的内核分别是什么? 浏览器类型 内核 Fi ...
- CSS & JS 制作滚动幻灯片
==================纯CSS方式==================== <!DOCTYPE html> <html> <head> <met ...
- 无聊的人用JS实现了一个简单的打地鼠游戏
直入正题,用JS实现一个简单的打地鼠游戏 因为功能比较简单就直接裸奔JS了,先看看效果图,或者 在线玩玩 吧 如果点击颜色比较深的那个(俗称坏老鼠),将扣分50:如果点击颜色比较浅的那个(俗称好老鼠) ...
- Css Js Loader For Zencart
Css Js Loader 描述:这个插件很早就出来了,可能知道人非常少 这个插件的功能是整合所有的网站的CSS和JS内容到一个文件里边. 因为CSS和JS文件到了一个文件,加快了程序的运行 在配合其 ...
- 购物车数字加减按钮HTML+CSS+JS（有需要嫌麻烦的小伙伴拿走不谢）
之前在写详情页的时候,如下图 因为自己嫌麻烦,就去看其他网站是怎么写的,想直接拿来用,后来看来看去觉得写得很麻烦,于是最后还是决定自己写,附上HTML+CSS+JS代码,一条龙一站式贴心服务2333 ...
- 12小时包你学会基于ReactMix框架的ReactNativeApp开发（二）基于Css+HTML写第一个app页面
上一篇文章,大家对于ReactMix(https://github.com/xueduany/react-mix)框架有了一个基本认识,知道我们是一个语法糖,帮助大家基于一套代码,所有平台都能跑.那么 ...
随机推荐
- oracle中查询表中的触发器，关闭启用操作
1.查询指定表中有哪些触发器 select * from all_triggers WHERE table_name='表名' 2.禁用指定表中所有的触发器 alter table table_nam ...
- 学习前端 第一天之html标签补充
一.常用浏览器内核 Trident(IE内核) Gecko(firefox) webkit(Safari) Chromium/Blink(chrome) Blink(Opera) 二.常见标签回顾 a ...
- Webstorm2017.3.3软件的安装使用
下载 ▶进入jetbrains的官方网站点击download,即下载开始.官方网站链接:http://www.jetbrains.com/webstorm/ 安装 ▶双击刚下载完成的.exe文件开始进 ...
- R 读取xls/xlsx文件
包readxl install.packages('readxl',repois='https://mirrors.utsc.edu.cn/CRAN/) library(readxl) # read_ ...
- 12.SpringMVC核心技术-请求转发和重定向
默认情况下,跳转到指定的View,使用的是请求转发.也可以显示的进行指出 此时,需在setViewName() 指定的视图前添加 forword: , 且此时的视图不会再与视图解析器中的前缀和后缀进 ...
- String s=new String("xyz");创建了几个String Object？二者之前的区别是什么？
两个.第一个对象是字符串常量"xyz",第二个对象是new String("xyz")的时候产生的,在堆中分配内存给这个对象,只不过这个对象的内容是指向字符串常 ...
- MySQL数据库常见问题1：关于 “ MySQL Installer is running in Community mode ” 的解决办法
现象: MYSQL在安装完成后,系统能正常运行,但是第二天出现了如下一个提示框,如下图: 给个人人都看得懂的如下图: 解决办法: 这个是新版本MySQL服务自带的一个定时任务,每天23: ...
- Centos7虚拟机根分区扩展
线上的kvm虚拟机,原来只规划了8G,后来发现硬盘动不动就被日志塞满了,需要进行扩容. 扩容步骤如下: 1.先把kvm虚拟机关机 2.在宿主机上进行kvm虚拟机的磁盘扩容 qemu-img resiz ...
- Caffe---自带工具 绘制loss和accuracy曲线
Caffe自带工具包---绘制loss和accuracy曲线 为什么要绘制loss和accuracy曲线?在训练过程中画出accuracy 和loss曲线能够更直观的观察网络训练的状态,以便更好的优化 ...
- shell脚本基础编写
shell脚本的格式 名称:Shell 脚本文件的名称可以任意,但为了避免被误以为是普通文件,建议将 .sh 后缀加上,以表示是一个脚本文件. shell 脚本中一般会出现三种不同的元素: 第一行的脚 ...