很漂亮的一个带进度条显示的全选反选特效,还可以自定义同时选中个数,结合自己的网站需求来修改即可。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <META http-equiv=Content-Type content="text/html; charset=gb2312"> <meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren"> <meta name="description" content="欢迎来到武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢,分享互联网流行的励志语录经典短句,减肥健身健康小常识及打卡记录,收集各种js特效代码。"> <STYLE> BODY { FONT-SIZE: 9pt } TABLE { FONT-SIZE: 9pt } </STYLE> <META content="MSHTML 6.00.2800.1400" name=GENERATOR></HEAD> <BODY> <a href="https://www.wuming.ren">武鸣人</a>,各种信息资源免费发布,分享励志语录经典短句,减肥健身常识,各种js特效代码。网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)<hr> <!--欢迎来到武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢,分享互联网流行的励志语录经典短句,减肥健身健康小常识及打卡记录,收集各种js特效代码。--> <script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script> <script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script> <INPUT id=checkall onclick=check_all() type=checkbox><LABEL for=checkall>全部选择</LABEL> 线程数:<INPUT id=the_thread style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; HEIGHT: 15px" maxLength=2 size=2 value=10> <BR> <TABLE border=0> <TBODY> <TR> <TD style="WIDTH: 100px; over-flow: hidden"><SPAN id=show></SPAN></TD> <TD style="WIDTH: 400px"> <TABLE id=bar style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; DISPLAY: none; BORDER-LEFT: black 1px solid; WIDTH: 90%; BORDER-BOTTOM: black 1px solid; HEIGHT: 10px"> <TBODY> <TR> <TD id=bar1 style="WIDTH: 0%" bgColor=skyblue></TD> <TD id=bar2 style="WIDTH: 100%"></TD></TR></TBODY></TABLE></TD></TR> <TR> <TD colSpan=2><SPAN id=result></SPAN></TD></TR></TBODY></TABLE> <SCRIPT language=JavaScript> 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 = ""; }//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀) 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]; }//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀) 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)"; } }//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀) </SCRIPT> </BODY> </HTML>
本文来自武鸣人网站,转载请注明出处