js练习题-CSDN博客

本文链接：https://blog.csdn.net/qq_43476381/article/details/126380100

1、每次点击出现一行背景是红色的黑字“哈哈哈”

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body >
<button  onclick="d()">打我啊</button>
<div id="but"></div>
</body>
</html>
<script>

  function d() {
    var but=document.getElementById("but");
    var div=document.createElement("div");
    div.append(document.createTextNode("哈哈哈"));
    but.append(div);
    div.style.width="100%";
    div.style.backgroundColor="red";
  }
  //interText
  //interHTML
  //value
  /*value是获取值；对非块状元素使用*/
  /*inner兄弟是获取内容，对块状元素使用*/
  /*innerHTML是会解析HTML*/
  /*innerText不会解析*/

</script>

2、输入用户名密码，鼠标移出后校检长度，不符合规则的展示红色提示

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="q" style="color: red"></div>
用户名:<input id="name" onmouseout="moveOut()" type="text">
密码：<input type="password">
</body>
</html>
<script>
  // function moveOut(){
  //   var patton=/\w{6,}/
  //     var name = document.getElementById("name");
  //   if(!patton.test(name.value)){
  //       document.getElementById("q").innerText="长度不够6位";
  //   }else {
  //       document.getElementById("q").innerText="";
  //   }
  //
  // }
  function moveOut(){
      var name=document.getElementById("name");
      if(name.value.length<6){
          document.getElementById("q").innerText="长度不够6位";
      }else{
          document.getElementById("q").innerText="";
      }
  }
</script>

3，点击图片，图片之间切换

这里可以把图片起名的时候进行规则排序，然后用拼接展示，就不用数组了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img id="iq" onclick="t()" src="../images/123.webp" height="500" width="800"/>
</body>
</html>
<script>
  function t(){
    var arr=new Array("../images/123.webp","../images/1234.jpeg","../images/3457.webp","../images/女孩.jpeg","../images/猫.jpg","../images/西瓜，手.webp");
   var iq=document.getElementById("iq");
    iq.src=arr[arr.indexOf(iq.getAttribute("src"))+1];
    if (arr.indexOf(iq.getAttribute("src"))==arr.length){
      iq.src=arr[0];
    }
  }
</script>

4、写一个table表格，有一个点击事件，全选全不选

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table id="t" border="2px,solid,black">
  <th>
    <td>
      <button>添加</button>
      <button>删除</button>
    </td>
  </th>
  <tr>
    <td name="u" onclick="f()"></td>
    <td>编号</td>
    <td>姓名</td>
    <td>年龄</td>
  </tr>
  <tr>
    <td>
        <input name="u" type="checkbox">
    </td>
    <td>1</td>
    <td>张三</td>
    <td>22</td>
  </tr>
  <tr>
    <td>
      <input name="u" type="checkbox">
    </td>
    <td>2</td>
    <td>李四</td>
    <td>25</td>
  </tr>
  <tr>
    <td>
      <input name="u" type="checkbox">
    </td>
    <td>3</td>
    <td>王五</td>
    <td>27</td>
  </tr>
  <tr>
    <td>
      <input name="u"  type="checkbox">
    </td>
    <td>4</td>
    <td>赵六</td>
    <td>29</td>
  </tr>
</table>
</body>
</html>
<script>
function f(){
  var checkboxs=document.getElementsByName("u");
  for (var i=0;i<checkboxs.length;i++) {
    if (checkboxs[i].checked) {
      checkboxs[i].checked = false;
    } else {
      checkboxs[i].checked = true;
    }
  }
}
</script>

5、根据前面的选择框更新后面的选择框

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<select id="cs" onchange="f()">
  <option value="1">北京</option>
  <option value="2">上海</option>
  <option value="3">吉林</option>
</select>
<select id="mr"></select>
</body>
</html>
<script>
  function f(){
    var options=[["海淀","朝阳","2"],["浦东","黄泉","@3"],
                    ["净月","绿园","23"]];
    var sc = document.getElementById("cs");
    var mr=document.getElementById("mr");
      mr.length=1;
    for (var i=0;i<sc.length;i++){
     var wb= document.createTextNode(options[sc.value][i])
      var option=  document.createElement("option")
       option.append(wb);
     mr.append(option);

    }
  }
</script>

6、空白页面，每隔几S自动弹出来图片，然后自动弹走，在弹出来，在弹走~~~~~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body onload="f()">
<img id="img" style="display: none" src="../images/123.webp"/>
</body>
</html>
<script>
  function f() {
    var i=2000;
      var img = document.getElementById("img");
      var id = setInterval(frame, i+=i);
      var sj = setInterval(frames, i+=i);

      function frame() {
       // clearInterval(id);
        img.style.display = "block";
      }

      function frames() {
        //clearInterval(sj);
        img.style.display = "none";

      }
  }
</script>