入门的JS练习——表单元素控制

这个练习展示了事件编程的基本方法

1)通过鼠标单击按钮控制文本框的属性

<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″/>
<title>无标题文档</title>
<script language=”JavaScript”>
function myfunction() {
document.form1.txt.value = “”;
document.form1.txt.style.backgroundColor = “red”;
}
</script>
</head>
<body>
<form name=”form1″>
<input type=”text” name=”txt”>
<input type=”button” value=”确认” onclick=”myfunction()”/>
</form>
</form>
</body>
</html>

 

2)可以尝试修改事件,比如鼠标移过文本框触发的版本

<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″/>
<title>无标题文档</title>
<script language=”JavaScript”>
function myfunction() {
document.form1.txt.value = “”;
document.form1.txt.style.backgroundColor = “red”;
}
</script>
</head>
<body>
<form name=”form1″>
<input type=”text” name=”txt” onmouseover=”myfunction()”>
<input type=”button” value=”确认”/>
</form>
</form>
</body>
</html>

 

3)可以尝试修改函数,完成更多的功能,如设置文本框属性和改变DIV外观等

<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″/>
<title>无标题文档</title>
<script language=”JavaScript”>
function myfunction() {
document.form1.txt.value = “”;
document.form1.txt.style.backgroundColor = “red”;
//document.write(“<div style=’height:500pt;width:500pt;background-color: aquamarine;text-align:center;font-family:宋体;font-size:28pt’></div>”);
document.getElementById(“div1″).innerHTML=”<div style=’height:500pt;width:500pt;background-color: aquamarine;text-align:center;font-family:宋体;font-size:28pt’></div>”;
}
</script>
</head>
<body>
<form name=”form1″>
<input type=”text” name=”txt”>
<input type=”button” value=”确认” onclick=”myfunction()”/>
</form>
<div id=”div1″/>
</body>
</html>

发表评论

邮箱地址不会被公开。 必填项已用*标注