点击切换图片-javascript

qq_41790844

已于 2023-10-16 14:23:56 修改

阅读量178

点赞数

文章标签： javascript 前端 java

于 2023-10-15 13:51:45 首次发布

本文链接：https://blog.csdn.net/qq_41790844/article/details/133841919

版权

<img src="../image/image1/banner_1.jpg" id="deng" >
<script>
  var deng= document.getElementById("deng");
  var flag=false;
  deng.onclick=function(){
    if(flag){
      deng.src="../image/image1/banner_1.jpg";
      flag=false;
    }else{deng.src="../image/image1/banner_3.jpg";flag=true;}

  }
</script>

轮播图

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script>
    /**
     *1.在页面上使用img标签展示图片，
     *2.定义一个方法，修改图片对象的链接
     *3.定义一个定时器，每个三秒调用一次方法
     *4.
     *
     */
    //修改图片链接
    var i=1;
    function fun(){
      i++;
      i=i>3?1:i;

    var img=  document.getElementById("img")
    img.src="../image/image1/banner_"+i+".jpg";
    }
    //定义计时器
    setInterval(fun,3000);
  </script>
</head>
<body>
      <img src="../image/image1/banner_1.jpg" width="100%" id="img">
</body>
</html>

动态表格

<!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 id="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>
    /**
     * 添加
     *    给添加按钮绑定事件
     *    获取文本框内容
     *    创建td，设置td文本为文本框的内容
     *    创建tr
     *    将td添加到tr中
     *    将tr田间道table中
     */
    var btn_add=document.getElementById("btn_add").onclick=function (){
     var id= document.getElementById("id").value;
     var name= document.getElementById("name").value;
     var gender= document.getElementById("gender").value;

      //创建td
      var td_id = document.createElement("td");
      var text_id = document.createTextNode(id);
      td_id.appendChild(text_id);


      var td_name = document.createElement("td");
      var text_name = document.createTextNode(name);
      td_name.appendChild(text_name);


      var td_gender = document.createElement("td");
      var text_gender = document.createTextNode(gender);
      td_gender.appendChild(text_gender);

      var td_a=document.createElement("td");
      var ele_a=document.createElement("a");
      ele_a.setAttribute("href", "javascript:void(0);");
     var text= document.createTextNode("删除");
     ele_a.appendChild(text);
     td_a.appendChild(ele_a);

    var tr=document.createElement("tr")
      tr.appendChild(td_id);
      tr.appendChild(td_name);
      tr.appendChild(td_gender);
      tr.appendChild(td_a);



      var table = document.getElementsByTagName("table")[0];
      table.appendChild(tr);
    }

    /**
     * 删除：
     *  确定点击的是哪一个超链接
     *获取父链接，移掉子节点
     */

    function deltr( obj){
      var table = obj.parentNode.parentNode.parentNode;
      var tr = obj.parentNode.parentNode;
      table.removeChild(tr);
    }
  </script>
</body>
</html>