DIVのみを使用してJavaScriptで時計を作成する

debugcn 投稿 Dev

CodingTil

divsのみを使用してJavaScriptで時計を作成する必要があります（document.createElement()）。どういうわけか、私はdivsの位置を正しく理解することはできません。現在、私はすでに最初の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>

イワン

ここで作られたクロック例であるエリック・ブリュワーにCodePen。

時計を機能させるために必要なコード部分のみを保持して、SCSSとPugをコンパイルしました。このバージョンでは、JavaScriptを実行する必要はありません。

ただし、特定の位置から開始するようにJavaScriptコードを追加しました。これは、クラスDateを使用して現在の日付を取得し、animation-delayCSSプロパティをanimationDelay各クロックアームのプロパティで設定することで実現できます。

作業コードは次のとおりです。

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)ます。

最後に、目盛りのサイズを正しく設定するための秘訣は次のとおりです。グラデーションを使用して、目盛りの中心に近い部分を非表示にし、各目盛りの先端のみを表示します。

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>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集2021-06-3

コメントを追加

サインイン

分類Dev

Related 関連記事

記事

DIVのみを使用してJavaScriptで時計を作成する

DIVのみを使用してJavaScriptで時計を作成する

編集：

createElement関数を使用してJavaScriptでページの読み込み時にdiv要素を作成するにはどうすればよいですか？

時間のみを考慮して時差を計算する

javascriptのみを使用してページを下にスクロールするdivを作成する方法

javascriptのみを使用してiframeを作成する

Javascriptのwindow.performance.timingを使用してページの読み込み時間を計算します

reactBrowserRouterを使用して「/」でのみページを作成する方法

datetimeを使用してifelse構文を作成する方法（時間のみ）

参照のみを使用して合計を計算する

時系列と集計値を使用して積み上げ棒グラフを作成する方法

javascriptを使用してHTML選択の埋め込みDIVにDIVを表示する

javascript / jqueryを使用してイベントの時間を計る

Javascript-ミリ秒を使用して時間を計算する

Javascriptを使用してボタンをクリックすると、生成されたリストに複数の時計を作成します

ページの読み込み時に表示ブロックとしてdivを作成する

WeakMapsを使用してJavascriptで通常の弱参照を作成する

Javascriptでapply（）を使用して独自のbind（）関数を作成する

javascriptを使用してページの読み込み時にdivにズームインします

Javascriptを使用して製品の合計を計算する

javascriptを使用して新しいdivを作成する

javascriptのdocument.createElementのみを使用してこのWebアーキテクチャ（div内のdiv）を作成する方法

bashを使用して秒単位で時間を計算する

xarrayで「年+月」の組み合わせを使用して平均を計算する

Javascript / Jqueryを使用してセルの行（DIV）を作成します

Golangでmgoを使用して次のMongo集計クエリを作成する方法

JavaScript のみを使用してラジアル メニューを作成する

OnkeyupのみのJavascriptを使用して特定の列セル値を取得し、その値を合計する方法

lubridate を使用して R の時間差を計算する方法

CSSのみを使用してホバーで隣接するdivを表示する

AndroidでDateFormat.getDateTimeInstance（）を使用して現在の時刻のみを表示する方法

JavaScript のみを使用してラジアルメニューを作成する