HTML5期末復習-有解無憂

HTML5考的內容比較多、也比較雜，這里重點選幾種經典例子來展示，

加載JSON資料并分頁

題目

參照效果圖設計一個可分頁顯示的表格，表格資料由json檔案提供，
涉及到的顏色值可自行設定，但需要有一定的區分度，不可都用一種顏色，
素材提供了index.html檔案，考生在此檔案上補充內容完成整個頁面效果，
樣式表需要寫在獨立的樣式表檔案中，命名為“index.css”，
要考慮標題行、奇數行、偶數行、滑鼠所在行的效果，其中標題行效果需加粗字體，
腳本可直接寫在html檔案中，

在這里插入圖片描述

解答

首先，我們先把基本的HTML框架搭建出來，

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>加載JSON資料并分頁</title>
</head>
<body>
	<table>
		<tr">
			<td>學號</td>
			<td>姓名</td>
			<td>性別</td>
		</tr>
		<table></table>
	</table>
	<div>
		<button>首頁</button>
		<button>1</button>
		<button>2</button>
		<button>3</button>
		<button>4</button>
		<button>尾頁</button>
	</div>
</body>
</html>

其次，我們給標簽添加樣式，

<table style="margin: 0 auto;">
	<tr style="background-color: gray;font-weight: bold;color: white;">
		<td>學號</td>
		<td>姓名</td>
		<td>性別</td>
	</tr>
	<table id="tbody"></table>
</table>
<div class="pageBar">
	<button onclick="first()">首頁</button>
	<button onclick="first()">1</button>
	<button onclick="second()">2</button>
	<button onclick="third()">3</button>
	<button onclick="forth()">4</button>
	<button onclick="forth()">尾頁</button>
</div>
</body>

完整的css樣式表

table{
	border-collapse:collapse;			
}	
tr,td{
	border:1px solid #6B97B7;
}
td{
	width: 120px;
	text-align: center;
}
#tbody{
	margin: 0 auto;
}
.pageBar{
	margin: 0 auto;
	width: 360px;
	height: 40px;
	margin-top: 10px;
}
.pageBar button{
	margin-top: 5px;
	margin-left: 13px;
	background-color: #6B97B7;
	color: white;
	text-align: center;
	width: 40px;
	height: 30px;
	font-size: 10px;
	border-radius: 3px;
	border: 1px solid palegreen;
}
tr:nth-child(odd){
	background-color: white;
}
tr:nth-child(even){
	background-color: darkcyan;
}
tr:hover{
	cursor: pointer;
	background-color: purple;
}
button:hover{
	cursor: pointer;
	background-color: purple;
}

javascript

let startItem=0;
	$(init());///剛開始顯示5條資料
	function init(){
		$.getJSON('studata.json',function(data){
			let content=data.data;///加載JSON檔案中的data資料
			$('#tbody').html("");//設定當前選擇器的內容為空
			for(let i=0;i<5;i++){
				$('#tbody').append(
				    "<tr>"+
				    "<td>"+content[startItem+i].sid+"</td>"+
				    "<td>"+content[startItem+i].sname+"</td>"+
				    "<td>"+content[startItem+i].sex+"</td>"+
				    "</tr>"
				);
			}
		})
	}
	function first(){startItem=0;init();}
	function second(){startItem=5;init();}
	function third(){startItem=10;init();}
	function forth(){startItem=15;init();}

studata.json檔案

{
	"code":1,
	"count":17,
	"data":[
		{"sid":1,"sname":"江都山","sex":"男"},
		{"sid":2,"sname":"東方麗","sex":"女"},
		{"sid":3,"sname":"黃東升","sex":"男"},
		{"sid":4,"sname":"曲明輝","sex":"男"},
		{"sid":5,"sname":"惠達明","sex":"男"},
		{"sid":6,"sname":"齊琳琳","sex":"女"},
		{"sid":7,"sname":"華曉花","sex":"女"},
		{"sid":8,"sname":"裴俊杰","sex":"男"},
		{"sid":9,"sname":"南明元","sex":"男"},
		{"sid":10,"sname":"漆遠洋","sex":"男"},
		{"sid":11,"sname":"薛蕊","sex":"女"},
		{"sid":12,"sname":"康凱瑞","sex":"男"},
		{"sid":13,"sname":"花軍","sex":"男"},
		{"sid":14,"sname":"顧凱元","sex":"男"},
		{"sid":15,"sname":"洪月嬌","sex":"女"},
		{"sid":16,"sname":"封文","sex":"男"},
		{"sid":17,"sname":"包國君","sex":"男"}
		]	
}

完整的HTML代碼

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>加載JSON資料并分頁</title>
	<link rel="stylesheet" type="text/css" href="./index.css"></link>
	<script src="./jquery-1.12.4.min.js"></script>
</head>
<script>
	let startItem=0;
	$(init());///剛開始顯示5條資料
	function init(){
		$.getJSON('studata.json',function(data){
			let content=data.data;///加載JSON檔案中的data資料
			$('#tbody').html("");//設定當前選擇器的內容為空
			for(let i=0;i<5;i++){
				$('#tbody').append(
				    "<tr>"+
				    "<td>"+content[startItem+i].sid+"</td>"+
				    "<td>"+content[startItem+i].sname+"</td>"+
				    "<td>"+content[startItem+i].sex+"</td>"+
				    "</tr>"
				);
			}
		})
	}
	function first(){startItem=0;init();}
	function second(){startItem=5;init();}
	function third(){startItem=10;init();}
	function forth(){startItem=15;init();}
