Home >Web Front-end >JS Tutorial >Multi-threaded select all checkbox_form effects

Multi-threaded select all checkbox_form effects

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal: 2016-05-16 19:24:501456browse

 

全部选择　　　　 
线程数： 

 
 
 
 
 
 
 
 
 
 
 
 
/* 
This following code are designed and writen by Windy_sk  
You can use it freely, but u must held all the copyright items! 
*/ 
var total = 505; 
var thread_num; 
var pre_thread; 
var thread = new Array(); 
var completed = 0; 
var start_time = null; 

for(i=0;i"); 

function init_para(){ 
thread_num = parseInt(the_thread.value); 
if(isNaN(thread_num)) thread_num = 10; 
pre_thread = Math.floor(total/thread_num); 
result.innerText = ""; 
bar1.style.width = "0%"; 
bar2.style.width = "100%"; 
bar.style.display = ""; 
} 

function check_all(){ 
checkall.disabled = true; 
init_para(); 
for(var i=0;ithread[i]=[setInterval("thread[" i "][1]} 
thread[i]=[setInterval("thread[" i "][1]} 

function check_unit(num){ 
if(completed==0)start_time=new Date; 
cbox[num].checked=checkall.checked; 
completed  ; 
var cur_rate = Math.round(completed*100/total); 
show.innerText = completed   "/"   total   " : "   cur_rate   "%"; 
bar1.style.width = cur_rate   "%"; 
bar2.style.width = (100-cur_rate)   "%"; 
if(completed == total){ 
completed = 0 
checkall.disabled = false; 
result.innerText = "(" total "单元/" thread_num "线程，总共耗时：" ((new Date)-start_time) " ms)"; 
} 
} 
 

下面是运行效果

<table border="0"> 
<table border="0"> 
<tr>
<td style="width:100px;over-flow:hidden"><span id="show"></span></td> 
<td style="width:400px;"> 
<table id="bar" style="width:90%;height:10px;border:1px black solid;display:none"><tr> 
<td id="bar1" bgcolor="skyblue" style="width:0%"></td> 
<td id="bar2" style="width:100%"></td> 
</tr></table>
</td>
<td style="width:100px;over-flow:hidden"><span id="show"></span></td>
</tr> 
<td style="width:400px;"> 
<table id="bar" style="width:90%;height:10px;border:1px black solid;display:none"><tr> 
<td id="bar1" bgcolor="skyblue" style="width:0%"></td>
<td colspan="2"> 
</td>
<td id="bar2" style="width:100%"><span id="result"> 
</span></td> 
</tr></table> 
<script language="JavaScript"> 
/* 
 This following code are designed and writen by Windy_sk <seasonx@163.net> 
 You can use it freely, but u must held all the copyright items! 
*/ 
var total = 505; 
var thread_num; 
var pre_thread; 
var thread = new Array(); 
var completed = 0; 
var start_time = null;

for(i=0;i<total;i++)document.write("<input type=checkbox id=cbox>");

function init_para(){ 
    thread_num = parseInt(the_thread.value); 
    if(isNaN(thread_num)) thread_num = 10; 
    pre_thread = Math.floor(total/thread_num); 
    result.innerText = ""; 
    bar1.style.width = "0%"; 
    bar2.style.width = "100%"; 
    bar.style.display = ""; 
}

function check_all(){ 
    checkall.disabled = true; 
    init_para(); 
    for(var i=0;i<thread_num;i++){ 
        thread[i]=[setInterval("thread["+i+"][1]<pre_thread?check_unit("+i+"*pre_thread + thread["+i+"][1]++):clearInterval(thread["+i+"][0])",1),0]; 
    } 
    thread[i]=[setInterval("thread["+i+"][1]<total%thread_num?check_unit("+i+"*pre_thread + thread["+i+"][1]++):clearInterval(thread["+i+"][0])",1),0]; 
}

function check_unit(num){ 
    if(completed==0)start_time=new Date; 
    cbox[num].checked=checkall.checked; 
    completed++; 
    var cur_rate = Math.round(completed*100/total); 
    show.innerText = completed + "/" + total + " : " + cur_rate + "%"; 
    bar1.style.width = cur_rate + "%"; 
    bar2.style.width = (100-cur_rate) + "%"; 
    if(completed == total){ 
        completed = 0 
        checkall.disabled = false; 
        result.innerText = "("+total+"单元/"+thread_num+"线程，总共耗时："+((new Date)-start_time)+" ms)"; 
    } 
} 
</script>

<br><input onclick="runEx('runcode21950')" type="button" value="运行代码"><input onclick="doCopy('runcode21950')" type="button" value="复制代码"> <input onclick="doSave(runcode21950)" type="button" value="保存代码"> <a href="http://www.jb51.net/article/23421.htm" title="查看具体详情" target="_blank">[Ctrl A select all Note: </a>If you need to introduce external Js, you need to refresh to execute ]<script language="JavaScript"> 
/* 
 This following code are designed and writen by Windy_sk <seasonx@163.net> 
 You can use it freely, but u must held all the copyright items! 
*/ 
var total = 505; 
var thread_num; 
var pre_thread; 
var thread = new Array(); 
var completed = 0; 
var start_time = null;

for(i=0;i<total;i++)document.write("<input type=checkbox id=cbox>");

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：A very cool countdown_time and dateNext article：A very cool countdown_time and date

See more

Multi-threaded select all checkbox_form effects

Related articles