简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > JavaScript第4课：JavaScript案例01_全选/反选、随机色、定时跳转_2019.3.28
Blogger Information
Blog 12
fans 0
comment 0
visits 7421
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
JavaScript第4课：JavaScript案例01_全选/反选、随机色、定时跳转_2019.3.28
风雨中的脚步的博客
Original
600 people have browsed it

<!-- <DOCTYPE html>

<html>

<head>

<mate charset=utf-8>

<title>全选/反选、隔行换色、随机色--20190328</title>

<style>

div{width:500px; margin:0 auto; background:rgba(0,255,255,0.2);}

caption{font-size:22px; margin:10px;}

table{width:500px; height:200px; border:1px solid #ccc; border-collapse:collapse; text-align:center; }

th,tr,td{border:2px solid #ccc;}

div div{text-align:center;}

button{margin:10px; text-align:center;}

</style>

</head>

<body>

<div>

<table>

<caption>数据样式表</caption>

<thead>

<th>序</th>

<th>内容</th>

<th>状态</th>

</thead>

<tbody>

<tr>

<td><input type="checkbox" name='list'></td>

<td>我是内容一</td>

<td>已读</td>

</tr>

<tr>

<td><input type="checkbox" name='list'></td>

<td>我是内容二</td>

<td>已读</td>

</tr>

<tr>

<td><input type="checkbox" name='list'></td>

<td>我是内容三</td>

<td>已读</td>

</tr>

<tr>

<td><input type="checkbox" name='list'></td>

<td>我是内容四</td>

<td>已读</td>

</tr>

<tr>

<td><input type="checkbox" name='list'></td>

<td>我是内容五</td>

<td>已读</td>

</tr>

</tbody>

</table>

<div>

<button onclick='checkAll()'>全选</button> 

<button onclick='checkOut()'>反选</button>

</div>

</div>

<button onclick='bg()'>生成随机色</button>

<script>

function checkAll(){   //声明全选函数

var objlist=document.getElementsByName('list');  //存储所有输入框

for(var i=0; i<objlist.length; i++){   //判断输入框的数量

objlist[i].checked=true;   //当触发时全部改为选中

}

}

function checkOut(){   //声明反选函数

var objlist=document.getElementsByName('list');  //存储所有输入框

for(var i=0; i<objlist.length; i++){   //判断输入框的数量

if(objlist[i].checked){           //如果为选中

objlist[i].checked=false;    //则取消选中

}else{                          //否则选中

objlist[i].checked=true;

}

}

}


function bgColor(){   //声明隔行换色函数

var trList=document.getElementsByTagName('tbody')[0].getElementsByTagName('tr');  //获取第一个tbody中的所有行

for(i=0; i<trList.length; i++){

if(i%2){          //如果整除则

trList[i].style.background='rgba(255,0,255,0.3)';  //一种颜色

}else{                                                 //否则  

trList[i].style.background='rgba(255,255,0,0.3)';  //另一种颜色

}

}

}

bgColor();


// function bg(){  //字符串拼接方式改变颜色值

//  var a='#'

//  var r=Math.floor(Math.random()*10).toString()+Math.floor(Math.random()*10);

//  var g=Math.floor(Math.random()*10).toString()+Math.floor(Math.random()*10);

//  var b=Math.floor(Math.random()*10).toString()+Math.floor(Math.random()*10);

//  a+=r+g+b

//  document.getElementsByTagName('body')[0].style.background=a

// }


function bg(){  //声明随机色函数

var a='#';  //获取颜色值符号

var b=Math.floor(Math.random()*1000000).toString();  //获取随机数将其变为整数并转换为字符串

a+=b;

document.getElementsByTagName('body')[0].style.background=a;  //获取背景并改变颜色样式

}

</script>

</body>

</html> -->


<!-- <!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>倒计时</title>

<style>

div{margin:100px auto; text-align:center;}

p{font-size:22px;}

span{font-size:28px; color:red;}

</style>

</head>

<body>

<div><p>剩余<span> 30 </span>秒，即将跳转php中文网</p></div>

<script>

var Espan=document.getElementsByTagName('span')[0];  //获取数字时间

var i=29;          //给初值

function fn(){        //声明倒计时函数

if(i>0){               //判断倒计时次数

Espan.innerHTML=' '+i+' '; //大于0则更新数值

i--;               //更新数字时间

}else{

window.location.href='http://www.php.cn/'  //否则跳转页面

}

}

setInterval('fn()',1000)   //定时刷新页面

</script>

</body>

</html> -->


Correction status：Uncorrected

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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！