作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试实现倒数计时器,但使用模拟时钟而不是数字时钟。我的目标是将接下来的 25 分钟突出显示为从分钟时钟句柄开始的圆形扇区。
这是我到目前为止所拥有的:https://codepen.io/seifjo/pen/ExVQLOd
这是上面codepen的相关代码:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #68a4ff;
}
.clock {
width: 350px;
height: 350px;
display: flex;
align-items: center;
justify-content: center;
background: #bcd0e7;
border: 20px solid #fff;
border-radius: 50%;
background-size: cover;
box-shadow: inset 0 0 30px rgba(0, 0, 0, .2), 0 20px 20px rgba(0, 0, 0, .2), 0 0 0 4px rgba(255, 255, 255, 1);
}
.clock {
background-image: url(clock.png), linear-gradient(330deg, transparent 50%, #fff 50%), linear-gradient(540deg, #fff 50%, transparent 50%);
}
.clock::before {
content: '';
position: absolute;
width: 15px;
height: 15px;
background: #848484;
border: 2px solid #fff;
border-radius: 50%;
z-index: 10000;
}
.clock .hour,
.clock .min,
.clock .sec {
position: absolute;
}
.clock .hour,
.hr {
width: 160px;
height: 160px;
}
.clock .min,
.mn {
width: 190px;
height: 190px;
}
.clock .sec,
.sc {
width: 230px;
height: 230px;
}
.hr,
.mn,
.sc {
display: flex;
justify-content: center;
position: absolute;
border-radius: 50%;
}
.hr::before {
content: '';
position: absolute;
width: 8px;
height: 80px;
background: #848484;
z-index: 10;
border-radius: 6px 6px 0 0;
}
.mn:before {
content: '';
position: absolute;
width: 4px;
height: 90px;
background: #d6d6d6;
z-index: 11;
border-radius: 6px 6px 0 0;
}
.sc:before {
content: '';
position: absolute;
width: 2px;
height: 150px;
background: #ff6767;
z-index: 12;
border-radius: 6px 6px 0 0;
}
<div class="clock">
<div class="mask"></div>
<div class="hour">
<div class="hr" id="hr">
</div>
</div>
<div class="min">
<div class="mn" id="mn">
</div>
</div>
<div class="sec">
<div class="sc" id="sc">
</div>
</div>
</div>
<script>
const deg = 6;
const hr = document.querySelector("#hr");
const mn = document.querySelector("#mn");
const sc = document.querySelector("#sc");
setInterval(() => {
let day = new Date();
let hh = day.getHours() * 30;
let mm = day.getMinutes() * deg;
let ss = day.getSeconds() * deg;
hr.style.transform = `rotateZ(${(hh)+(mm/12)}deg)`;
mn.style.transform = `rotateZ(${mm}deg)`;
sc.style.transform = `rotateZ(${ss}deg)`;
}, 1000);
</script>
最佳答案
由于突出显示部分是 w.r.t 当前时间,我从 css 中删除样式并在脚本中计算样式。
请注意,该解决方案仅适用于高亮时间 <= 30 分钟。由于背景图像是半圆。超过 30 分钟,您需要另一个后半圈,通过控制它们重叠的数量,您将突出显示扇区 > 30 分钟
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #68a4ff;
}
.clock {
width: 350px;
height: 350px;
display: flex;
align-items: center;
justify-content: center;
background: #bcd0e7;
border: 20px solid #fff;
border-radius: 50%;
background-size: cover;
box-shadow: inset 0 0 30px rgba(0, 0, 0, .2), 0 20px 20px rgba(0, 0, 0, .2), 0 0 0 4px rgba(255, 255, 255, 1);
}
.clock::before {
content: '';
position: absolute;
width: 15px;
height: 15px;
background: #848484;
border: 2px solid #fff;
border-radius: 50%;
z-index: 10000;
}
.clock .hour,
.clock .min,
.clock .sec {
position: absolute;
}
.clock .hour,
.hr {
width: 160px;
height: 160px;
}
.clock .min,
.mn {
width: 190px;
height: 190px;
}
.clock .sec,
.sc {
width: 230px;
height: 230px;
}
.hr,
.mn,
.sc {
display: flex;
justify-content: center;
position: absolute;
border-radius: 50%;
}
.hr::before {
content: '';
position: absolute;
width: 8px;
height: 80px;
background: #848484;
z-index: 10;
border-radius: 6px 6px 0 0;
}
.mn:before {
content: '';
position: absolute;
width: 4px;
height: 90px;
background: #d6d6d6;
z-index: 11;
border-radius: 6px 6px 0 0;
}
.sc:before {
content: '';
position: absolute;
width: 2px;
height: 150px;
background: #ff6767;
z-index: 12;
border-radius: 6px 6px 0 0;
}
<div class="clock">
<div class="mask"></div>
<div class="hour">
<div class="hr" id="hr">
</div>
</div>
<div class="min">
<div class="mn" id="mn">
</div>
</div>
<div class="sec">
<div class="sc" id="sc">
</div>
</div>
</div>
<script>
const deg = 6;
const hr = document.querySelector("#hr");
const mn = document.querySelector("#mn");
const sc = document.querySelector("#sc");
setInterval(() => {
let day = new Date();
let hh = day.getHours() * 30;
let mm = day.getMinutes() * deg;
let ss = day.getSeconds() * deg;
hr.style.transform = `rotateZ(${(hh)+(mm/12)}deg)`;
mn.style.transform = `rotateZ(${mm}deg)`;
sc.style.transform = `rotateZ(${ss}deg)`;
}, 1000);
let lauchTime = new Date();
let clock = document.querySelector('.clock');
let startDeg = ((lauchTime.getMinutes() * deg) + 360 - 90) % 360;
let highlightPeriod = 25;
let endDeg = startDeg + (highlightPeriod * deg);
clock.style.backgroundImage = `linear-gradient(${startDeg}deg, transparent 50%, #fff 50%), linear-gradient(${endDeg}deg, #fff 50%, transparent 50%)`;
</script>
关于javascript - 如何使用 CSS 渐变在模拟时钟上突出显示 25 分钟?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61648647/
有没有一种方法可以“标记”对象的属性,使它们在反射中“突出”? 例如: class A { int aa, b; string s1, s2; public int AA
我是一名优秀的程序员,十分优秀!