实例
<!DOCTYPE html>
<html>
<head>
<title>轮播图</title>
<meta charset="utf-8">
<style type="text/css">
*{margin:0;padding:0;}
.main{
width:1600px;
height:1200px;
margin:20px auto;
/*background: #ccc;*/
}
.main table{
border-collapse:collapse;
margin:0 auto;
}
.main th{
border:1px solid #ccc;
width: 200px;
height: 30px;
}
tbody th{
font-size: 16px;
font-weight:200;
}
.bg{
width: 100px
height:30px;
margin:20px auto;
text-align: center;
}
.jump{
width: 300px;
height: 30px;
margin:20px auto;
text-align: center;
}
.jump p{
letter-spacing:2px;
}
.jump span{
color:red;
font-size:30px;
}
a{
text-decoration:none;
}
</style>
</head>
<body>
<div class="main">
<div class="jump">
<p>还剩<span>5</span>秒页面将跳转至：<a href="">首页</a></p>
</div>
<div class="bg">
<button onclick="bg_Color()">点击切换背景颜色</button>
</div>
<table>
<thead>
<tr>
<th><button onclick="choice()">全选</button> <button onclick="selection()"> 反选</button></th>
<th>代码</th>
<th>作用</th>
</tr>
</thead>
<tbody>
<tr>
<th><input type="checkbox" name="list"></th>
<th>document.write</th>
<th>打印到页面显示</th>
</tr>
<tr>
<th><input type="checkbox" name="list"></th>
<th>alert</th>
<th>弹窗显示</th>
</tr>
<tr>
<th><input type="checkbox" name="list"></th>
<th>console.log</th>
<th>调试使用</th>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
//全选
function choice(){
var thlist=document.getElementsByName('list');
for(i=0;i<thlist.length;i++){
thlist[i].checked=true;
}
}
//反选
function selection(){
var thlist=document.getElementsByName('list');
for(i=0;i<thlist.length;i++){
if(thlist[i].checked){
thlist[i].checked=false;
}else{
thlist[i].checked=true;
}
}
}
function bg_Color(){
var back_Ground =document.getElementsByTagName('body')[0];
var a='#';
var b=Math.floor(Math.random()*10).toString()+Math.floor(Math.random()*10)+Math.floor(Math.random()*10)+Math.floor(Math.random()*10)+Math.floor(Math.random()*10)+Math.floor(Math.random()*10);
back_Ground.style.background=a+b;
}
var i=4;
function jump(){
var j_Span=document.getElementsByClassName('jump')[0].getElementsByTagName('span');
if(i>0){
j_Span[0].innerHTML=i;
i--;
}else{
window.location.href="";
}
}
setInterval("jump()",1000);
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例