資料結構
網路
關係型資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學使用 JavaScript 設計新摩爾主義風格的數字時鐘
在本教程中，我們將討論如何使用 JavaScript 設計新摩爾主義風格的數字時鐘。新摩爾主義是一種近年來越來越流行的新設計趨勢。其特點是柔和的圓形和微妙的陰影。
HTML 程式碼
我們將從為時鐘建立一個基本的 HTML 結構開始。我們需要一個容器元素，其中包含時鐘錶盤元素和控制按鈕元素。
以下是我們時鐘的 HTML 程式碼：
<div class="clock"> <div class="clock-face"> <div class="clock-display"> <div class="clock-controls"> <button class="clock-button">Start</button> <button class="clock-button">Stop</button> </div> </div> </div> </div>
CSS 程式碼
現在讓我們使用 CSS 來為時鐘設定樣式。我們將為時鐘設定寬度和高度，然後設定時鐘錶盤和控制按鈕的樣式。
對於時鐘錶盤，我們將寬度和高度設定為 100%，並賦予其淺灰色背景顏色。然後我們將新增邊框和一些盒陰影來建立新摩爾主義效果。
clock-face {
width: 100%;
height: 100%;
background-color: #e0e0e0;
border: 1px solid #bdbdbd;
box-shadow: 0px 3px 6px rgba(0,0,0,0.16),
0px 3px 6px rgba(0,0,0,0.23);
}
對於時鐘顯示，我們將寬度設定為 50% 並將其居中於時鐘錶盤內。然後我們將賦予其深灰色背景顏色並新增一些內填充。
.clock-display {
width: 50%;
margin: 0 auto;
background-color: #424242;
padding: 10px;
}
最後，對於控制按鈕，我們將寬度設定為 25% 並將其居中於時鐘錶盤內。我們將賦予其淺灰色背景顏色並新增一些內填充。
.clock-controls {
width: 25%;
margin: 0 auto;
background-color: #e0e0e0;
padding: 10px;
}
JavaScript 程式碼
現在讓我們為時鐘新增 JavaScript 程式碼。我們將從建立一個函式開始，該函式將獲取當前時間並將其顯示在時鐘錶盤上。
function getTime() {
var date = new Date();
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
if (hours < 10) {
hours = "0" + hours;
}
if (minutes < 10) {
minutes = "0" + minutes;
}
if (seconds < 10) {
seconds = "0" + seconds;
}
var time = hours + ":" + minutes + ":" + seconds;
document.getElementById("clock-display").innerHTML = time;
}
接下來，我們將建立一個函式，在單擊“開始”按鈕時啟動時鐘。
function startClock() {
setInterval(getTime, 1000);
}
最後，我們將向“開始”按鈕新增一個事件監聽器，當單擊按鈕時呼叫 startClock() 函式。
document.getElementById("start-button").addEventListener("click", startClock);
示例
現在我們擁有了所有部分，讓我們將它們組合在一起。以下是新摩爾主義風格數字時鐘的完整工作程式碼。
<!DOCTYPE html>
<html>
<head>
<title>Neumorphic Clock</title>
<style>
.clock {
width: 500px;
height: 400px;
}
.clock-face {
width: 100%;
height: 100%;
background-color: #e0e0e0;
border: 1px solid #bdbdbd;
box-shadow: 0px 3px 6px rgba(0,0,0,0.16),
0px 3px 6px rgba(0,0,0,0.23);
}
.clock-display {
width: 50%;
height: 10%;
margin: 0 auto;
background-color: #f0f0f0;
font-size: xx-large;
padding: 20px;
box-shadow: 0px 3px 6px rgba(0,0,0,0.16),
0px 3px 6px rgba(0,0,0,0.23);
}
.clock-controls {
width: 10%;
margin: 0 auto;
background-color: #e0e0e0;
padding: 10px;
}
</style>
</head>
<body>
<div class="clock">
<div class="clock-face">
<div class="clock-display">
<div id="clock-display"></div>
</div>
<div class="clock-controls">
<button id="start-button" class="clock-button">Start</button>
</div>
</div>
</div>
<script>
function getTime() {
var date = new Date();
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
if (hours < 10) {
hours = "0" + hours;
}
if (minutes < 10) {
minutes = "0" + minutes;
}
if (seconds < 10) {
seconds = "0" + seconds;
}
var time = hours + ":" + minutes + ":" + seconds;
document.getElementById("clock-display").innerHTML = "<center>" + time + "</center>";
}
function startClock() {
setInterval(getTime, 1000);
}
document.getElementById("start-button").addEventListener("click", startClock);
</script>
</body>
</html>
結論
在本文中，我們討論瞭如何使用 JavaScript 設計新摩爾主義風格的數字時鐘。我們首先為時鐘建立了一個基本的 HTML 結構。然後我們使用 CSS 為時鐘設定樣式，使用陰影和圓角新增新摩爾主義效果。最後，我們添加了 JavaScript 程式碼來獲取當前時間並將其顯示在時鐘錶盤上。
更新於：2022年12月8日
瀏覽量 323
廣告