全选:
实例
<input type="checkbox" id="checkall" onclick="checkall()"><label for="checkall">全选</label> <input type="checkbox" name="item" id="item1"><label for="item1">选项一</label> <input type="checkbox" name="item" id="item2"><label for="item2">选项二</label> <input type="checkbox" name="item" id="item3"><label for="item3">选项三</label> <input type="checkbox" name="item" id="item4"><label for="item4">选项四</label> <input type="checkbox" name="item" id="item5"><label for="item5">选项五</label> <input type="checkbox" name="item" id="item6"><label for="item6">选项六</label> <script type="text/javascript"> //全选 function checkall(){ var check = document.getElementById("checkall"); var item = document.getElementsByName("item"); for(i=0;i<item.length;i++){ if(check.checked){ //如果全选的checked为true,item的checked均为true item[i].checked = true; }else{ item[i].checked = false; } } } </script>
运行实例 »
点击 "运行实例" 按钮查看在线实例
随机颜色:
实例
<button onclick="bg_color()">随机body色</button> <script type="text/javascript"> //随机色 function bg_color(){ var color = '#'; var color2 = Math.floor(Math.random()*10)+''+Math.floor(Math.random()*10); var color3 = Math.floor(Math.random()*10)+''+Math.floor(Math.random()*10); var color4 = Math.floor(Math.random()*10)+''+Math.floor(Math.random()*10); color +=color2+color3+color4; console.log(color); document.getElementsByTagName('body')[0].style.background=color; } </script>
运行实例 »
点击 "运行实例" 按钮查看在线实例
倒计时:
实例
<p>还有 <span style="color: red;font-size: 50px" id="down">5</span> 秒跳转到<a href="https://hewenlu.top">temperature</a></p> <script type="text/javascript"> //倒计时 var downspan = document.getElementById('down'); var i=4; //声明全局变量i, function down(){ if(i>0){ //当i大于0,就把i赋值给span,达到倒计时效果 downspan.innerHTML=i; i--; console.log(i); }else{ //小于0时,就是倒计时完成跳转新链接 window.location.href="https://hewenlu.top/"; } } setInterval("down()",1000); //setInterval 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。 //方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。 </script>
运行实例 »
点击 "运行实例" 按钮查看在线实例