使用場景
在界面載入的時候，需要根據獲取到的數據，實現數字自動變化到數據的數值或動畫變化為數據相關的效果（比如數字從0變化到100，電池電量從固定位置變化到一定的位置時的動畫）的時候。
主要使用到的方法和屬性
JS:setInterval(定時器)、clearInterval（在數據或動畫到達指定位置時停止）、innerText(配合定時器輸入文本)
CSS:transition(使用過渡效果實現動畫，比較簡單)、animate(使用動畫效果實現動畫，可以用，但沒必要，對於復雜的動畫時比較實用)
實現思路
1.數字自動增長
我目前想到的唯一方法就是在setInterva方法中使用innerText輸入數值，然后當數值和數據一致的時候停止setInterval，以達到數值變化到指定數據的效果。
實現代碼
var yuanshu = 0 //數據變化前的初始數值 const re = 50 //獲取到的數據 var numAdd = setInterval(numAdd,10) function numAdd(){ yuanshu = yuanshu + 1 //數據變化的間隔 document.getElementById("num").innerText = yuanshu if(yuanshu == re){ //檢驗數值是否到達數據的數值 window.numStop()
}
} function numStop(){ //停止計時器 window.clearInterval(numAdd) }
2.動畫根據數值自動變化
這個其實除了使用css的過渡和動畫，我最初想到使用JS的定時器不斷修改元素的樣式來實現動畫的效果，但經過實踐，效果實在比不上css，或許經過調整還是可以實現看起來比較流暢的效果，但屬實有點脫褲子放屁的意思了。因此這里就不做介紹了（其實就是把上面的innerText修改成修改樣式）。
這里就主要以電池電量增加作為例子好了。（效果大概就像下面這張圖）
電池電量變化的動畫其實算比較單一的，只需要改變綠色容器的寬度（豎直擺放的話也可以時高度），只需要通過JS訪問綠色容器相關的元素並改變寬度（高度）為指定的百分比就可以（注意，這里綠色容器的父容器請務必設置固定的寬度，我怕容易出事兒）。
實現代碼（包含了數字增長的代碼）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.content{
width: 200px;
height: 50px;
background-color: gray;
}
#num{
width: 0px;
height: inherit;
background-color: aquamarine;
color: white;
transition: width 2s;
}
</style>
</head>
<body>
<div id = "content" class="content">
<div id="num">
</div>
</div>
<script type="text/javascript">
var w = parseInt(window.getComputedStyle(content,null).width)
var yuanshu = 0
const re = 150//獲取到的數據
window.onload = function(){ //將計算后的過渡時間和寬度計算完賦給綠色容器
document.getElementById("num").style.transition = "width " +re/w+"s"
document.getElementById("num").style.width = re/w*100 + "%"
}
var numAdd = setInterval(numAdd,re/w)//下面是數字增長的代碼，可以不用看了
function numAdd(){
yuanshu = yuanshu + 1
document.getElementById("num").innerText = yuanshu
if(yuanshu == re){
window.numStop()
}
}
function numStop(){
window.clearInterval(numAdd)
}
</script>
</body>
</html>
第一次寫這種東西，有看不懂的話。。。。只能說小生不才請見諒。如果可以的話請在評論區留下您的建議和問題。