html弄一个简易时钟
新人学习,制作html页面时钟表盘,实现调用时间,
CSS部分代码如下
-
html,
-
body{
-
background-color: #000000;
-
}
-
.fix-center{
-
position: absolute;
-
top: 0;
-
right: 0;
-
bottom: 0;
-
left: 0;
-
margin: auto;
-
}
-
/* 风暴烈酒习作 */
-
.clock-wrapper{
-
width: 680px;
-
height: 680px;
-
background-color: #aa55ff;
-
border-radius: 50%;
-
}
-
.time-wrap{
-
color: #005500;
-
font-size: 54px;
-
font-weight: bold;
-
}
-
.dial-time{
-
position: absolute;
-
}
-
.dial-time:nth-child(1){
-
top: 15px;
-
left: 50%;
-
margin-left: -15px;
-
}
-
.dial-time:nth-child(2){
-
right: 40px;
-
top: 50%;
-
margin-left: -15px;
-
}
-
.dial-time:nth-child(3){
-
bottom: 15px;
-
left: 50%;
-
margin-left: -15px;
-
}
-
.dial-time:nth-child(4){
-
left: 40px;
-
top: 50%;
-
margin-left: -15px;
-
}
-
.line-wrap{
-
width: 440px;
-
height: 27.5rem;
-
border-radius: 50%;
-
box-shadow: 0 0 10px 4px #efefef;
-
}
-
.dial-line{
-
position: absolute;
-
left: 53%;
-
}
-
.hour-line{
-
width:15px;
-
height: 200px;
-
margin-top: 80px;
-
margin-left: -7px;
-
background-color: #353535;
-
transform-origin: 50% 75%;
-
}
-
.minute-line{
-
width:10px;
-
height: 300px;
-
margin-top: -20px;
-
margin-left: -5px;
-
background-color: #353535;
-
transform-origin: 50% 83%;
-
}
-
.second-line{
-
width:5px;
-
height: 260px;
-
margin-top: 20px;
-
margin-left: -2px;
-
background-color: red;
-
transform-origin: 50% 80%;
-
}
-
.line-wrap::after{
-
position: absolute;
-
top: 1.25rem;
-
right: 0;
-
bottom: 0;
-
left: 27px;
-
width: 40px;
-
height: 40px;
-
margin: auto;
-
background-color: #ff0000;
-
border-radius: 50%;
-
content: '';
-
}
-
-
-
-
-
-
-
-
-
javascript部分代码如下:
-
/* 表盘指针 */
-
let hourLine = document.querySelector('.hour-line'),
-
minuteLine = document.querySelector('.minute-line'),
-
secondLine = document.querySelector('.second-line');
-
-
function setTime(){
-
const date = new Date();
-
let s = date.getSeconds(),
-
m = date.getMinutes() s / 60,
-
h = date.getHours() m / 60;
-
/* 风暴烈酒习作 */
-
hourLine.style.transform = `rotate(${h*30}deg)`;
-
minuteLine.style.transform = `rotate(${m*6}deg)`;
-
secondLine.style.transform = `rotate(${s*6}deg)`;
-
}
-
setTime();
-
setInterval(setTime,1000);
HMTL部分代码如下:
-
-
<html lang="en">
-
<!-- 陈.风暴烈酒学习制作 -->
-
<head>
-
<meta charset="utf-8" />
-
<meta http-equiv='X-UA-Compatible' content="IE=edge,chrome=1">
-
<meta name="viewport" content="width=device-width,initial-scale=1.0" >
-
<title>document</title>
-
<link rel="stylesheet" href="css/index.css">
-
</head>
-
<body>
-
<div class="clock-wrapper fix-center">
-
<!-- 表盘数字 -->
-
<div class="time-wrap">
-
<div class="dial-time">12</div>
-
<div class="dial-time">3</div>
-
<div class="dial-time">6</div>
-
<div class="dial-time">9</div>
-
</div>
-
-
</div>
-
<!-- 表盘指针 -->
-
<div class="line-wrap fix-center">
-
<div class="dial-line hour-line"></div>
-
<div class="dial-line minute-line"></div>
-
<div class="dial-line second-line"></div>
-
-
</div>
-
<script src='js/index1.js' type="text/javascript" charset="utf-8"></script>
-
</body>
-
</html>
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgffabe
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01