这篇文章主要介绍了射流研究…实现进度条的方法,实例分析了两种不同的实现方法,并说明了设置超时和设置间隔的使用区别,非常具有实用价值,需要的朋友可以参考下
本文实例讲述了射流研究…实现进度条的方法。分享给大家供大家参考。具体实现方法如下:
1.setTimeout和clearTimeout
超文本标记语言
头
标题进度条/标题
style type='text/css '。容器{
宽度:450像素
边框:1px纯色# 6 C9 C2C
高度:25px
}
#bar{
背景:# 95CA0D
浮动:左;
身高:100%;
文本对齐:居中;
行高:150%;
}
/风格
脚本类型='文本/javascript '
函数运行(){
var bar=文档。getelementbyid(' bar ');
var total=文档。getelementbyid(“total”);
酒吧。风格。width=parse int(bar。风格。宽度)1 " % ";
总计。innerhtml=bar。风格。宽度;
if(bar.style.width=='100%'){
window.clearTimeout(超时);
返回;
}
var超时=窗口。settimeout(' run()',100);
}
window.onload=function(){
run();
}
/脚本
/头
身体
div class='容器'
div id=' bar ' style=' width:0%;'/div
/div
span id='总计/span
/body
/html
效果图:
2.setInterval和clearInterval
超文本标记语言
头
标题进度条/标题
style type='text/css '。processcontainer{
宽度:450像素
边框:1px纯色# 6 C9 C2C
高度:25px
}
#processbar{
背景:# 95CA0D
浮动:左;
身高:100%;
文本对齐:居中;
行高:150%;
}
/风格
脚本类型='文本/javascript '
函数setProcess(){
var过程栏=文档。getelementbyid(“进程栏”);
进程栏。风格。width=parse int(进程栏。风格。宽度)1 " % ";
进程栏。innerhtml=进程栏。风格。宽度;
如果(进程栏。风格。width==' 100% '){
窗户。清除间隔(条形计时器);
}
}
var bar定时器=窗口。setinterval(function(){ set process();},100);
window.onload=function(){
巴蒂默;
}
/脚本
/头
身体
div class='processcontainer '
div id='进程栏' style='宽度:0%;'/div
/div
/body
/html
效果图:
3.setTimeout和setInterval区别
setTimeout()只执行密码一次。如果要多次调用,请使用setInterval(),setInterval()方法会不停地调用函数,直到clearInterval()被调用或窗口被关闭,或者让密码自身再次调用setTimeout()。
希望本文所述对大家的Java语言(一种计算机语言,尤用于创建网站)描述语言程序设计有所帮助。
郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。