欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JavaScript1

程序员文章站 2022-06-23 14:51:13
1.JavaScript电灯开关案例 2.JavaScript轮播图案例 3.JavaScript自动跳转到首页案例 4.JavaScript动态表格案例 5.JavaScript表单全选案例 ......

1.javascript电灯开关案例

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>电灯开关</title>

</head>
<body>

<img id="light" src="img/off.gif">

<script>
    /*
        分析:
            1.获取图片对象
            2.绑定单击事件
            3.每次点击切换图片
                * 规则:
                    * 如果灯是开的 on,切换图片为 off
                    * 如果灯是关的 off,切换图片为 on
                * 使用标记flag来完成

     */

    //1.获取图片对象
    var light = document.getelementbyid("light");

    var flag = false;//代表灯是灭的。 off图片

    //2.绑定单击事件
    light.onclick = function(){
        if(flag){//判断如果灯是开的,则灭掉
            light.src = "img/off.gif";
            flag = false;

        }else{
            //如果灯是灭的,则打开

            light.src = "img/on.gif";
            flag = true;
        }


    }
    
    

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

2.javascript轮播图案例

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>轮播图</title>



</head>
<body>

    <img id="img" src="img/banner_1.jpg" width="100%">

    <script>
        /*
            分析:
                1.在页面上使用img标签展示图片
                2.定义一个方法,修改图片对象的src属性
                3.定义一个定时器,每隔3秒调用方法一次。


         */


        //修改图片src属性
        var number = 1;
        function fun(){
            number ++ ;
            //判断number是否大于3
            if(number > 3){
                number = 1;
            }
            //获取img对象
            var img = document.getelementbyid("img");
            img.src = "img/banner_"+number+".jpg";
        }

        //2.定义定时器
        setinterval(fun,3000);

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

3.javascript自动跳转到首页案例

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>自动跳转</title>
    <style>
        p{
            text-align: center;
        }
        span{
            color:red;
        }

    </style>


</head>
<body>
    <p>
        <span id="time">5</span>秒之后,自动跳转到首页...
    </p>


    <script>
        /*
            分析:
               1.显示页面效果  <p>
               2.倒计时读秒效果实现
                   2.1 定义一个方法,获取span标签,修改span标签体内容,时间--
                   2.2 定义一个定时器,1秒执行一次该方法
               3.在方法中判断时间如果<= 0 ,则跳转到首页

         */
       // 2.倒计时读秒效果实现

        var second = 5;
        var time = document.getelementbyid("time");

        //定义一个方法,获取span标签,修改span标签体内容,时间--
        function showtime(){
            second -- ;
            //判断时间如果<= 0 ,则跳转到首页
            if(second <= 0){
                //跳转到首页
                location.href = "https://www.baidu.com";
            }

            time.innerhtml = second +"";
        }


        //设置定时器,1秒执行一次该方法
        setinterval(showtime,1000);



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

4.javascript动态表格案例

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>动态表格</title>

    <style>
        table{
            border: 1px solid;
            margin: auto;
            width: 500px;
        }

        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            text-align: center;
            margin: 50px;
        }
    </style>

</head>
<body>

<div>
    <input type="text" id="id" placeholder="请输入编号">
    <input type="text" id="name"  placeholder="请输入姓名">
    <input type="text" id="gender"  placeholder="请输入性别">
    <input type="button" value="添加" id="btn_add">

</div>


<table>
    <caption>学生信息表</caption>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>

    <tr>
        <td>1</td>
        <td>令狐冲</td>
        <td>男</td>
        <td><a href="javascript:void(0);" onclick="deltr(this);">删除</a></td>
    </tr>

    <tr>
        <td>2</td>
        <td>任我行</td>
        <td>男</td>
        <td><a href="javascript:void(0);" onclick="deltr(this);">删除</a></td>
    </tr>

    <tr>
        <td>3</td>
        <td>岳不群</td>
        <td>?</td>
        <td><a href="javascript:void(0);" onclick="deltr(this);" >删除</a></td>
    </tr>


</table>


