初級記事：html、css、jsを使ったかっこいい黒のアナログ時計の作り方（コード付き）

前回の記事「HTML/CSSとThree.jsの火を吹くドラゴンゲームの使い方を教えます(コード共有)」では、HTML/CSSの使い方を紹介しました。と Three.js Three.js を使用して、火を吐くドラゴンのミニゲームを作成します。次の記事では、JS を使用してクールな黒をテーマにしたアナログ時計を作成する方法を紹介しますので、一緒に見てみましょう。

HTML、CSS、JavaScript を使用したシンプルなアナログ時計

このデザインが気に入っていただければ幸いです。このデザインをどのように作成したかに関する完全なチュートリアルを以下に共有しました。以下のチュートリアルがお役に立てば幸いです。

これを行うには、まず HTML および CSS ファイルを作成する必要があります。

ステップ 1: 時計の基本構造を作成する

この HTML コードは、基本的にアナログ時計の基本構造です。 CSS コードを使用して、この時計の背景と形状をデザインしました。上の画像でわかるように、ネオモーフィックなデザインの形をしています。ここでは、CSS コードを使用して Neumorphism デザインを実装しました。

上記のデモでわかるように、このウォッチの周囲に境界線を使用してコード境界線を作成しました: 7px 実線 #282828。わかりやすくするために box-shadow を使用します。 border-radius 50% この時計は丸いです。高さと幅も 30 レムを使用しました。この時計を大きくしたい場合は、サイズを大きくすることができます。

HTML

<div class="clock">
       
</div>

CSS

 html {
  background: #282828;
  text-align: center;
  font-size: 10px;
}

body {
  margin: 0;
  font-size: 2rem;
  display: flex;
  flex: 1;
  min-height: 100vh;
  align-items: center;
}

.clock {
  width: 30rem;
  height: 30rem;
  border: 7px solid #282828;
  box-shadow: -4px -4px 10px rgba(67,67,67,0.5),
                inset 4px 4px 10px rgba(0,0,0,0.5),
                inset -4px -4px 10px rgba(67,67,67,0.5),
                4px 4px 10px rgba(0,0,0,0.3);
  border-radius: 50%;
  margin: 50px auto;
  position: relative;
  padding: 2rem;
 
}

デモ効果

ステップ 2: 時計の 1 から 12 にマークを付けます

HTML

<div class="outer-clock-face">
	<div class="marking marking-one"></div>
	<div class="marking marking-two"></div>
	<div class="marking marking-three"></div>
	<div class="marking marking-four"></div>          
</div>

CSS

.outer-clock-face {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  background: #282828;
  
 
  overflow: hidden;
}

.outer-clock-face::after {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  transform: rotate(90deg)
}

.outer-clock-face::before,
.outer-clock-face::after,
.outer-clock-face .marking{
  content: '';
  position: absolute;
  width: 5px;
  height: 100%;
  background: #1df52f;
  z-index: 0;
  left: 49%;
}

デモ効果

CSS

.outer-clock-face .marking {
  background: #bdbdcb;
  width: 3px;
}

.outer-clock-face .marking.marking-one {
  transform: rotate(30deg)
}

.outer-clock-face .marking.marking-two {
  transform: rotate(60deg)
}

.outer-clock-face .marking.marking-three {
  transform: rotate(120deg)
}

.outer-clock-face .marking.marking-four {
  transform: rotate(150deg)
}

デモ効果

次のものを使用しますHTML と CSS コードは円を作成します。その結果、長いラインの中央がカバーされ、1 から 12 までのマーク サイズが完全にカバーされます。

HTML：

<div class="inner-clock-face">
         
 </div>

CSS

.inner-clock-face {
  position: absolute;
  top: 10%;
  left: 10%;
  width: 80%;
  height: 80%;
  background: #282828;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  z-index: 1;
}

.inner-clock-face::before {
  content: '';
  position: absolute;
  top: 50%;
  border-radius: 18px;
  margin-left: -9px;
  margin-top: -6px;
  left: 50%;
  width: 16px;
  height: 16px;
  background: #4d4b63;
  z-index: 11;
}

デモ効果

ステップ3: 時間を示す 3 つの針を作成します。

このセルでは、以下の HTML と CSS コードを使用して作成した 3 つの針を使用しました。

HTML

<div class="hand hour-hand"></div>
<div class="hand min-hand"></div>
<div class="hand second-hand"></div>

CSS

.hand {
  width: 50%;
  right: 50%;
  height: 6px;
  background: #61afff;
  position: absolute;
  top: 50%;
  border-radius: 6px;
  transform-origin: 100%;
  transform: rotate(90deg);
  transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
}

.hand.hour-hand {
  width: 30%;
  z-index: 3;
}

.hand.min-hand {
  height: 3px;
  z-index: 10;
  width: 40%;
}

.hand.second-hand {
  background: #ee791a;
  width: 45%;
  height: 2px;
}

デモ効果

ステップ 4: JavaScript コードを使用して時計をアクティブにする

上記の時計全体を設計しましたが、この時計はまだ機能していません。これは、この時計の針が機能せず、正確な時間を表示しないことを意味します。このためには、JavaScript コードを使用する必要があります。

以下の JavaScript を使用して、これらの手を回転させる方法を説明しました。基本的な JavaScript を知っていれば、必ず理解できるでしょう。

この JavaScript コードがどのように機能するかについては、以下で詳しく説明しました。

JavaScript

const secondHand = document.querySelector('.second-hand');
const minsHand = document.querySelector('.min-hand');
const hourHand = document.querySelector('.hour-hand');

JavaScript

function setDate() {
  const now = new Date();

  const seconds = now.getSeconds();   // second hand rotation
  const secondsDegrees = ((seconds / 60) * 360) + 90;   
  secondHand.style.transform = `rotate(${secondsDegrees}deg)`;

  const mins = now.getMinutes();    // minutes hand rotation
  const minsDegrees = ((mins / 60) * 360) + ((seconds/60)*6) + 90;  
  minsHand.style.transform = `rotate(${minsDegrees}deg)`;

  const hour = now.getHours();     // Hours hand rotation
  const hourDegrees = ((hour / 12) * 360) + ((mins/60)*30) + 90;   
  hourHand.style.transform = `rotate(${hourDegrees}deg)`;
}

JavaScriptコードの詳しい説明

秒針について

JavaScript

const seconds = now.getSeconds();   // second hand rotation
const secondsDegrees = ((seconds / 60) * 360) + 90;   
secondHand.style.transform = `rotate(${secondsDegrees}deg)`;

秒針の回転方法を

秒度 で保存し、rotate (${秒度} 度) を使用して秒針を回転させます。秒針の 1 分は 60 秒に等しいので、60 で割ります。円の 1 周は 360 度なので、360 を掛けます

#分針について

#JavaScript

const mins = now.getMinutes();    // minutes hand rotation
const minsDegrees = ((mins / 60) * 360) + ((seconds/60)*6) + 90;  
minsHand.style.transform = `rotate(${minsDegrees}deg)`;

i

minsDegrees

には分針の回し方が保存されており、(

${minsDegrees]deg) を使用して分針を回すのは 1 時間に相当します60分なので60で割って秒針の位置を加えました。秒に応じて分針が正しい位置にあるからです。 JavaScript

setInterval(setDate, 1000);

setDate();

推奨学習: HTML/CSS ビデオ チュートリアル

、

JS ビデオ チュートリアル

以上が初級記事：html、css、jsを使ったかっこいい黒のアナログ時計の作り方（コード付き）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。