第一次亲自和后台联合开发,还是值得纪念的。想想看到数据输出到页面的一瞬间,都有点激动呢!废话不说,上例子。
接口来自“某接口数据平台”https://www.jisuapi.com/api/driverexam/ 我真的不是打广告的..
页面包含题目部分,当你做出选择时,会显示答案和解释部分。其中这两部分除了父级中间代码都被注释掉了。因为这个要用js动态实现呦~但是前提要把注释的样式写好啦~这样页面生成的时候才会有样式呢!
js都是用框架jquery写的呢~小女不才,会的少哈~
//题目
<dl class="test-item">
<!--<dt>
<span class="ti-symbol">单选题</span>
<p class="test-title">
这个标志什么含义?
</p>![](../../image/project/ti.jpg)
</dt>
<dd >
<span class="option">A</span>
<span class="option-con">施工路段绕行</span>
</dd>
<dd >
<span class="option">B</span>
<span class="option-con">双向交通</span>
</dd>
<dd>
<span class="option">C</span>
<span class="option-con">注意危险</span>
</dd>
<dd >
<span class="option">D</span>
<span class="option-con">左右绕行</span>
</dd>-->
</dl>
//判断选择是否正确,及显示答案
<div class="test-explain">
<!--<p class="answer-right">
回答正确
</p>
<p class="answer-wrong">
回答错误
</p>
<p class="correct-answer">
正确答案:B
</p>
<p class="explain">
解释:
《道路交通安全法》第二十一条规定:驾驶人驾驶机动车上道路行驶前,应当对机动车的安全技术性能进行认真检查;不得驾驶安全设施不全或者机件不符合技术标准等具有安全隐患的机动车。
</p>
<p class="chapter">
出题章节:安全行车常识
</p>-->
</div>
css就不放了。浪费空间啊~
请求的url是官方给的例子:
http://api.jisuapi.com/driverexam/query?appkey=yourappkey&type=C1&subject=1&pagesize=1&pagenum=1&sort=rand
考过驾照的童鞋都知道,C1,subject=1,科目一啦~
还是上图吧,我说的废话连篇。。。