<script>
    /*
        分析:
            1.添加:
                1. 给添加按钮绑定单击事件
                2. 获取文本框的内容
                3. 创建td,设置td的文本为文本框的内容。
                4. 创建tr
                5. 将td添加到tr中
                6. 获取table,将tr添加到table中
            2.删除:
                1.确定点击的是哪一个超链接
                    <a href="javascript:void(0);" onclick="deltr(this);" >删除</a>
                2.怎么删除?
                    removechild():通过父节点删除子节点

     */

    //1.获取按钮
   /* document.getelementbyid("btn_add").onclick = function(){
        //2.获取文本框的内容
        var id = document.getelementbyid("id").value;
        var name = document.getelementbyid("name").value;
        var gender = document.getelementbyid("gender").value;

        //3.创建td,赋值td的标签体
        //id 的 td
        var td_id = document.createelement("td");
        var text_id = document.createtextnode(id);
        td_id.appendchild(text_id);
        //name 的 td
        var td_name = document.createelement("td");
        var text_name = document.createtextnode(name);
        td_name.appendchild(text_name);
        //gender 的 td
        var td_gender = document.createelement("td");
        var text_gender = document.createtextnode(gender);
        td_gender.appendchild(text_gender);
        //a标签的td
        var td_a = document.createelement("td");
        var ele_a = document.createelement("a");
        ele_a.setattribute("href","javascript:void(0);");
        ele_a.setattribute("onclick","deltr(this);");
        var text_a = document.createtextnode("删除");
        ele_a.appendchild(text_a);
        td_a.appendchild(ele_a);

        //4.创建tr
        var tr = document.createelement("tr");
        //5.添加td到tr中
        tr.appendchild(td_id);
        tr.appendchild(td_name);
        tr.appendchild(td_gender);
        tr.appendchild(td_a);
        //6.获取table
        var table = document.getelementsbytagname("table")[0];
        table.appendchild(tr);
    }*/

   //使用innerhtml添加
    document.getelementbyid("btn_add").onclick = function() {
        //2.获取文本框的内容
        var id = document.getelementbyid("id").value;
        var name = document.getelementbyid("name").value;
        var gender = document.getelementbyid("gender").value;

        //获取table
        var table = document.getelementsbytagname("table")[0];

        //追加一行
        table.innerhtml += "<tr>\n" +
            "        <td>"+id+"</td>\n" +
            "        <td>"+name+"</td>\n" +
            "        <td>"+gender+"</td>\n" +
            "        <td><a href=\"javascript:void(0);\" onclick=\"deltr(this);\" >删除</a></td>\n" +
            "    </tr>";
    }


    //删除方法
    function deltr(obj){
        var table = obj.parentnode.parentnode.parentnode;
        var tr = obj.parentnode.parentnode;

        table.removechild(tr);
    }


</script>

</body>

5.javascript表单全选案例

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>表格全选</title>
    <style>
        table{
            border: 1px solid;
            width: 500px;
            margin-left: 30%;
        }

        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            margin-top: 10px;
            margin-left: 30%;
        }

        .out{
            background-color: white;
        }
        .over{
            background-color: pink;
        }
    </style>

  <script>
      /*
        分析:
            1.全选:
                * 获取所有的checkbox
                * 遍历cb,设置每一个cb的状态为选中  checked

       */


      //1.在页面加载完后绑定事件
      window.onload = function(){
          //2.给全选按钮绑定单击事件
          document.getelementbyid("selectall").onclick = function(){
                //全选
                //1.获取所有的checkbox
                var cbs = document.getelementsbyname("cb");
                //2.遍历
                  for (var i = 0; i < cbs.length; i++) {
                      //3.设置每一个cb的状态为选中  checked
                      cbs[i].checked = true;
                  }
          }

          document.getelementbyid("unselectall").onclick = function(){
              //全不选
              //1.获取所有的checkbox
              var cbs = document.getelementsbyname("cb");
              //2.遍历
              for (var i = 0; i < cbs.length; i++) {
                  //3.设置每一个cb的状态为未选中  checked
                  cbs[i].checked = false;
              }
          }

          document.getelementbyid("selectrev").onclick = function(){
              //反选
              //1.获取所有的checkbox
              var cbs = document.getelementsbyname("cb");
              //2.遍历
              for (var i = 0; i < cbs.length; i++) {
                  //3.设置每一个cb的状态为相反
                  cbs[i].checked = !cbs[i].checked;
              }
          }

          document.getelementbyid("firstcb").onclick = function(){
              //第一个cb点击
              //1.获取所有的checkbox
              var cbs = document.getelementsbyname("cb");
              //获取第一个cb

              //2.遍历
              for (var i = 0; i < cbs.length; i++) {
                  //3.设置每一个cb的状态和第一个cb的状态一样
                  cbs[i].checked =  this.checked;
              }
          }

          //给所有tr绑定鼠标移到元素之上和移出元素事件
          var trs = document.getelementsbytagname("tr");
          //2.遍历
          for (var i = 0; i < trs.length; i++) {
              //移到元素之上
              trs[i].onmouseover = function(){
                    this.classname = "over";
              }

              //移出元素
              trs[i].onmouseout = function(){
                     this.classname = "out";
              }

          }

      }



  </script>

</head>
<body>

<table>
    <caption>学生信息表</caption>
    <tr>
        <th><input type="checkbox" name="cb" id="firstcb"></th>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>

    <tr>
        <td><input type="checkbox"  name="cb" ></td>
        <td>1</td>
        <td>令狐冲</td>
        <td>男</td>
        <td><a href="javascript:void(0);">删除</a></td>
    </tr>

    <tr>
        <td><input type="checkbox"  name="cb" ></td>
        <td>2</td>
        <td>任我行</td>
        <td>男</td>
        <td><a href="javascript:void(0);">删除</a></td>
    </tr>

    <tr>
        <td><input type="checkbox"  name="cb" ></td>
        <td>3</td>
        <td>岳不群</td>
        <td>?</td>
        <td><a href="javascript:void(0);">删除</a></td>
    </tr>

</table>
<div>
    <input type="button" id="selectall" value="全选">
    <input type="button" id="unselectall" value="全不选">
    <input type="button" id="selectrev" value="反选">
</div>
</body>
</html>