70个美女任你挑选 -

本周学习了js课程，有点难。下面制作第一个小案例,复习下dom的创建和修改。
实现效果图如下：
<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>美女任你选</title>
    <style>
        div{
            padding: 2em;
            display:flex;
            flex-flow:row wrap;
            justify-content:flex-start;
            align-items: center;
            align-content: flex-start;
        }
        img{
           margin:1em;
            width: 10em;
            height: 10em;
            border-radius: 1em;
           opacity: 0.6;
        }
        img:hover{
opacity: 1;
box-shadow: 0em 0em 0.5em black ;
        }
    </style>
</head>
<body>
        <label for="girls">请输入你一生需要的美女数量:</label>
      <input type="text" id="girls" name="girls" placeholder="1-70之间,太多了伤身体" value="8" />
      <button>任你挑选</button>
      <div></div>
      <script>
          const bt=document.querySelector("button")
        //   console.log(bt);
        bt.addEventListener("click",girls,false);
function girls(ev)
{
   const  num=document.querySelector("input").value;
     if(num>70)
     {
         alert("老铁，太伤身体了吧！！！")}
     else
     {
        document.querySelector("div").innerHTML="";
      for(let i=0;i<num;i++)
      {
          const pic=document.createElement("img");
       pic.src="./images/img-" + (i+1)+".jpg";
          console.log(pic);
          document.querySelector("div").appendChild(pic);
     }
     }
}
      </script>
</body>
</html>