只有一个跨度有效
Only one single span works
这段代码提供了一个点效果,就像一个加载栏("加载.,加载..,加载...),但问题是,只有一个跨度 id 有效,第二个不会,我不知道为什么......请帮帮我,伙计们
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
function showProgressDots(numberOfDots) {
var progress = document.getElementById('progressDots');
switch(numberOfDots) {
case 1:
progress.innerHTML = '.';
timerHandle = setTimeout('showProgressDots(2)',200);
break;
case 2:
progress.innerHTML = '..';
timerHandle = setTimeout('showProgressDots(3)',200);
break;
case 3:
progress.innerHTML = '...';
timerHandle = setTimeout('showProgressDots(1)',200);
break;
}
}
window.setTimeout('showProgressDots(1)',100);
//-->
</SCRIPT>
Loading<span id="progressDots" style="position:absolute;"></span>
SecondLoading<span id="progressDots" style="position:absolute;"></span>
如果需要,这里是简短的解决方案。
.HTML:
Loading<span id="progressDots1"></span>
SecondLoading<span id="progressDots2"></span>
JavaScript:
function loading(id) {
var el = document.getElementById(id),
i = 0,
dots = "...";
setInterval(function() {
el.innerHTML = dots.substring(0, ++i);
if (i % 3 == 0) i = 0;
}, 500);
}
loading("progressDots1");
loading("progressDots2");
演示:http://jsfiddle.net/dzFL3/
编辑 1:编写了一个可自定义的加载器,以便您可以注册/取消注册加载器。见下文,
编辑2:正如愿景指出的那样
只是出于兴趣...我想,创建多个计时器并将它们存储在数组中有什么意义?如果等待一段时间,单独的计时器将不同步。这个怎么样:jsfiddle.net/rMpK9/5
改进的代码:(来自Vision的演示和getElementsByTagName
的使用)
var timer = null,
dotLimit = 3,
elements = [];
function registerProgressDots(progress) {
for (var i = 0; i < progress.length; i++) {
elements.push(progress[i]);
}
timer = setInterval(function() {
for (var i = 0; i < elements.length; i++) {
with(elements[i]) {
innerHTML = innerHTML.length == dotLimit ? '' : innerHTML + '.';
}
}
}, 200);
}
function unRegisterProgressDots(index, clearDots) {
if (typeof index == 'undefined' || index == null) {
clearInterval(timer);
} else {
elements.splice(index, 1);
if (elements.length == 0) {
clearInterval(timer);
}
}
if (clearDots) {
var progress = document.getElementsByClassName('progressDots');
for (var i = 0; i < progress.length; i++) {
progress[i].innerHTML = '';
}
}
}
window.setTimeout(function() {
var spanTags = document.getElementsByTagName('span');
var progress = [];
for (var i = 0; i < spanTags.length; i++) {
if (spanTags[i].className.indexOf('progressDots') >= 0) {
progress.push(spanTags[i]);
}
}
registerProgressDots(progress);
}, 100);
window.setTimeout(function() {
unRegisterProgressDots(null, true);
}, 10000); //stop loading text after 10 seconds
最终演示
只是发布我为此制作的一个小插件(为了好玩..)。
(function($){
$.fn['progress'] = function(_options){
var options = {
symbol: '.',
delay: 200,
length: 3,
duration: 0
};
if (typeof _options === 'object'){
$.extend(options, _options);
} else if (_options === 'clear'){
return this.each(function(){
clear.apply(this);
});
}
function display(){
var self = $(this),
txt = self.text() + options.symbol;
if (txt.length > options.length){
txt = '';
}
self.text( txt );
}
function clear(){
var self = $(this),
timer = self.data('progressTimer');
clearInterval(timer);
self.text('');
self.removeData('progressTimer');
}
return this.each(function(){
var self = $(this),
that = this,
timer = null;
timer = setInterval(function(){
display.apply(that);
}, options.delay);
self.data('progressTimer', timer);
if (options.duration){
setTimeout(function(){
clear.apply(that);
}, options.duration);
}
});
}
})(jQuery);
你使用它
// to set it
$('some-selector').progress({/*options*/});
// to stop it
$('some-selector').progress('clear');
可用options
-
symbol
每次迭代时要添加的字符(默认值为.
) -
length
重新开始之前要显示的最大符号数(默认值为 3) -
delay
添加每个额外符号所需的时间(以毫秒为单位)(默认值为 200) - 清除插件之前
duration
总持续时间(以毫秒为单位)(默认值为 0,表示没有自动清除)
示例指向 JSFIDDLE
$('some-selector').progress({
symbol: '*',
length: 10,
delay: 100,
duration: 5000
});
<小时 />更新以征求意见
要在某个特定时间后自动清除它,只需在代码中添加超时即可。
所以
var progressElements = $('some-selector').progress({/*options*/}); // set the progress
setTimeout(function(){
progressElements.progress('clear');
}, 1000); // 1000ms = 1 second
<小时 />更新第二条评论
更改了上面的插件代码以允许duration
参数。
如果指定,它会声明插件自动清除的时间。
在 http://jsfiddle.net/gaby/gh5CD/3/处演示(第二个加载器将在 2 秒后清除)
这是我
的建议:
Loading<span id="progressDots" style="position:absolute;"></span> //element before script
<script type="text/javascript">
var i='', dots=20;
showProgressDots();
function showProgressDots() {
var progress = document.getElementById('progressDots');
progress.innerHTML = i;
i+='.';
if (i.length<dots) setTimeout(showProgressDots, 200);
}
</script>
小提琴
相关文章:
- 是否有一个JS/jQuery函数可以获取某个类的每个元素的ID
- 如何在只能有一个asp.net表单的主页上从asp.net页面中的javascript中获取值
- 有可能在来自链接的警报中有一个值吗
- 是否<asp:文本框>有一个onFocusLost事件
- 让谷歌数据图表有一个24小时x轴
- PayPal按钮是否有一个简单的选项,其中金额基于一些用户输入
- 我确实有一个表单,如果用户输入了输入,它应该检查否定或空的输入框,并抛出一条警告消息
- 在这个使用hasOwnProperty的对象扩展程序中有一个错误,I'我不确定那个bug是什么,也不确定这个扩展
- 当知道同一hiearch中至少有一个元素时,遍历到元素.结构使用jquery
- PNG图像被覆盖,但每个图像都有一个链接可以更改,每次一个-Javascript/jQuery/CSS
- JQuery是否有一个“;移动“;作用或者有没有一种更紧凑的方法来做到这一点
- Regex或javascript每X个连续单词中有一个单词
- Jquery时间启动计时器,我有一个计时器的代码,但它在页面加载时启动
- 是否有一个javascript库来解析简单的查询
- 在一个函数中,我有一个未捕获的语法错误:意外的标记else
- 检查一个元素是否有一个类与另一个类总是返回true
- 我有一个用幻灯片制作的网页,但幻灯片会在屏幕上移动
- 我有一个有效的 JSON,但我不断收到“语法错误 json.parse 第 1 行意外的数据结尾”
- 当你有一个非常复杂的数据库时,如何有效地管理会话
- Jquery javascript:有一个过滤列表(有效),需要帮助保留所有LI'当有'没有匹配的