各位大神,这种进度查询的样子是怎么实现的啊?
是用javascript吗?
各位大神有例子可供小弟参考下吗~太感谢了
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。
<html>
<head>
<title>step by step</title>
</head>
<body>
<div id="navigatorPic" style="position:fixed;top:100px;left:100px;width:730px;height:100px;background-image:url(step1.png)">
</div>
<div style="color:blue;font-family:Microsoft YaHei;font-size:20px;position:relative;top:400px;left:300px;">
click next step, submit by Ajax.
<div id="step1" style="display:block">
current step is step1.
</div>
<div id="step2" style="display:none">
current step is step2.
</div>
<div id="step3" style="display:none">
current step is step3.
</div>
<div id="step4" style="display:none">
current step is step4.
</div>
<input type="button" value="last step" onclick="lastStep();"><input type="button" value="next step" onclick="nextStep();">
</div>
<script language="javascript" type="text/javascript">
var stepIndex = 1;
var stepNum = 4;
function nextStep(){
if(stepIndex<stepNum){
stepIndex++;
document.getElementById("navigatorPic").style.background = "url(step"+stepIndex+".png)";
for(var i=1;i<=stepNum;i++){
document.getElementById("step"+i).style.display = 'none';
}
document.getElementById("step"+stepIndex).style.display = 'block';
}
}
function lastStep(){
if(stepIndex>1){
stepIndex--;
document.getElementById("navigatorPic").style.background = "url(step"+stepIndex+".png)";
for(var i=1;i<=stepNum;i++){
document.getElementById("step"+i).style.display = 'none';
}
document.getElementById("step"+stepIndex).style.display = 'block';
}
}
</script>
</body>
</html>