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
1,875 則留言
BradleyDit
dicloreum compresse 150 mg prezzo plenvu prezzo ГЁ mutuabile? farmacia galenica vendita online
BradleyDit
comprar rhodogil sin receta Confia Pharma puedo comprar metformina sin receta medica en usa
MichaelNeolo
farmacia internacional online viagra: mascarillas fpp2 farmacia online – curso online farmacia y parafarmacia
DannyWag
https://pharmacieexpress.shop/# ordonnance infection urinaire en ligne
BradleyDit
millor farmacia online comprar truvada sin receta bijuva farmacia online