好玩的时钟
| 经营范围：电脑组装，电脑维修，智能家居设备，苹果电脑系统安装，苹果手机刷机，监控安装，媒体编辑，数据恢复，复印打印，网站制作等 |
|
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Clock</title> <style> html, body { width: 100%; height: 100%; margin: 0; padding: 0; background: linear-gradient(to right bottom, #7d7d7d, #070707); }
li { list-style: none; height: 30px; width: 30px; margin: 0; padding: 0; font-size: 22ox; line-height: 30px; color: #bbbbbb; }
.container { width: 100%; position: fixed; top: 50%; left: 50%; z-index: 4; transform: translate(-50%, -50%); }
.clock { display: flex; flex-direction: row; justify-content: space-around; align-items: center; width: 500px; height: 30px; margin: 50% auto; background-color: #3b3b3b; box-shadow: 2px 2px 10px 3px #2f2f2f; transform: translateY(-50%); border-radius: 20px; }
.time-box { width: 30px; height: 100%; }
.numbers { background-color: #272727; box-shadow: 2px 2px 10px 3px #2f2f2f; text-align: center; border-radius: 10px; transition: all 0.5s; } </style> </head> <body> <!-- partial:index.partial.html --> <div class="container"> <div class="clock"> <div class="time-box"> <div class="numbers" id="hours-first"> <li>0</li> <li>1</li> <li>2</li> </div> </div> <div class="time-box"> <div class="numbers" id="hours-second"> <li>0</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </div> </div> <div class="time-box"> <div class="numbers" id="minutes-first"> <li>0</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </div> </div> <div class="time-box"> <div class="numbers" id="minutes-second"> <li>0</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </div> </div> <div class="time-box"> <div class="numbers" id="seconds-first"> <li>0</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </div> </div> <div class="time-box"> <div class="numbers" id="seconds-second"> <li>0</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </div> </div> </div> </div> <!-- partial --> <script> const h1 = document.getElementById('hours-first'); const h2 = document.getElementById('hours-second'); const m1 = document.getElementById('minutes-first'); const m2 = document.getElementById('minutes-second'); const s1 = document.getElementById('seconds-first'); const s2 = document.getElementById('seconds-second'); let hour1 = 0, hour2 = 0, minute1 = 0, minute2 = 0, second1 = 0;
function handleNumber(num) { if (num < 10) { return [0, num]; } else { return [Math.floor(num / 10), num % 10]; } }
function changeTime() { let time = new Date(); const [h_1, h_2] = handleNumber(time.getHours()); const [m_1, m_2] = handleNumber(time.getMinutes()); const [s_1, s_2] = handleNumber(time.getSeconds()); if (h_1 !== hour1) { hour1 = h_1; h1.style.transform = `translateY(-${hour1 * 30}px)`; } if (h_2 !== hour2) { hour2 = h_2; h2.style.transform = `translateY(-${hour2 * 30}px)`; } if (m_1 !== minute1) { minute1 = m_1; m1.style.transform = `translateY(-${minute1 * 30}px)`; } if (m_2 !== minute2) { minute2 = m_2; m2.style.transform = `translateY(-${minute2 * 30}px)`; } if (s_1 !== second1) { second1 = s_1; s1.style.transform = `translateY(-${second1 * 30}px)`; } s2.style.transform = `translateY(-${s_2 * 30}px)`; } setInterval(changeTime); </script> </body> </html> |
