网页按钮表单等JS使用技巧

按钮js使用技巧：

★ 按钮颜色变化
<input type=text name="nick" style="border:1px solid #666666; font-size:9pt; height:17px; BACKGROUND-COLOR: #F4F4FF; color:#ff6600" size="15" maxlength="16">

★ 网页按钮的特殊颜色
<input type=button name="Submit1" value="创名杰" size=10 class=s02 style="background-color:rgb(235,207,22)">

★ 平面按钮
<input type=submit value=提交 style="border:1px solid :#666666; height:17px; width:25pt; font-size:9pt; BACKGROUND-COLOR: #E8E8FF; color:#666666" name="submit">

★ 鼠标移入移出时颜色变化
<input type="submit" value="网站建设" name="B1" onMouseOut=this.style.color="blue" onMouseOver=this.style.color="red" class="button">

★ 改变按钮的图片
<style type="text/css">

</style>
例如：
<input type="submit" name="Submit2" value="提交" onmouseover="this.className='style4'" onmouseout="this.className='style3'" class="style3">

★ 改变按钮的特征
<style type="text/CSS">

</style>
例如：
<input type="submit" name="Submit" value="提交" onmouseover="this.className='style2'" onmouseout="this.className='style1'" class="style1">

表单js使用技巧：

◆ 文本框焦点
onFocus：当输入获得焦点后，产生该文件
Onchange：当文字值改变时，产生该事件
Onselect：当文字加亮后，产生该文件
onBlur：当失去输入焦点后产生该事件
<input type="text" value="创名杰" onfocus="if(value=='创名杰') {value=''}" onblur="if
(value=='') {value='创名杰'}">点击时文字消失，失去焦点时文字再出现。

◆ 平面输入框
<input type="text" name="T1" size="20" style="border-style: solid; border-width: 1">

◆ 改变下拉框的颜色
<select name="classid" onChange="changelocation(document.myform.classid.options[document.myform.classid.selectedIndex].value)" size="1" style="color:#008080;font-size: 9pt">

◆ 线型输入框
<input type="text" name="key" size="12" value="请输入关键词" onFocus=this.select() onMouseOver=this.focus() class="line">

◆ 改变文字输入框的背景颜色
<style>
.input2 {background-image: url('../images/inputbg.gif'); font-size: 12px; background-color:
#D0DABB;border-top-width:1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px}
</style>
<input name=content type=text size="47" class="input2" maxlength="50">

◆ 点击文字实现radio选项的选定
<br>
    <input type="radio" name="regtype" value="A03" id="A03">
<label for="A03">网站建设解决方案</label> <br>

◆ 传递该object的form
UpdateSN('guoqiang99267',this.form)
function UpdateSN(strValue,strForm)
{
strForm.SignInName.value = strValue;
return false;
}

页面js使用技巧：

★ 使窗口变成指定的大小
<script>
window.resizeTo(300,283);
</script>

★ 状态栏显示该页状态
<base onmouseover="window.status='北京网站建设 http://www.510sj.net';return true">

★ 转至目标URL
window.location="http://www.510sj.com"

★ 刷新页面
javascript:this.location.reload()//

★ 过10秒自动关闭页面
< script language="JavaScript" >
function closeit() {
setTimeout("self.close()"，10000)
}
< /script >

其它js使用技巧：

◆ 文字上下滚动代码
<marquee direction=up scrollamount=1 scrolldelay=100 onmouseover='this.stop()' onmouseout='this.start()' height=60>

<tr>
<td>
滚动文字
滚动文字
</table>

</marquee>

◆ 在鼠标移到文字上时就触发事件
<html>
<head>
<script language="LiveScript">
<!-- Hiding
     function hello() {
       alert("别靠近我!");
     }
</script>
</head>
<body>
<a href="" onMouseOver="hello()">link</a>
</body>
</html>

◆ 显示文档最后修改时间
<script language=javascript>
function hi(str)
{
document.write(document.lastModified)
alert("hi"+str+"!")
}
</script>

标签: