收藏
天蓬老师批改状态：合格
老师批语：有点意思
本周学习了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>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
