// 隔行换色、全选、反选
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.main{width: 800px;margin: 50px auto;}
table{
width: 800px;border: 1px solid #ccc;
border-collapse: collapse;/*边框折叠*/
}
td{border: 1px solid #ccc; text-align: center;}
th{border: 1px solid #ccc;}
</style>
</head>
<body>
<div class="main">
<p>
<button onclick="checkAll()">全选</button>
<button onclick="checkOut()">反选</button>
</p>
<table>
<thead>
<tr >
<th colspan="2">标题 </th>
<th> 状态</th>
</tr>
</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>
<script type="text/javascript">
// 隔行换色
function bgColor(){
var trlist=document.getElementsByTagName('tbody')[0].getElementsByTagName('tr');
for (var i =0; i <trlist.length; i++) {
if (i%2) {
trlist[i].style.background="#d0d8e8";
}else{
trlist[i].style.background="#f2f2f2";
}
}
}
bgColor();
// 全选
function checkAll(){
var objlist=document.getElementsByName('list');
for(var i=0; i<objlist.length;i++){
objlist[i].checked=true; }
}
// 选反
function checkOut(){
var objlist=document.getElementsByTagName('input');
for(var i=0;i<objlist.length;i++){
if(objlist[i].checked){
objlist[i].checked=false;
}else{
objlist[i].checked=true;
}
}
}
</script>
</body>
</html>
//随机换色
<!DOCTYPE html>
<html>
<head>
<title>math</title>
</head>
<body>
<button onclick="bg_Color()" > 随机产生背景色</button>
<script type="text/javascript">
//执行算术任务
// round()四舍五入,可以返回一个0·1的随机数
// var a=Math.round(2.6);
// document.write(a+'<br>');
// // random可以返回一个0·1的随机数
// document.write(Math.random())
// // floor() 返回小于等于x最大整数
// var b=Math.floor(3.8)
// document.write(b+'<br>');
// //取1-10随机数
// var c=Math.floor((Math.random()*10)+1);
// document.write(c+'<br>');
// //取1-100随机数
// var d=Math.floor((Math.random()*100)+1);
// document.write(d+'<br>');
function bg_Color(){
var bg="#";//背景色 字符串+数字=字符串
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);
bg+=r+g+b;
document.getElementsByTagName('body')[0].style.background=bg;
}
</script>
</body>
</html>
//倒计时
<!DOCTYPE html>
<!-- 知识点:
隔行换色
全选
Math对象(随即色)
日期对象(倒计时) -->
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
.main{
width: 800px;
margin: 50px auto;
}
table{
width: 800px;
border: 1px solid #ccc;
border-collapse: collapse;//边框折叠
}
td{
border: 1px solid #ccc;
text-align: center;
}
</style>
</head>
<body>
<div>
<p>
<button onclick="checkAll()">全选</button>
<button onclick="checkOut()">反选</button>
</p>
<table>
<!-- 前端布局不要用table 影响优化 -->
<thead>
<tr>
<th colspan="2">标题</th>
<th>状态</th>
</tr>
</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>
<script type="text/javascript">
// 隔行换色
// 原理:将表格中的奇数行和偶数行分别赋予不同的背景色
function bgColor(){
var trlist=document.getElementsByTagName('tbody')[0].getElementsByTagName('tr');
for(var i=0;i<trlist.length;i++){
if(i%2){
trlist[i].style.background="#d0d8e8";
}else{
trlist[i].style.background="#f2f2f2";
}
}
}
bgColor();
// 全选 将页面中的所有多选框[选择状态]全部变成[已选状态]
function checkAll(){
//获取多选框集合
var objList=document.getElementsByName('list');
for (var i = 0; i < objList.length; i++) {
objList[i].checked=true;
}
}
// 反选
function checkOut(){
//获取多选框集合
var objList=document.getElementsByTagName('input');
for (var i = 0; i < objList.length; i++) {
if(objList[i].checked){
objList[i].checked=false;
}else {
objList[i].checked=true;
}
}
}
</script>
</body>
</html>