<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/1.css"/>
<script language="JavaScript" src="js/2.js"></script>
</head>
<body>
<!--外层容器-->
<div id="wrapper">
<!--进度条容器-->
<div id="progressbar">
<!--用来模仿进度条推进效果的进度条元素-->
<div id="fill"></div>
</div>
</div>
</body>
</html>
JS：var progressbar={
init:function(){
var fill=document.getElementById('fill');
var count=0;
//通过间隔定时器实现百分比文字效果,通过计算CSS动画持续时间进行间隔设置
var timer=setInterval(function(e){
count++;
fill.innerHTML=count+'%';
if(count===100) clearInterval(timer);
},17);
}
};
progressbar.init();
CSS:
#wrapper{
position: relative;
width:200px;
height:100px;
border:1px solid darkgray;
}
#progressbar{
position: absolute;
top:50%;
left:50%;
margin-left:-90px;
margin-top:-10px;
width:180px;
height:20px;
border:1px solid darkgray;
}
/*在进度条元素上调用动画*/
#fill{
animation: move 2s;
text-align: center;
background-color: #6caf00;
}
/*实现元素宽度的过渡动画效果*/
@keyframes move {
0%{
width:0;
}
100%{
width:100%;
}
}
两种改法：要么把你引入的 script 标签，放到 body 的底下；要么把你的 JS 代码用 window.onload = function () { ... } 括起来。
原因很简单，HTML 从上至下加载、JS 从上至下执行。由于你的 JS 文件先于 <div id='fill'> 被加载进来且执行，当执行到
var fill = document.getElementById('fill');时，页面中的 #fill 元素并未被加载进来，所以此时变量 fill 的值是 null。