实线效果如图：
实现过程：
q5.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/q5.js" charset="gbk"></script>
<style type="text/css">
#box {
width: 1204px;
height: 84px;
margin-top: 520px;
margin-left: 35px;
}
#outter {
border: groove red 6px;
width: 1204px;
height: 44px;
margin-top: 2px;
margin-left: 2px;
}
#inside {
width: 0px;
height: 40px;
background-color: #000;
margin-left: 2px;
margin-top: 2px;
}
#tip {
width: 192px;
height: 20px;
background-color: gray;
margin-left: 1024px;
}
</style>
</head>
<body onload="scr()">
<div id="box">
<div id="tip">游戏加载进度0.00%...</div>
<div id="outter">
<div id="inside"></div>
</div>
</div>
</body>
</html>
q5.js
var a = 0, b = 60, c = b / 12;
function show() {
if (document.getElementById("inside").offsetWidth < 1200) {
a += c;
var str = a + "";
if (str.indexOf(".") == -1) {
str += ".00";
} else {
str = str.substring(0, indexOf(".") + 3);
}
document.getElementById("inside").style.width = document
.getElementById("inside").offsetWidth
+ b + "px";
document.getElementById("tip").innerHTML = "游戏加载进度" + str + "%...";
} else {
document.getElementById("inside").style.width = 1200 + "px";
stop();
}
}
var timer;
function scr() {
timer = window.setInterval(show, 800);
}
function stop() {
window.clearInterval(timer);
alert("加载完毕");
}
