根据css3动画写了一个进度条，但是定时器执行的百分比是10秒，而进度条动画css3却不能设置十秒，执行不同步？求助~~~
新手村上路
2018-12-26 15:39
<!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>
2回答
-
- 桐谷和人丶
- 2019-01-04 12:03:15
<!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>
加粗斜体的都是改的内容，没找到颜色标识所以就这样了
-
- qq_慕娘4384518
- 2019-06-17 21:27:27
可以学习
十天精通CSS3
242553 学习 · 2623 问题
相似问题