js复选框和相册选择
作者:互联网
js复选框,全选,全不选,反选
<body> <form action=""> <p><input type="checkbox" name="" id="">西游记</p> <p><input type="checkbox" name="" id="">水浒传</p> <p><input type="checkbox" name="" id="">红楼梦</p> <p><input type="checkbox" name="" id="">三国演义</p> </form> <button onclick="getAll(0)">全选</button> <button onclick="getAll(1)">全不选</button> <button onclick="getAll(2)">反选</button> <script type="text/javascript"> // 获取input let input = document.getElementsByTagName('input'); // 获取button let but = document.getElementsByTagName('button'); // 封装一个函数 function getAll(num){ // 遍历每一个input for(let i=0;i<input.length;i++){ // 如果num等于0就是第一个button的checked全部生效 if(num==0){ input[i].checked = true; // 如果num等于1就是第一个button的checked全部不生效 }else if(num == 1){ input[i].checked = false; // 当checked为true时就等于false;否则相反 }else{ input[i].checked = !input[i].checked; } } } </script> </body>
相册选择,当我们的鼠标移动到哪一个图片上面就把当前图片放大
<style> .big{ width: 415px; height: 400px; } .small>img{ width: 100px; height: 100px; } </style> <body> <div> <img src="./ju.jpg" alt="" class="big"> </div> <div class="small"> <img src="./ju.jpg" alt=""> <img src="./ying.jpg" alt=""> <img src="./hu.jpg" alt=""> <img src="./bu.jpg" alt=""> </div> <script type="text/javascript"> // 获取所有的img let imgs = document.getElementsByTagName('img'); // 遍历img,出第二个开始,因为第一个img是我们需要改变的,所以i=1 for(let i=1;i<imgs.length;i++){ // 当鼠标移动到哪一个img上面,就触发函数,改变当前src imgs[i].onmouseover = function(){ imgs[0].src = this.src; } } </script> </body>
标签:document,相册,img,getElementsByTagName,100px,js,let,input,复选框 来源: https://www.cnblogs.com/Privatexaio/p/15207702.html