Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 70个美女任你挑选
Blogger Information
Blog 10
fans 0
comment 0
visits 7983
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
70个美女任你挑选
php还在初学
Original
1528 people have browsed it

本周学习了js课程，有点难。下面制作第一个小案例,复习下dom的创建和修改。
实现效果图如下：

  1. <!DOCTYPE html>
  2. <html lang="">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>美女任你选</title>
  7.     <style>
  8.         div{
  9.             padding: 2em;
  10.             display:flex;
  11.             flex-flow:row wrap;
  12.             justify-content:flex-start;
  13.             align-items: center;
  14.             align-content: flex-start;
  15.         }
  16.         img{
  17.            margin:1em;
  18.             width: 10em;
  19.             height: 10em;
  20.             border-radius: 1em;
  21.            opacity: 0.6;
  22.         }
  23.         img:hover{
  24. opacity: 1;
  25. box-shadow: 0em 0em 0.5em black ;
  26.         }
  27.     </style>
  28. </head>
  30. <body>
  32.         <label for="girls">请输入你一生需要的美女数量:</label>
  33.       <input type="text" id="girls" name="girls" placeholder="1-70之间,太多了伤身体" value="8" />
  34.       <button>任你挑选</button>
  35.       <div></div>
  36.       <script>
  37.           const bt=document.querySelector("button")
  39.         //   console.log(bt);
  40.         bt.addEventListener("click",girls,false);
  41. function girls(ev)
  42. {
  43.    const  num=document.querySelector("input").value;
  44.      if(num>70)
  45.      {
  46.          alert("老铁，太伤身体了吧！！！")}
  47.      else
  48.      {
  49.         document.querySelector("div").innerHTML="";
  50.       for(let i=0;i<num;i++)
  51.       {
  52.           const pic=document.createElement("img");
  53.        pic.src="./images/img-" + (i+1)+".jpg";
  55.           console.log(pic);
  57.           document.querySelector("div").appendChild(pic);
  59.      }
  60.      }
  61. }
  62.       </script>
  63. </body>
  64. </html>
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：有点意思
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post