色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

javascript 電子表

李中冰1年前6瀏覽0評論

javascript電子表是一種在網頁中實現的時鐘效果,可以通過javascript實現各種形式的電子表。比如今天我們就來介紹兩種常見的電子表樣例,希望對你學習javascript有所啟示。

樣例一:數字形式電子表

// 獲取DOM節點
var clockNode = document.querySelector('#clock');
// 更新時間的函數
function updateClock() {
// 獲取當前時間
var now = new Date();
// 格式化時間數字
var hours = now.getHours().toString().padStart(2, '0'); 
var minutes = now.getMinutes().toString().padStart(2, '0');
var seconds = now.getSeconds().toString().padStart(2, '0');
// 數字形式的電子表
clockNode.textContent = `${hours}:${minutes}:${seconds}`;
}
// 每秒鐘更新一次時間
setInterval(updateClock, 1000);

上面的代碼實現了一個最基本的數字形式電子表。通過獲取當前時間,然后格式化成"小時:分鐘:秒鐘"的形式進行展示。這里使用了ES6模板字符串的語法,用``包裹字符串,可以在字符串中插入變量。padStart(2, '0')是ES2017新增的語法,用來補零,如果字符串長度不足2位,則在前面添加'0'。

樣例二:模擬鐘表形式電子表

// 獲取DOM節點
var clockNode = document.querySelector('#clock');
// 更新時間的函數
function updateClock() {
// 獲取當前時間
var now = new Date();
// 計算指針角度
var seconds = now.getSeconds(); // 獲取當前秒數
var secondsDegrees = ((seconds / 60) * 360) + 90;
var minutes = now.getMinutes();
var minutesDegrees = ((minutes / 60) * 360) + ((seconds / 60) * 6) + 90;
var hours = now.getHours();
var hoursDegrees = ((hours / 12) * 360) + ((minutes / 60) * 30) + 90;
// 設置指針樣式
clockNode.querySelector('.hour-hand').style.transform = `rotate(${hoursDegrees}deg)`;
clockNode.querySelector('.min-hand').style.transform = `rotate(${minutesDegrees}deg)`;
clockNode.querySelector('.second-hand').style.transform = `rotate(${secondsDegrees}deg)`;
}
// 每秒鐘更新一次時間
setInterval(updateClock, 1000);

上面的代碼實現了一個模擬鐘表的電子表。通過計算出當前時間的時針、分針和秒針的角度,然后通過CSS的transform屬性來設置指針的旋轉角度。這里需要注意一下計算角度的公式,不同指針的計算方式略有不同。

以上就是兩種常見的javascript電子表實現方式。其中第一個是比較簡單的數字形式,適合用于現代風格的頁面;第二個是模擬鐘表,適合用于復古或者時尚風格的頁面,希望通過這兩個樣例能夠對javascript時間處理有更深刻的理解。