小工具-javascript实现进度条功能
来源:互联网 发布:java编程入门视频教程 编辑:程序博客网 时间:2024/05/18 21:09
<table id="load" width="700" border="0" align="center" bgcolor="#FAFAFA" cellpadding="0" cellspacing="0" bordercolor="#000000" style="border-collapse:collapse;display:none ">
<tr>
<td><br><br>
<table width="100%" border="1" cellspacing="0" cellpadding="0" bordercolor="#287BCE" style="border-collapse:collapse ">
<tr bgcolor="#F7F7F6">
<td width="20%" height="100" valign="middle">
<table align='center' width='500'>
<tr>
<td colspan='2' align='center' ><font size="2">
正在进行保存,用时较长,请稍后...
</font>
</td>
</tr>
<tr>
<td id='tdOne' height='25' width=1 bgcolor="blue"> </td>
<td id='tdTwo' height='25' width=500 bgColor='#999999'> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
js:
var speed = 1 ;
var len = 500 ;
var add = 0 ;
function openContenFrame(){
var td1 = document.getElementById('tdOne') ;
var td2 = document.getElementById('tdTwo') ;
add = add+10 ;
td1.width = add ;
if(len - add <= 0){
td2.width = 1 ;
}else{
td2.width = len - add ;
}
if(add<=len) {
;
}else{
td1.width = 1 ;
td2.width = 500 ;
add = 0 ;
}
setTimeout('openContenFrame()',100) ;
}
function loading(){
document.getElementById("load").style.display="";
document.getElementById("opperate").style.display="none";
openContenFrame();
}
在submit()的方法后调用loading()
<tr>
<td><br><br>
<table width="100%" border="1" cellspacing="0" cellpadding="0" bordercolor="#287BCE" style="border-collapse:collapse ">
<tr bgcolor="#F7F7F6">
<td width="20%" height="100" valign="middle">
<table align='center' width='500'>
<tr>
<td colspan='2' align='center' ><font size="2">
正在进行保存,用时较长,请稍后...
</font>
</td>
</tr>
<tr>
<td id='tdOne' height='25' width=1 bgcolor="blue"> </td>
<td id='tdTwo' height='25' width=500 bgColor='#999999'> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
js:
var speed = 1 ;
var len = 500 ;
var add = 0 ;
function openContenFrame(){
var td1 = document.getElementById('tdOne') ;
var td2 = document.getElementById('tdTwo') ;
add = add+10 ;
td1.width = add ;
if(len - add <= 0){
td2.width = 1 ;
}else{
td2.width = len - add ;
}
if(add<=len) {
;
}else{
td1.width = 1 ;
td2.width = 500 ;
add = 0 ;
}
setTimeout('openContenFrame()',100) ;
}
function loading(){
document.getElementById("load").style.display="";
document.getElementById("opperate").style.display="none";
openContenFrame();
}
在submit()的方法后调用loading()
阅读全文
0 0
- 小工具-javascript实现进度条功能
- 进度条小工具
- 小工具-jsp实现验证码功能
- javascript继承小工具
- WordPress修改功能小工具
- 小工具-日历选择器(javascript)
- 和M2M功能一样的小工具
- C# 小工具:读取excel表格,实现筛选某一列的功能,并显示处理
- JavaScript调试的小工具(jsTrace)
- JavaScript小经验小工具-总结一
- JavaScript之Unicode编码转换小工具
- wordpress 多区域实现 widget(小工具)
- C# 加密小工具代码实现
- 实现统计java程序代码的小工具
- VBS实现的日程提醒小工具
- Python 实现的关键词查找小工具
- Qt之实现表针时钟小工具
- Python实现火车票查询小工具
- iOS 长按手势执行两次解决办法
- SpringMvc项目新建的详解配置
- Class 'org.springframework.orm.hibernate5.LocalSessionFactoryBean' not found
- 在pycharm中使用git版本管理以及同步github
- Android新特性介绍,ConstraintLayout完全解析
- 小工具-javascript实现进度条功能
- DroneKit教程(五):使用自定义MAVLink指令
- 欢迎使用CSDN-markdown编辑器
- MOOC清华《面向对象程序设计》第8章:栈的实现(基于数组)
- Calico 的网络结构是什么?- 每天5分钟玩转 Docker 容器技术(68)
- git详细教程
- opencv相关---IplImage* 的头文件
- 番茄工作法——中断(笔记)
- java基础语法