根據css3動畫寫了一個進度條，但是定時器執行的百分比是10秒，而進度條動畫css3卻不能設置十秒，執行不同步？求助~~~
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>進度條</title>
? ? <style type="text/css">
#loading{animation:move 10s;background-color:#6caf00;text-align:center}
#allload{width:180px;height:20px;border:1px solid}
@keyframes move?
{0%{width:0%;}100%{width:100%;}}
? ? </style>
?
</head>
<body>
<p>JavaScript百分比進度條</p>
<div id=allload>
<div id=loading></div>
</div>
<input type="button" value="點擊" onclick="setInterval(timer,100)";/>
</body>
<script type="text/javascript">
var pg=document.getElementById("pg"); ? ??
function myload(){
if(pg.value!=100){
pg.value=pg.value+1;}}
var loading=document.getElementById("loading");
var count=0;
function timer(){
if(count<100){
count=count+1;}
loading.innerHTML=count+"%";}
</script>
</html>
2019-01-04
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>進度條</title>
? ? <style type="text/css">
#load,#loading{background-color:#6caf00;text-align:center;}
#load{width:0%;}
#loading{animation:move 10s linear;}
#allload{width:180px;height:20px;border:1px solid}
@keyframes move?
{0%{width:0%;}100%{width:100%;}}
? ? </style>
</head>
<body>
<p>JavaScript百分比進度條</p>
<div id="allload">
<div id="load"></div>
</div>
<input type="button" value="點擊" onclick="start()";/>
</body>
<script type="text/javascript">
? ? var pg = document.getElementById("pg");
? ? function myload() {
? ? ? ? if (pg.value != 100) {
? ? ? ? ? ? pg.value = pg.value + 1;
? ? ? ? }?
? ? }
? ? function start() {
? ? ? ? var loading = document.getElementById("load");
? ? ? ? loading.id = "loading";
? ? ? ? var count = 0;
? ? ? ? var timer = setInterval(function () {
? ? ? ? ? ? if (count < 100) {
? ? ? ? ? ? ? ? count = count + 1;
? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? clearInterval(timer);
? ? ? ? ? ? }
? ? ? ? ? ? loading.innerHTML = count + "%";
? ? ? ? }, 100);
? ? }
</script>
</html>
加粗斜體的都是改的內容，沒找到顏色標識所以就這樣了
2019-06-17
可以學習