JavaScript案例笔记

最新推荐文章于 2024-01-07 16:04:47 发布

FenQing1213

最新推荐文章于 2024-01-07 16:04:47 发布

阅读量270

点赞数

分类专栏： javaweb

本文链接：https://blog.csdn.net/FenQing1213/article/details/79212549

版权

javaweb 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

全选

效果：
这里写图片描述
代码：

<html>
 <head>
  <title>Document</title>

 </head>
 <body>

  <!--
创建一个页面 
    ** 复选框和按钮
        - 四个复选框 表示爱好
        - 一个复选框 操作全选/全不选
        - 三个按钮 代表事件全选，全不选，反选
-->
  <input type="checkbox" id="boxid"  onclick="quanxuan();"/>全选/全不选<br/>
  <input type="checkbox" id="box1" name="love">篮球<br/>
  <input type="checkbox" id="box2" name="love">足球<br/>
  <input type="checkbox" id="box3" name="love">排球<br/>
  <input type="checkbox" id="box4" name="love">羽毛球<br/>
  <input type="button" value="全选" onclick="quanxuan();">
  <input type="button" value="全不选" onclick="buxuan();">
   <input type="button" value="反选" onclick="fanxuan();">
    <script type="text/javascript">
        function quanxuan(){
            /*
            1.获取要操作的复选框
            2.返回的是数组，使用属性checked判断复选框是否为选中，checked=true
            3.遍历数组，得到每一个checkbox，将其设置为true
            */
            var loves=document.getElementsByName("love");
            for( var i=0;i<loves.length;i++){
                var love1=loves[i];
                love1.checked=true;
            }
        }
        function buxuan(){
            var loves=document.getElementsByName("love");
            for(var i=0;i<loves.length;i++){
                var love1=loves[i];
                love1.checked=false;
            }
        }
        function fanxuan(){
            var loves=document.getElementsByName("love");
            for(var i=0;i<loves.length;i++){
                var love1=loves[i];
                if(love1.checked==true)
                    love1.checked=false;
                else 
                    love1.checked=true;
            }
        }
    </script>
 </body>
</html>

下拉列表左右选择

这里写图片描述

<html>
 <head>
  <title>下拉列表左右选择框</title>
  <style type="text/css">

  </style>
 </head>
 <body>
<div id="div1" style="float:left;"> 
    <div>
      <select id="select1" multiple="multiple" style="width:120px;height:100px;">
        <option>选项1</option>
        <option>选项2</option>
        <option>选项3</option>
        <option>选项4</option>
      </select>
    </div>

    <div>
      <input type="button" value="选中添加到右边->" onclick="right1();"><br>
      <input type="button" value="全部添加到右边->" onclick="right2();">
    </div>
</div>
<div id="div2">
    <div>
      <select id="select2" multiple="multiple" style="width:120px;height:100px;">
        <option>选项5</option>
      </select>
    </div>
    <div>
      <input type="button" value="<-选中添加到左边" onclick="left1();"><br>
      <input type="button" value="<-全部添加到左边" onclick="left2();">
    </div>
</div>
  <script type="text/javascript">
    //1
    function right1(){
        /*
        1.获取select1 里的option，getElementsByTagName()返回的是数组
        2.判断是否被选中，属性selected=true吗
        3.如果是选中，就将其添加到右边
        4.得到select2 
        5.添加选中的部分，appendChild()
        */
        var select1=document.getElementById("select1");
        var options1=select1.getElementsByTagName("option");
        for(var i=0;i<options1.length;i++){
            var option1=options1[i];
            if(option1.selected==true){
                var select2=document.getElementById("select2");
                select2.appendChild(option1);
                i--;
            }
        }
    }
    //下面三个方法和第一个差不多，省略..
    function right2(){

    }

    function left1(){

    }
    function left2(){

    }

  </script>
 </body>
</html>

省市联动

这里写图片描述
代码：

<html>
 <head>
  <title>省市联动</title>
 </head>
 <body>
 <!--
    1.创建一个页面，包含两个下拉框
    2.在第一个下拉框
 -->
     <select id="country" onchange="add1(this.value);">
            <option value="0">--请选择--</option>
            <option value="中国">中国</option>
            <option value="美国">美国</option>
            <option value="德国">德国</option>
            <option value="日本">日本</option>
     </select>

      <select id="city">
            <option value="0">--请选择--</option>
     </select>

 </body>

    <script type="text/javascript">
        //创建二维数组存储数据
        var arr=new Array(4);
        arr[0]=["中国","南京","抚州","长春","唐山","青岛"];
        arr[1]=["美国","华盛顿","底特律","纽约","休斯顿"];
        arr[2]=["德国","慕尼黑","柏林","法兰克福","狼堡"];
        arr[3]=["日本","北海道","东京","大阪","广岛","长崎"];
        function add1(val){
            /*
            1.遍历二维数组
            2.得到数组
            3.拿到数组中的第一个值和传递过来的值作比较
            4.如果相同，获取到第一个值后边的元素
            5.得到city的select
            6.添加过去使用appendChild
                -  创建option
            */
            var city1=document.getElementById("city");
            var options1=city1.getElementsByTagName("option");
            for(var m=0;m<options1.length;m++){
                var op=options1[m];
                city1.removeChild(op);
                m--;
            }
            for(var i=0;i<arr.length;i++){
                var arr1=arr[i];
                var firstvalue=arr1[0];
                if(firstvalue==val){
                    for(var j=1;j<arr1.length;j++){
                        var value=arr1[j];//得到城市的名称
                        //创建option
                        var option1=document.createElement("option");
                        var text=document.createTextNode(value);
                        option1.appendChild(text);
                        city1.appendChild(option1);
                    }
                }
            }
        }
    </script>

</html>

动态生成表格

这里写图片描述
代码：

<html>
 <head>
  <title>Document</title>
 </head>
 <body>
 <!--
    1.创建一个页面
 -->
    行：<input type="text" id="h"/><br>
    列：<input type="text" id="l"/><br>
    <input type="button" value="生成" onclick="add2();">

    <div id="divv">

    </div>
 </body> 
    <script type="text/javascript">
        function add2(){
            /*
            1.得到输入的行和列
            2.生成表格
                ** 循环行
                ** 在行里循环单元格
            3.显示到页面上
                ** 把表格的代码设置到div里面
                ** 使用innerHTML属性
            */
            var h=document.getElementById("h").value;
            var l=document.getElementById("l").value;
            var tab="<table border='1' bordercolor='red' width='300' height='300'>";
            for(var i=1;i<=h;i++){
                tab+="<tr>";
                    for(var j=1;j<=l;j++){
                        tab+="<td>";
                        tab+="</td>";
                    }
                tab+="</tr>";
            }
            tab+="</table>";
            //document.write(tab);

            //得到div标签
            var divv=document.getElementById("divv");
            divv.innerHTML=tab;
        }
    </script>
</html>