<!-- <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> -->