网页特效
建站首页
|
广告代码
|
源码下载
|
站长工具
|
字体下载
|
网页模板
|
收藏本站
|
设为首页
网站首页
菜单导航
日期时间
背景图像
图层样式
鼠标键盘
页面窗口
色彩表格
链接文字
表单按钮
计数转换
游戏娱乐
综合实例
特效
热门搜索:
特效代码
js脚本
导航菜单
热点推荐:
英文字体
人民币汇率
dw插件
站长常用软件
alexa排名查询
您的位置:
网页特效
->
表单按钮
-> 带进度条的全选特效
带进度条的全选特效
作者:admin 发布时间:2009-6-29 15:20:06 发布人: admin
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html><head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style>BODY { FONT-SIZE: 9pt } TABLE { FONT-SIZE: 9pt } </style> <meta content="MSHTML 6.00.2800.1400" name="GENERATOR"></head> <body><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 = ""; } 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> </body> </html>
带进度条的全选特效
将本文收藏到QQ书签与更多好友分享
上一篇:文章:
带Checkbox的列表框
下一篇:文章:
选择城市功能特效代码
本类浏览排行 »
搜索页面中的内容
又一款综合搜索引擎代码
标题栏显示当前时间
倒影效果的电子表,显示当前时间
自动记录当前页面最新的更新日期
JS让网页每隔2秒弹出一次对话框
一款超酷的CSS列表排行榜
鼠标悬停放大的纯CSS分页效果
本站推荐文章 »
垂直三栏自适应等高布局
仿QQ消息管理器的文本内容样式
支付宝的控制台动画效果菜单
文字、图片拖曳移动
可拉伸移动的DIV层效果
很酷的图片伸缩放大功能
较好的视觉效果的网页选项卡
CSS实例:通过定义渐变边框给图片加阴影