点击切换图片-javascript

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值