</script>
<body>
<table style="margin: 0 auto;">
	<tr style="background-color: gray;font-weight: bold;color: white;">
		<td>學號</td>
		<td>姓名</td>
		<td>性別</td>
	</tr>
	<table id="tbody"></table>
</table>
<div class="pageBar">
	<button onclick="first()">首頁</button>
	<button onclick="first()">1</button>
	<button onclick="second()">2</button>
	<button onclick="third()">3</button>
	<button onclick="forth()">4</button>
	<button onclick="forth()">尾頁</button>
</div>
</body>
</html>

最終樣式
在這里插入圖片描述

tab選項卡

題目

參照效果圖設計一個選項卡，在頁面中居中顯示，效果中的顏色、尺寸、文字表述等資訊均可自行設定，
樣式表和腳本可寫在獨立的檔案中，也可直接在HTML檔案中撰寫，
內容部分無需詳細設定，僅顯示對應的選項卡標題即可，

在這里插入圖片描述

解答

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>tab選項卡</title>
<style type="text/css">
*{
	padding:0px;}
ul li {
	line-height: 40px;
	background-color: #0C0;
	text-align: center;
	float: left;
	height: 40px;
	width: 102px;
	border-bottom: none;
	color: #FFF;
	cursor: pointer;
}
#bian li.bli {
	background-color: #09F;
}
#bian2 div {
	background-color: #09F;
	height: 200px;
	width: 612px;
	float:left;
	display:none;
}
ul{
	list-style-type: none;
}
#bian2 div.bdiv {
	display:block;
}
.mid {
	width: 612px;
	margin:auto;
}
</style>
</head>
<body>
<ul class="mid" id="bian">
	<li class="bli">IT互聯網</li>
	<li>金融</li>
	<li>房地產</li>
	<li>汽車</li>
	<li>醫療健康</li>
	<li>消費品</li>
</ul>
<div class="mid" id="bian2">
	<div class="bdiv">IT互聯網</div>
	<div>金融</div>
	<div>房地產</div>
	<div>汽車</div>
	<div>醫療健康</div>
	<div>消費品</div>
</div>
</body>

<script type="text/javascript">
var bians=document.getElementById("bian").getElementsByTagName("li");
var divs=document.getElementById("bian2").getElementsByTagName("div");
for(var i=0;i<bians.length;i++){
	bians[i].onclick=function(){
		change(this);
		}
	}
	function change(obj){
		for(var i=0;i<bians.length;i++){
			if(bians[i]==obj){
				bians[i].className="bli";
				divs[i].className="bdiv";
				}
				else{
					bians[i].className="";
					divs[i].className="";
					}
			}
		}
</script>
</html>

注冊表單

題目

設計一用戶注冊表單，效果如下圖所示，要求用戶名和密碼為必填項，
在js檔案中實作愛好內容的全選、全不選和反選操作，
事件代碼采用動態系結方式，樣式表采用內嵌樣式，
提示：
1.愛好部分的效果，采用如下標簽結構實作：
<fieldset>
        <legend>愛好</legend>
        ……
</fieldset>
2.屬性值的獲取prop

在這里插入圖片描述

解答

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題檔案</title>
<style type="text/css">
.form1 {
	margin:auto;
	height: 500px;
	width: 400px;
}
</style>
</head>
<body>
<form class="form1">
	<p>用戶注冊</p>
    <p> 用戶名 <input type="text" required/></p>
    <p>密 碼 <input type="password" required/></p>
    <p>生 日 <input type="date" required/></p>
<fieldset>
	<legend>愛 好</legend>
    <input type="checkbox" name="love"> 籃球<br>
    <input type="checkbox" name="love"> 旅游<br>
    <input type="checkbox" name="love"> 游泳<br>
    <input type="checkbox" name="love"> 登山<br>
    <input type="checkbox" name="love"> 騎車<br>
    <hr>
    <input type="button" value="全選" onClick="checkall()">
    <input type="button" value="全不選" onClick="checkno()">
    <input type="button" value="反選" onClick="checkother()">
</fieldset>
	<input type="submit" value="提交">
    <input type="reset" value="清除">
</form>
</body>

<script type="text/jscript">
	var x=document.getElementsByName("love");
	function checkall(){
		for(var i=0;i<x.length;i++){
			x[i].checked=true;
			}
		}
	function checkno(){
		for(var i=0;i<x.length;i++){
			x[i].checked=false;
			}
		}
	function checkother(){
		for(var i=0;i<x.length;i++){
			if(x[i].checked==true){
				x[i].checked=false;
				}
				else{
					x[i].checked=true;
					}
			}
		}
</script>
</html>

總結

期末考試要點：
1、樣式表(透明度、邊框、定位)
2、JS腳本：
JSON檔案的讀取
動態生成HTML內容
class的添加和洗掉
滑鼠的事件

大家加油哇！
在這里插入圖片描述

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/390380.html

標籤：其他

上一篇：第二章 JavaScript 基本語法

下一篇：通過案例詳解點擊事件獲取li的index，并切換對應的圖片，排他思想，閉包，bind，let，jquery簡單應用，簡單的tab欄制作-初學者html+css+js練習demo