文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
社区首页 >问答首页 >仅使用DIVs在JavaScript中创建时钟

问仅使用DIVs在JavaScript中创建时钟
EN

Stack Overflow用户
提问于 2018-05-31 05:19:05
回答 1查看 1.1K关注 0票数 2

我们必须仅使用divs (document.createElement())在JavaScript中构建时钟。不知怎么的，我从来没有弄清楚div的定位。目前，我已经在努力制作第一个DIV。

如果我在角度的计算中有错误，很抱歉。

有没有更好的方法来实现这个目标？

现在它看起来有点像这样：

​

红线表示时钟的编号(总共12个)。

​

window.onload = function drawclock() {
  var clock = this.document.getElementById("clock");
  var width = clock.offsetHeight;
  var radius = width / 2;

  for (var i = 1; i < 12; i++) {
    var element = document.createElement("DIV");
    addClass(element, "h");
    addClass(element, i);
    var deg = 30 * i;
    var x = Math.cos(deg * (180 / Math.PI)) * radius + radius;
    var y = Math.sin((90 - deg) * (180 / Math.PI)) * radius + radius;
    console.log(x + " " + y);
    element.style.position = "absolute";
    element.style.left = x + "px";
    element.style.top = y + "px";
    element.style.transform = "rotate(" + deg + "deg)";
    clock.appendChild(element);
  }
}

function addClass(element, name) {
  var arr;
  arr = element.className.split(" ");
  if (arr.indexOf(name) == -1) {
    element.className += " " + name;
  }
}
* {
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  background-color: #000;
}

#clock {
  height: 500px;
  width: 500px;
  background-color: #DDDDDD;
  border-radius: 100%;
  position: absolute;
}

.h {
  width: 10px;
  height: 70px;
  background-color: red
}

