练习1
创建文本域,在文本域下方显示输入的字符数,如果大于20个字符则数字变红,否则数字为蓝色。
<textarea name="n1" value="" rows="10" cols="20" onkeyup="aa()"></textarea>
<div>0</div>
<script type="text/javascript">
function aa(){
var a= document.getElementsByName("n1")[0];
var b=a.value.length;
var c=document.getElementsByTagName("div")[0];
c.innerText=b;
if(b>=20){
a.style="color:red";
c.style="color:red";
}else{
a.style="color:blue";
c.style="color:blue";
}
}
</script>
练习2
创建复选框个人爱好,(全选、篮球、跑步、购物、看电影、游泳、旅行),点击全选则全部选中。
<input type="checkbox" name="q" onclick="aa()" value="全选">全选
<input type="checkbox" name="n" value="篮球">篮球
<input type="checkbox" name="n" value="跑步">跑步
<input type="checkbox" name="n" value="购物">购物
<input type="checkbox" name="n" value="看电影">看电影
<input type="checkbox" name="n" value="游泳">游泳
<input type="checkbox" name="n" value="旅行">旅行
<script type="text/javascript">
/*方法一
function aa(){
var a=document.getElementsByName("q");
var b=document.getElementsByName("n");
for (var i = 0; i<b.length; i++) {
b[i].click();
}
}
*/
/*方法二
function aa(){
var a=document.getElementsByName("q")[0];
var b=document.getElementsByName("n");
if (a.checked==true) {
var o = true;
}else{
var o = false;
}
for(var i =0; i < b.length; i++) {
b[i].checked= o ;
}
}
*/
方法三
function aa(){
var a=document.getElementsByName("q")[0];
var b=document.getElementsByName("n");
if(a.checked==true) {
for(var i =0; i < b.length; i++) {
b[i].checked=true;
}
}else{
for(var i =0; i < b.length; i++) {
b[i].checked=false;
}
}
}
</script>
练习3
注册会员信息,判断字段不能为空
<form action="#" method="get">
<p>用户名<input type="text"/ name="n1" value=""></p>
<p>密码<input type="password" name="n2" value=""/></p>
<p><input type="button" name="n3" name="n3" onclick="but()" value="提交"/></p>
</form>
<script type="text/javascript">
function but(){
var a=document.getElementsByName("n1")[0].value;
var b=document.getElementsByName("n2")[0].value;
var b1=/^[A-z0-9\W]{6,20}$/;
if (a=="") {
alert("用户名不能为空");
return false;
}
if (b=="") {
alert("密码不能为空");
}
}
</script>