html罗盘时钟的代码

今天来分享一个代码

<!DOCTYPE html><html>
<head>
<title>罗盘时钟</title>
<style type="text/css">
body {
text-align: center;
font-family: Arial, sans-serif;
font-size: 20px;
margin-top: 100px;      }
.clock {
width: 400px;
height: 400px;
margin: 0 auto;
position: relative;
}
.hour, .minute, .second {
width: 0;
height: 0;
position: absolute;
top: 50%;
left: 50%;
transform-origin: bottom center;
transform: translate(-50%, -50%);
}
.hour {
border-left: 10px solid #000;
height: 40px;       }
.minute {
border-left: 6px solid #000;
height: 80px;       }
.second {
border-left: 2px solid #f00;
height: 100px;      }
.small-circle, .big-circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;     }
.small-circle {
width: 10px;
height: 10px;
background-color: #000;
}
.big-circle {
width: 20px;
height: 20px;
border: 2px solid #000;
}
</style>
</head>
<body>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
<div class="second"></div>
<div class="small-circle"></div>
<div class="big-circle"></div>
</div>
<script type="text/javascript">
function getTime() {
let now = new Date();
let hours = now.getHours();
let minutes = now.getMinutes();
let seconds = now.getSeconds();
let hourDegree = hours * 30 + minutes * 0.5 - 90;
let minuteDegree = minutes * 6 + seconds * 0.1 - 90;
let secondDegree = seconds * 6 - 90;           document.querySelector('.hour').style.transform = `rotate(${hourDegree}deg)`;
document.querySelector('.minute').style.transform = `rotate(${minuteDegree}deg)`;
document.querySelector('.second').style.transform = `rotate(${secondDegree}deg)`;
}
setInterval(getTime, 1000);
</script></body></html>

html罗盘时钟的代码相关推荐

用PyCharm实现罗盘时钟（代码）
软件:PyCharm 代码: demo.css *{margin:0;padding:0 } html,body{width:100%;height:100%;background-color:#00 ...
罗盘时钟制作代码_抖音八卦时钟手机屏保设置方法！
声明:部分内容来源网络抖音时钟数字罗盘屏保最近十分的火爆, 看上去很有意思也很有趣, 很多人都想要弄. 而抖音时钟数字罗盘屏保如何设置? 今天小编就教大家如何30秒内搞定其实这个非常的简单, 只要 ...
罗盘时钟编码代码_安全研究 | 利用macOS Dock实现代码的持久化执行
背景介绍近期,我一直在研究macOS上的一些持久化技术,尤其是如何利用低等级用户权限来修改文件以影响用户交互.对于macOS终端用户来说,交互最频繁的当属Dock了. 在我的研究过程中,我发现了一个 ...
python时钟罗盘酷炫代码_抖音上的时钟屏保，被我改造完用来表白
作者:爱编程的小和尚原文链接:https://blog.csdn.net/Newbie___/article/details/105378852 抖音上很火的时钟屏保,被我改造完后用来准备准备准备表 ...
用前端代码编写一个动态的罗盘时钟
用前端代码编写一个动态的罗盘时钟前言一.代码如下 1.index 2.js 3.css 页面效果前言今天给大家分享一个罗盘时钟的前端代码,喜欢的小伙伴帮忙点赞一下噢! 一.代码如下 1.ind ...
HTML5七夕情人节表白网页(抖音-罗盘时钟) HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码程序员表白源码 3D旋转相册 js烟花代码 css爱心表白
HTML5七夕情人节表白网页❤抖音罗盘时钟❤ HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码程序员表白源码 3D旋转相册 js烟花代码 css爱心表白这是程序员表白系列 ...
css制作炫酷的罗盘时钟特效（附代码）
效果图然后是代码 <!DOCTYPE html> <html lang="en"><head><meta charset="U ...
jQuery罗盘时钟代码
源码介绍: jQuery罗盘时钟代码基于jquery-3.4.1.min.js制作,环形罗盘,时钟动画. 网盘下载地址: http://www.bytepan.com/4iimSDHOqnu 图片:
CSS+JS+HTML实现罗盘时钟（附完整代码）
CSS+JS+HTML实现罗盘时钟代码以及效果如下: <!DOCTYPE html> <html lang="en"><head><me ...

html罗盘时钟的代码

html罗盘时钟的代码相关推荐

最新文章

热门文章