前端入坑紀 41
最近做了個單一的答題手機頁咙边，分享走一個！
OK劫哼，first things first叮趴！ github項目地址
真實項目截圖
HTML 結構
<div class="mainWrp">
<div class="tiBd">
<div class="mainBos">
<h3>第<span id="tiNum">1</span>題</h3>
<div class="tiWrp">
<p id="tiMu">目前你有好多的雞和好多的蛋，這樣子权烧，那么你會先去吃哪個眯亦？</p>
</div>
<div class="ansWrp">
<ul id="tiAn">
<li>
<a href="javascript:;">
<p><span>A</span>.<strong>先吃雞</strong></p>
</a>
</li>
<li>
<a href="javascript:;">
<p><span>B</span>.<strong>先吃蛋</strong></p>
</a>
</li>
<li>
<a href="javascript:;">
<p><span>C</span>.<strong>全吃</strong></p>
</a>
</li>
<li>
<a href="javascript:;">
<p><span>D</span>.<strong>先吃你妹啊</strong></p>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
div.tiBd里面包裹了圖片2-1.png，撐開了它般码，然后里面的div.mainBos妻率，也就是整個題目的html結構都是相對于div.tiBd，來絕對定位板祝。之所以這么做宫静，而不用背景，是為了不讓2-1的大小比例變形，而是正常的展示孤里。當然這樣的前提是伏伯，題目不長，答案也不長捌袜。
答案的背景是會隨著它的li大小變形的说搅。
CSS 結構
html,
body {
background-color: #9DD1FF;
height: 100%;
}
.mainWrp {
padding-top: 5%;
height: 100%;
box-sizing: border-box;
background-image: url(wrap/img/2b.png);
background-repeat: no-repeat;
background-position: center 100%;
background-size: 100% auto
}
.tiBd {
margin: 2%;
position: relative;
}
.ansWrp li {
margin: 10px 0;
line-height: 36px;
}
.ansWrp li a {
padding: 6px;
display: inline-block;
color: #fff;
width: 70%;
background-image: url(wrap/img/2-2.png);
background-repeat: no-repeat;
background-position: center 100%;
background-size: 100% 100%
}
.ansWrp li a:active {
background-image: url(wrap/img/2-2-1.png);
}
.ansWrp li a p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ansWrp li a strong {
margin-left: 5px;
}
.mainBos {
width: 100%;
position: absolute;
left: 0;
top: 0;
}
.mainBos h3 {
line-height: 45px;
text-align: center;
font-size: 22px;
color: #AD6303;
background-image: url(wrap/img/2-1-1.png);
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: auto 100%
}
.tiWrp {
line-height: 26px;
font-size: 16px;
margin: 20px 15%;
width: 70%;
font-weight: bold;
color: #333;
}
.ansWrp {
padding-top: 3%
}
.ansWrp li {
color: #fff;
font-size: 16px;
text-align: center;
}
這里我引用了外部的一個重置樣式的rest.css，去github源文件可以查看到虏等。一個小技巧： 當 html,body 都設置 height: 100%;那么div.mainWrp的 height: 100%時就可以和視窗一樣高了弄唧。
JS 結構
// 獲取要用到的元素
var tiNum = document.getElementById('tiNum'),
tiMu = document.getElementById('tiMu'),
tiAn = document.getElementById('tiAn'),
tiAnStrong = tiAn.getElementsByTagName('strong'),// 答案內(nèi)容包裹的strong
tiLiAs = tiAn.getElementsByTagName('li'),
answers = [],// 設置空數(shù)組存放用戶的答案
indx = 0;// 答題過程的順序數(shù)
// 初始化，第一題開始
function inital() {
indx = 1;
tiMu.innerText = guessTs["t1"].title;
for (var j = 0; j < 4; j++) {
tiAnStrong[j].innerText = guessTs["t1"]["answer"][j];
}
}
inital();
// 給用戶點擊答案時霍衫，執(zhí)行的事件
for (var i = 0; i < 4; i++) {
! function(i) {
tiLiAs[i].onclick = function() {
var answer = this.getElementsByTagName('span')[0].innerText;// 獲取點擊時的答案（A?B?C?D）
// 還沒到最后一題時的操作
if (indx < 15) {
answers[indx - 1] = answer;// 數(shù)組從零開始計數(shù)
// console.log(answers);
indx++; // 每次點完加一
tiNum.innerText = indx;// 改變下一題的顯示
tiMu.innerText = guessTs["t" + indx].title;// 改變下一題題目的內(nèi)容
// 改變下一題答案的內(nèi)容
for (var j = 0; j < 4; j++) {
tiAnStrong[j].innerText = guessTs["t" + indx]["answer"][j];
}
} else if (indx == 15) {
answers[indx - 1] = answer;
// 答完最后一道題目候引，輸出答案，跳轉結果
console.log(answers);
// location.href = ""
}
}
}(i)
}
就是這樣敦跌，答案可以直接前端判斷對錯澄干，也可以后端來判斷再輸出答案。安全性而言峰髓，后端判斷高傻寂！
好了，到此携兵，本文告一段落！感謝您的閱讀搂誉！祝您和您的家人身體健康徐紧，闔家幸福！
