1
我一直忙于这么长时间试图让我的时钟为中心。
我怎么能中心所有的旋转class=pointer在clock的中间？
无论我尝试什么，它总是偏离中心。从未完全集中。如何将旋转div与变换原点对齐？
有人救了我！
const elHrs = document.getElementById('hours'),
elMin = document.getElementById('mins'),
elSec = document.getElementById('secs');
(function clock() {
const date = new Date(),
secs = date.getSeconds(),
mins = date.getMinutes(),
hrs = date.getHours();
const degHrs = ((hrs/12) * 360);
const degSec = ((secs/60) * 360);
if(degSec >= 354 || degSec <= 6) {
elSec.style.transitionDuration = "0.01s";
} else {
elSec.style.transitionDuration = "0.4s";
}
const degMin = ((mins/60) * 360);
if(degMin >= 354 || degMin <= 6) {
elMin.style.transitionDuration = "0.01s";
} else {
elMin.style.transitionDuration = "0.4s";
}
elSec.style.transform = `rotate(${degSec}deg)`;
elMin.style.transform = `rotate(${degMin}deg)`;
elHrs.style.transform = `rotate(${degHrs}deg)`;
return setTimeout(clock, 500);
})()html {
box-sizing: border-box; }
*,
*:before,
*:after {
box-sizing: inherit; }
html {
background: black url(http://unsplash.it/1500/1000?image=721&blur=50);
background-size: cover;
color: white; }
body {
margin: 0; }
.root {
display: flex;
flex-direction: column;
min-height: 100vh; }
section {
display: flex;
flex: 1;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center; }
section span {
display: inline-block;
width: 16px;
height: 16px;
margin: 0 2px;
border-radius: 50%;
background-color: red; }
section h1 {
width: 100%; }
.clock {
position: relative;
width: 20rem;
height: 20rem;
border-radius: 50%;
border: 5px solid red; }
.clock:after {
border-radius: 50%;
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 5%;
height: 5%;
z-index: 10;
background: #000; }
.pointer {
position: absolute;
width: 40%;
height: 5%;
background-color: white;
transform-origin: 100%; }
footer {
text-align: center;
padding: 10px; }<!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>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="root">
<section>
<h1>A <span></span> Simple <span></span> Clock </h1>
<div class="clock">
<div class="pointer" id="secs"></div>
<div class="pointer" id="mins"></div>
<div class="pointer" id="hours"></div>
</div>
</section>
<footer> footer</footer>
</div>
<script src="js/main.js"></script>
</body>
</html>
谢谢，这个工作，但有没有办法做到这一点，而无需手动calcu拉丁比例？ – Hyrule
@Hyrule我似乎无法找到一种方法，但还有很多...... – sol