Artikel asas: Cara membuat jam analog hitam yang sejuk menggunakan html, css dan js (dengan kod)

Dalam artikel sebelumnya "Ajar anda cara menggunakan HTML/CSS dan permainan naga bernafas api Three.js (perkongsian kod) ", saya memperkenalkan anda cara menggunakan HTML/CSS dan Three.js Buat permainan naga bernafas api dengan Three.js. Artikel berikut akan memperkenalkan kepada anda cara menggunakan JS untuk membuat jam analog tema hitam yang sejuk Mari kita lihat cara melakukannya bersama-sama.

Jam analog ringkas menggunakan HTML, CSS dan JavaScript

Semoga anda menyukai reka bentuk itu. Saya telah berkongsi tutorial penuh tentang cara saya membuat reka bentuk ini di bawah. Semoga tutorial di bawah dapat membantu anda.

Untuk melakukan ini, pertama sekali, anda perlu mencipta fail HTML dan CSS.

Langkah 1: Buat struktur asas jam

Kod HTML ini pada asasnya ialah struktur asas jam analog ini. Saya menggunakan beberapa kod CSS untuk mereka bentuk latar belakang dan bentuk jam tangan ini. Seperti yang anda lihat dalam imej di atas, ia mengambil bentuk reka bentuk neomorfik. Di sini, saya menggunakan kod CSS untuk melaksanakan reka bentuk Neumorphism.

Seperti yang anda lihat dalam tunjuk cara di atas, saya menggunakan sempadan di sekeliling jam tangan ini untuk membuat sempadan kod: 7px solid #282828. Saya menggunakan box-shadow untuk menjadikannya lebih jelas. border-radius 50%Buatkan jam tangan ini. Saya juga menggunakan ketinggian dan lebar 30 rem. Jika anda ingin menjadikan jam tangan ini lebih besar, anda boleh meningkatkan saiznya.

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;
 
}

Kesan demo

Langkah 2: Tandai 1 hingga 12 pada jam

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%;
}

Kesan demo

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)
}

Kesan demo

Saya membuat bulatan menggunakan kod HTML dan CSS di bawah. Akibatnya, bahagian tengah garisan panjang dilindungi, dan ia mempunyai saiz markah penuh 1 hingga 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;
}

Kesan demo

Langkah 3: Buat tiga tangan untuk menunjukkan masa

Dalam sel ini, saya menggunakan tiga tangan, yang dibuat menggunakan kod HTML dan CSS di bawah.

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;
}

Kesan demo

Langkah 4: Gunakan kod JavaScript untuk mengaktifkan jam

Di atas kami mereka bentuk keseluruhan jam tangan, tetapi jam tangan ini belum berfungsi lagi. Ini bermakna tangan jam tangan ini tidak mempunyai fungsi dan tidak memaparkan masa yang tepat. Untuk ini kita perlu menggunakan kod JavaScript.

Menggunakan JavaScript di bawah, saya telah memberikan arahan tentang cara memutar tangan ini. Jika anda tahu JavaScript asas, anda pasti akan memahaminya.

Saya telah menerangkan sepenuhnya di bawah cara kod JavaScript ini berfungsi.

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)`;
}

Penjelasan terperinci tentang kod JavaScript

Mengenai tangan kedua

JavaScript

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

Saya telah menyimpan bagaimana jarum kedua berputar dalam secondsDegrees dan kemudian saya menggunakan rotate (${secondsDegrees} deg)  untuk memutar jarum kedua 1 minit bersamaan 60 saat jadi saya bahagi dengan 60 untuk satu pusingan bulatan ialah 360 darjah, jadi saya darab dengan 360

Kira-kira jarum minit

JavaScript

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

Saya simpan dalam minsDegrees Cara memusing jarum minit kemudian saya gunakan (${minsDegrees]deg) untuk memusing jarum minit 1 jam bersamaan 60 minit jadi saya bahagikan dengan 60 untuk menambah kedudukan tangan kedua dengan minit. Kerana jarum minit berada dalam kedudukan yang betul bergantung pada saat.

JavaScript

setInterval(setDate, 1000);

setDate();

Pembelajaran yang disyorkan: Tutorial video HTML/CSS, Tutorial video JS

Atas ialah kandungan terperinci Artikel asas: Cara membuat jam analog hitam yang sejuk menggunakan html, css dan js (dengan kod). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!