Blogger Information
Blog 19
fans 0
comment 0
visits 13308
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
JS倒计时随机色全选反选作业-2019年3月28号
倪偌卟離
Original
664 people have browsed it

实例

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

运行实例 »

点击 "运行实例" 按钮查看在线实例


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