.m {
  width: 5px;
  height: 80px;
  background-color: blue
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
  <script src="main.js"></script>
</head>

<body>
  <div id="clock">
  </div>
</body>

</html>

​

javascript
css
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-05-31 06:25:58

这是一个由Eric Brewer在CodePen上制作的时钟示例。

我已经编译了SCSS和Pug，只保留了使时钟工作所需的代码部分。这个版本不需要任何JavaScript就能运行。

但是，我添加了一些JavaScript代码，使其从特定位置开始。这可以通过使用类Date获取当前日期，并使用每个时钟臂的animationDelay属性设置animation-delay CSS属性来实现。

以下是工作代码：

​

let setTime = function(date) {

  const delay = [
    date.getHours() * 3600 + date.getMinutes() * 60 + date.getSeconds(),
    date.getMinutes() * 60 + date.getSeconds(),
    date.getSeconds()
  ];

  [...document.querySelectorAll('.hand')].forEach((e, i) => e.style.animationDelay = `-${delay[i]}s`);

}

setTime(new Date())
body {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}


/* Main style for the clock */

.face {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 400px;
  height: 400px;
  background: #eee;
  border-radius: 50%;
  padding: 20px;
  border: 20px solid #d9d9d9;
}

.face:after {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  border-radius: 50%;
  z-index: 3;
}


/* Numbers: styling and positioning */

.numbers {
  position: relative;
}

.number {
  position: absolute;
  height: 200px;
  transform-origin: 0 100%;
  font-size: 28px;
}

.number:nth-child(1) {
  transform: rotate(25deg);
}

.number:nth-child(1) span {
  display: block;
  transform: rotate(-25deg);
}

.number:nth-child(2) {
  transform: rotate(55deg);
}

.number:nth-child(2) span {
  display: block;
  transform: rotate(-55deg);
}

.number:nth-child(3) {
  transform: rotate(85deg);
}

.number:nth-child(3) span {
  display: block;
  transform: rotate(-85deg);
}

.number:nth-child(4) {
  transform: rotate(115deg);
}

.number:nth-child(4) span {
  display: block;
  transform: rotate(-115deg);
}

.number:nth-child(5) {
  transform: rotate(145deg);
}

.number:nth-child(5) span {
  display: block;
  transform: rotate(-145deg);
}

.number:nth-child(6) {
  transform: rotate(178deg);
}

.number:nth-child(6) span {
  display: block;
  transform: rotate(-175deg);
}

.number:nth-child(7) {
  transform: rotate(205deg);
}

.number:nth-child(7) span {
  display: block;
  transform: rotate(-205deg);
}

.number:nth-child(8) {
  transform: rotate(235deg);
}

.number:nth-child(8) span {
  display: block;
  transform: rotate(-235deg);
}

.number:nth-child(9) {
  transform: rotate(265deg);
}

.number:nth-child(9) span {
  display: block;
  transform: rotate(-265deg);
}

.number:nth-child(10) {
  transform: rotate(295deg);
}

.number:nth-child(10) span {
  display: block;
  transform: rotate(-295deg);
}

.number:nth-child(11) {
  transform: rotate(325deg);
}

.number:nth-child(11) span {
  display: block;
  transform: rotate(-325deg);
}

.number:nth-child(12) {
  transform: rotate(355deg);
}

.number:nth-child(12) span {
  display: block;
  transform: rotate(-355deg);
}


/* Clock hands styling */

.hands {
  position: absolute;
  top: 50%;
  left: 50%;
}

.hand {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 120px;
  width: 10px;
  content: "";
  background: black;
  transform: translate(-50%, -100%);
  border-radius: 0 0 20px 20px;
  transform-origin: 50% 100%;
  z-index: 4;
  animation: count 3600s linear infinite;
}

.hand:before {
  display: block;
  position: absolute;
  top: -50px;
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-width: 10px 5px 41px;
  border-bottom-color: black;
  content: "";
}

.hand.hand-hour {
  height: 70px;
  transform: translate(-50%, -100%) rotate(30deg);
  animation: count 43200s linear infinite;
}

.hand.hand-second {
  height: 130px;
  width: 8px;
  transform: translate(-50%, -100%) rotate(60deg);
  z-index: 3;
  background: red;
  animation: count 60s linear infinite;
}

.hand.hand-second .body {
  display: block;
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  background: red;
  z-index: 4;
}

.hand.hand-second:before {
  border-width: 10px 4px 41px;
  border-bottom-color: red;
  z-index: -1;
}


/* animation of the clock hands */

@keyframes count {
  0%,
  100% {
    transform: translate(-50%, -100%);
  }
  25% {
    transform: translate(-50%, -100%) rotate(90deg);
  }
  50% {
    transform: translate(-50%, -100%) rotate(180deg);
  }
  75% {
    transform: translate(-50%, -100%) rotate(270deg);
  }
}
<div class="watch">
  <div class="face">
    <div class="numbers">
      <div class="number number-1"><span>1</span></div>
      <div class="number number-2"><span>2</span></div>
      <div class="number number-3"><span>3</span></div>
      <div class="number number-4"><span>4</span></div>
      <div class="number number-5"><span>5</span></div>
      <div class="number number-6"><span>6</span></div>
      <div class="number number-7"><span>7</span></div>
      <div class="number number-8"><span>8</span></div>
      <div class="number number-9"><span>9</span></div>
      <div class="number number-10"><span>10</span></div>
      <div class="number number-11"><span>11</span></div>
      <div class="number number-12"><span>12</span></div>
    </div>
    <div class="hands">
      <div class="hand hand-hour"></div>
      <div class="hand hand-minute"></div>
      <div class="hand hand-second">
        <div class="body"></div>
      </div>
    </div>
  </div>
</div>

​

只需在date中设置当前日期，JavaScript代码将循环通过时钟的手臂并延迟每个动画。CSS动画将允许时钟在页面加载后继续运行。

这种方法比使用JavaScript函数计算位置和移动时钟指针效率高得多。CSS动画在这里要强大得多。

编辑：

当你编写一段代码时，你应该总是从一张纸开始，并在开始输入之前定义你想要什么，你将如何实现它。在打字之前，你必须有一个计划，否则，它根本不会起作用。

所以，正如你告诉我的那样，你只想定位数字刻度(最初的问题并不是那么清楚...)。将所有的刻度作为黑色矩形放置在中心，设置它们的height和width会更容易一些。所以我们有：

​

​

然后使用transform属性将每个刻度旋转到正确的角度：0°、30°、60°、90°、...、300°、330°和360°。使用rotate(x deg)。

最后，这里是正确设置刻度大小的trick：使用渐变隐藏刻度更靠近中心的部分，这样我们只显示每个刻度的尖端：

background: linear-gradient(
   to top, 
   #eee 0%, 
   #eee 80%, 
   black 80%, 
   black 100%
);

​

​

最后，你应该拥有：

​

​

将这段代码与前面的代码结合起来，可以让时钟转起来：

​

let drawTicks = function() {

  for (let i = 1; i < 13; i++) {

    let el = document.createElement('div');
    el.setAttribute('class', `number number${i}`);
    el.style.transform = `rotate(${i*30}deg)`;

    document.querySelector('.numbers').appendChild(el);

  }

}; drawTicks()


let setTime = function(date) {

  const delay = [
    date.getHours() * 3600 + date.getMinutes() * 60 + date.getSeconds(),
    date.getMinutes() * 60 + date.getSeconds(),
    date.getSeconds()
  ];

  [...document.querySelectorAll('.hand')].forEach((e, i) => e.style.animationDelay = `-${delay[i]}s`);

}; setTime(new Date())
body {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}


/* Main style for the clock */

.face {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 400px;
  height: 400px;
  background: #eee;
  border-radius: 50%;
  padding: 20px;
  border: 20px solid #d9d9d9;
}

.face:after {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  border-radius: 50%;
  z-index: 3;
}


/* Numbers: styling and positioning */

.numbers {
  position: relative;
}

.number {
  width: 5px;
  background: linear-gradient( to top, #eee 0%, #eee 80%, black 80%, black 100%);
  position: absolute;
  height: 200px;
  transform-origin: 0 100%;
  font-size: 28px;
}

/* Clock hands styling */

.hands {
  position: absolute;
  top: 50%;
  left: 50%;
}

.hand {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 120px;
  width: 10px;
  content: "";
  background: black;
  transform: translate(-50%, -100%);
  border-radius: 0 0 20px 20px;
  transform-origin: 50% 100%;
  z-index: 4;
  animation: count 3600s linear infinite;
}

.hand:before {
  display: block;
  position: absolute;
  top: -50px;
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-width: 10px 5px 41px;
  border-bottom-color: black;
  content: "";
}

.hand.hand-hour {
  height: 70px;
  transform: translate(-50%, -100%) rotate(30deg);
  animation: count 43200s linear infinite;
}

.hand.hand-second {
  height: 130px;
  width: 8px;
  transform: translate(-50%, -100%) rotate(60deg);
  z-index: 3;
  background: red;
  animation: count 60s linear infinite;
}

.hand.hand-second:before {
  border-width: 10px 4px 41px;
  border-bottom-color: red;
  z-index: -1;
}


/* animation of the clock hands */

@keyframes count {
  0%,
  100% {
    transform: translate(-50%, -100%);
  }
  25% {
    transform: translate(-50%, -100%) rotate(90deg);
  }
  50% {
    transform: translate(-50%, -100%) rotate(180deg);
  }
  75% {
    transform: translate(-50%, -100%) rotate(270deg);
  }
}
<div class="watch">
  <div class="face">
    <div class="numbers"></div>
    <div class="hands">
      <div class="hand hand-hour"></div>
      <div class="hand hand-minute"></div>
      <div class="hand hand-second">
      </div>
    </div>
  </div>

</div>

​

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/50613485

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档