javascript（十二）函数事件练习

最新推荐文章于 2023-08-15 20:03:49 发布

不许偷苹果

最新推荐文章于 2023-08-15 20:03:49 发布

阅读量555

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/qq_38904347/article/details/82695784

js 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了三个JavaScript实战练习：1. 创建文本域并实时显示输入字符数，超过20字符数字变红；2. 设计复选框，实现全选功能；3. 实现会员信息注册时的非空验证。

练习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>