您的位置：首页 > Web前端 > JavaScript

Javascript 动态编程--动态设置网页元素是否可见,是否可用,改变大小,动态插入文字,进度条,动态改变背景例子

2007-12-08 20:47 886 查看

需求如下：
开始界面只有两个按钮，单击一个按钮，当前按钮不可用,并改变动态大小，另一个按钮不可见，
同时出来文字提示和进度条，要求只有一个页面，下面就实现这个功能。
进度条，通过动态背景实现，文字是通过id动态设置innerHTML实现

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>javascript动态改变示例</title>
</head>
<script language="JavaScript" type="text/javascript">
var pc = 0;
function pgload()
{
pc += 2;
ylpg.style.width = pc + "%";
time = setTimeout("pgload()",150);
if (pc > 100) { pc=0; }

}
function shangbao(obj)
{

//修改有关状态 --by 闫磊 Email:Landgis@126.com,yanleigis@21cn.com 2007.12.08编写
obj.b_depute1.enable=false;
obj.b_depute1.value="正在上报,请稍候............";
obj.b_depute1.width=document.body.clientWidth;
obj.b_depute1.disabled=true;//不可用

obj.b_exit.style.display='none';//不可见
document.all["ylpg"].bgColor="#0000FF"; //改变背静
//obj.ylpg.style.bgColor=blue;
ylprogress.innerHTML = "<font face = '宋体' style='font-size:20pt' color='#FF0000'>正在上报,请稍候............ </FONT>";
//增加 end
pgload();
//要做的事情做在这里
//obj.submit();
}

</script>
<body leftmargin="5" topmargin="" onload="loadprogr()">
<form name="form1" method="post" action="">
<h1 align="center">闫磊欢迎你</h1>
<table width="100%" border="0" cellpadding="0" cellspacing="0" bordercolor="#AEDBF8">
<tr>
<td height="25" align="center" >
<input type="button" name="b_depute1" value="上报数据" onClick="javascript:shangbao(form1);" />
<input type="button" name="b_exit" value="退出" onClick="javascript:window.close();"/>
</td>
</tr>

</table>

<table width=100% >
<tr>
<td align=center> <p id="ylprogress"></p></td>
</tr>
<tr>
<td align=center>
<center>
<table width=60% border=0><tr><td align=left>
<table id=ylpg height=18 width=0% bgcolor=white border=0><tr><td> </td></tr></table>
</td></tr></table>
</center>
</td></tr></table>


</form>

</body>
</html>

闫磊欢迎你

正在上报,请稍候............

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航