JavaScript： 實現數字跳動效果
最近不知為何沉迷網頁設計的東西，可能是自從開始WoedPress的關係，所以看到一些簡單網頁效果的教學就會想自己實做看看www
這次是在測試wordpress的主題跟外掛時，發現到可以讓呈現一個數字跳動動畫，來呈現網站的一些統計數字，像是註冊會員、瀏覽數等等，這樣的互動效果，在視覺上應該也能吸引user注意。
除了JS完成數字跳動效果之外，我還有練習純CSS完成這項功能，只是不知為何換台電腦或是瀏覽器就會有一些問題，而且實作之後我覺得還是JS效果比較好，就直接記下JS的程式碼，如果有研究出CSS的問題可以正常顯示應該也會放上來XD
JS程式
這邊程式是藥方在下面的HTML裡，只是我拆開來看XD
畢竟JS程式才是關鍵
function animate(obj, initVal, lastVal, duration) {
let startTime = null;
// 取得現在時間戳 (currentTime)
let currentTime = Date.now();
// 傳送現在時間至step function
const step = (currentTime) => {
// 指派開始時間
if (!startTime) {
startTime = currentTime ;
}
// 計算顯示數值
const progress = Math.min((currentTime - startTime) / duration, 1);
// 用progress計算顯示內容
obj.innerHTML = Math.floor(progress * (lastVal - initVal) + initVal);
// 檢查是否是最後的數值
if (progress < 1) {
window.requestAnimationFrame(step);
}
else{
window.cancelAnimationFrame(window.requestAnimationFrame(step));
}
};
// 開始顯示動畫
window.requestAnimationFrame(step);
}
// 取得要進行數字動畫的網頁元素 (利用ID搜尋)
let text1 = document.getElementById('0101');
let text2 = document.getElementById('0102');
let text3 = document.getElementById('0103');
// 設定 起始值 結束值 持續時間
const load = () => {
animate(text1, 0, 9487, 2500);
animate(text2, 0, 487, 1500);
animate(text3, 0, 87, 500);
}HTML程式
HTML程式沒啥好講= =，特別的大概是用BootStrap去定義網格，這樣就很輕鬆完成響應式網站，說實話BootStrap應該是最容易做出響應式網站，有可以保有許多設計彈性的框架，而且範例也多，要學習程式也是好選擇。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation counter</title>
<link href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<style>
.container-fluid{
background-color: #555;
}
.fs-2, h2{
text-align: center;
color: #ddd;
}
</style>
</head>
<body onload="load()">
<div class="d-flex justify-content-center fs-1 fw-bold ">Animation Counter</div>
<div class="container-fluid">
<div class="row">
<div class="col-md">
<h2>Site visits</h2>
<div id='0101' class="fs-2"></div>
</div>
<div class="col-md">
<h2>Members</h2>
<div id='0102' class="fs-2"></div>
</div>
<div class="col-md">
<h2>Rate</h2>
<div class="fs-2"><span id='0103'></span>%</div>
</div>
</div>
</div>
<style>
// 放入JS程式碼
</style>
</body>
</html>Refer
Creating an Animated Counter in JavaScript | Engineering Education (EngEd) Program | Section