大概效果是這樣的
html代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>實時時鐘</title>
</head>
<style>
*{
padding: 0px; /* 內邊距 */
margin: 0px; /*外邊距 */
box-sizing: border-box; /* 盒子模型 ,作用自動計算 */
}
body{
font-family: monospace; /* 字體 */
font-size: 2rem; /* rem是css3的新單位，叫相對單位，rem更加適配iphone和ipad， 默認1rem=16px，但是可以修改默認值 2rem=32px 就相當于字體放大幾倍*/
min-height: 100vh; /* 視窗高度 1vh等于視窗高度的百分之一1% ，視口/視窗高度就是所看到的頁面高度 */
display: grid; /* 改變成柵格（網格） */
overflow-y: hidden; /* Y軸溢位隱藏 */
place-content:center; /* 水平垂直居中 */
background: linear-gradient(-45deg,#c4d2ef,#dfe6f6); /* 線性漸變(角度、顏色、顏色) */
}
.hr,
.min,
.sec{
display: grid; /* 改成柵格 */
grid-template-columns: 1fr 1fr; /* 網格分列 */
grid-gap: 2rem;
grid-row: 1/2; /* 分成兩列 */
align-items: start;
}
.number{
padding: 0.5rem;
width: 4rem;
height: 4rem;
display: grid;
place-items: center;
/*color: #9ffbdf; */
transition: 500ms 100ms ease;
border-radius: 50%; /* 圓角， 50%是圓形 */
}
.number.pop{
color: #3e6ccd;
font-weight: bold;
transform: scale(1.3);
background-color: #dfe6f6;
box-shadow: -10px -10px 20px -5px #f9fbfd, 10px 10px 20px #a9bee8;
}
.strip{
transition: transform 500ms ease-in-out; /* 影片效果 */
border-radius: 8px; /* 圓角 */
background: #dfe6f6;
box-shadow: -10px -10px 20px -5px #f9fbfd, 10px 10px 20px #a9bee8; /* 陰影 */
}
.clock{
display: grid;
grid-template-columns: repeat(3,1fr);
grid-gap:3rem;
height: 4rem;
position: relative; /* 相對定位 */
padding: 0 4rem; /* 內邊距 */
}
</style>
<body>
<div class="clock">
<!-- 小時 最大24 一天24小時 strip是外層的大框-->
<div class="hr">
<!-- 時，第一位值： 012 -->
<div class="strip">
<div class="number">0</div>
<div class="number">1</div>
<div class="number">2</div>
</div>
<!-- 時，第二位數字 -->
<div class="strip">
<div class="number">0</div>
<div class="number">1</div>
<div class="number">2</div>
<div class="number">3</div>
<div class="number">4</div>
<div class="number">5</div>
<div class="number">6</div>
<div class="number">7</div>
<div class="number">8</div>
<div class="number">9</div>
</div>
</div>
<!--分 最大59-->
<div class="min">
<!-- 分 第一位數字 -->
<div class="strip">
<div class="number">0</div>
<div class="number">1</div>
<div class="number">2</div>
<div class="number">3</div>
<div class="number">4</div>
<div class="number">5</div>
</div>
<!-- 分 第二位數字 -->
<div class="strip">
<div class="number">0</div>
<div class="number">1</div>
<div class="number">2</div>
<div class="number">3</div>
<div class="number">4</div>
<div class="number">5</div>
<div class="number">6</div>
<div class="number">7</div>
<div class="number">8</div>
<div class="number">9</div>
</div>
</div>
<!--秒 最大59-->
<div class="sec">
<!-- 秒 第一位數字 -->
<div class="strip">
<div class="number">0</div>
<div class="number">1</div>
<div class="number">2</div>
<div class="number">3</div>
<div class="number">4</div>
<div class="number">5</div>
</div>
<!-- 秒 第一位數字 -->
<div class="strip">
<div class="number">0</div>
<div class="number">1</div>
<div class="number">2</div>
<div class="number">3</div>
<div class="number">4</div>
<div class="number">5</div>
<div class="number">6</div>
<div class="number">7</div>
<div class="number">8</div>
<div class="number">9</div>
</div>
</div>
</div>
<script>
// 找到當前所有的strip的列
const strips = [...document.querySelectorAll(".strip")];
const numberSize = "4";
//找到當前資料并添加pop樣式類
//querySelector是選擇，classList.add(類名)是添加CSS央視
//setTimeout定時器,通過定時器去修改我們的陣列，監聽時間950毫秒
function highlight(strip, d) {
strips[strip]
.querySelector(`.number:nth-of-type(${d + 1})`)
.classList.add("pop");
setTimeout(() => {
strips[strip]
.querySelector(`.number:nth-of-type(${d + 1})`)
.classList.remove("pop");
}, 950);
}
//定義一個方法進行截取，并添加一個影片效果
//transform:translateY是添加影片效果
function stripSlider(strip, number) {
let d1 = Math.floor(number / 10);
let d2 = number % 10;
strips[strip].style.transform = `translateY(${d1 * -numberSize}rem)`;
highlight(strip, d1);
strips[strip + 1].style.transform = `translateY(${d2 * -numberSize}rem)`;
highlight(strip + 1, d2);
}
//獲取當前系統時間,并且傳遞給stripSlider方法
setInterval(() => {
const time = new Date();
const hours = time.getHours();
const mins = time.getMinutes();
const secs = time.getSeconds();
stripSlider(0, hours);
stripSlider(2, mins);
stripSlider(4, secs);
}, 1000);
</script>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/186198.html
標籤：其他