前端入坑纪 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'),// 答案内容包裹的strong
tiLiAs = tiAn.getElementsByTagName('li'),
answers = [],// 设置空数组存放用户的答案
indx = 0;// 答题过程的顺序数
// 初始化，第一题开始
function inital() {
indx = 1;
tiMu.innerText = guessTs["t1"].title;
for (var j = 0; j < 4; j++) {
tiAnStrong[j].innerText = guessTs["t1"]["answer"][j];
}
}
inital();
// 给用户点击答案时，执行的事件
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;// 数组从零开始计数
// console.log(answers);
indx++; // 每次点完加一
tiNum.innerText = indx;// 改变下一题的显示
tiMu.innerText = guessTs["t" + indx].title;// 改变下一题题目的内容
// 改变下一题答案的内容
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)
}
就是这样，答案可以直接前端判断对错，也可以后端来判断再输出答案。安全性而言，后端判断高！
好了，到此，本文告一段落！感谢您的阅读！祝您和您的家人身体健康，阖家幸福！
