页面变色及全选反选
实例
<!DOCTYPE html>
<html>
<head>
<title>hello world!</title>
<style type="text/css">
div{width: 600px;margin: 100px auto;}
table{width: 600px;border: 1px solid black;border-collapse: collapse;}
td{border: 1px solid black;text-align: center;}
</style>
</head>
<body>
<button onclick="bg_Color()">点击变色</button>
<div>
<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="pink";
}else{
trList[i].style.background="orange";
}
}
}
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.getElementsByName("list");
for(var i=0;i<objList.length;i++){
if(objList[i].checked){
objList[i].checked=false;
}else{
objList[i].checked=true;
}
}
}
function bg_Color(){
var bg="#";
var r=Math.floor(Math.random()*100).toString();
var b=Math.floor(Math.random()*100).toString();
var g=Math.floor(Math.random()*100).toString();
bg+=r+b+g;
document.getElementsByTagName("body")[0].style.background=bg;
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
页面倒计时跳转
实例
<!DOCTYPE html>
<html>
<head>
<title>hello world!</title>
<style type="text/css">
p{width: 300px;margin:100px auto;}
span{width: 50px;height: 50px;font-size: 50px;color: red;line-height: 50px;text-align: center;display: inline-block;}
</style>
</head>
<body>
<p>还剩<span>5</span>秒跳转至<a href="https://www.baidu.com">百度</a></p>
<script type="text/javascript">
var Espan=document.getElementsByTagName('span')[0];
var i=4;
function fn(){
if(i>0){
Espan.innerHTML=i;
i--;
}else{
window.location.href="https://www.baidu.com";
}
}
setInterval("fn()",1000)
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例