php和vue实现智商在线测试题
生活随笔
收集整理的這篇文章主要介紹了
php和vue实现智商在线测试题
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
智商，自以為是的人總是以此作為自傲的本錢。
聽說你很聰明？來來來，是騾子是馬溜溜再說。小編前幾天在網絡上發現了一篇智商測試題目，遂動了動手將他做成了一個小玩具，僅供各位愛好vue、layui的同學娛樂。
如果你想要試一試在線版本，看這里：
https://www.yixzm.cn/iq/iq60.html
開發技術分析：
前端：layui + vue + axios + font-awesome + webpack
后端：thinkphp6 + mariadb + linux + php7 + apache
界面如下：
想要在自己站上或公眾號使用的同學可以直接ifream方式使用。
iframe 源碼示例：
<html><head><title>智商測試</title><meta name=keywords content="智商測試."><meta name=description content="智商測試。"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /><meta http-equiv='Content-Type' content='text/html; charset=utf-8' /><meta http-equiv='description' content='www.xunsu.online' /><style>body {margin: 0;}#xsen {width: 100%;height: 100%;border: none;}#vendor {position: fixed;bottom: 0;right: 0;width: 6.66rem;}</style> </head><body><iframe src="http://www.xunsu.online/qa/iq/exam/paper/iq60" id="xsen"></iframe><img src="#" id="vendor" alt="廣告位招商"> </body></html>注意：
前車之鑒，本測試沒有開源，需要請鏈接使用。
原因是小編實在是沒時間給各路朋友調代碼，見諒。
智商測試 歡迎頁HTML源碼分析
頁頭，引入各前端開源框架和UI庫
<!DOCTYPE html> <html lang='zh-cn'><head><title>國際標準智商測試題開始測試</title><!-- Chasing Dreams and Encouragement Network --><meta name=keywords content="勵志網, 尋溯勵志網, 夢想, 勵志, 激勵, 九型人格, 抑郁癥, 在線測試."><meta name=descriptioncontent="尋溯勵志網，以成為優質勵志主題服務平臺為目標，以治愈每一位暫處心靈低谷的朋友為己任。勵志文章、勵志語錄，九型人格、抑郁癥、蓋洛普、霍蘭德（MBTI）免費在線測試。"><meta http-equiv='Content-Type' content='text/html; charset=utf-8' /><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /><meta http-equiv='description' content='www.xunsu.online' /><meta name="baidu-site-verification" content="usAt5Y5BE2" /><link rel="stylesheet" type="text/css" href="/lib/layui/css/layui.css"><link rel="stylesheet" type="text/css" href="/d/iq-welcom-iq60.css"><link rel="stylesheet" type="text/css" href="/d/comment.css"><link rel="stylesheet" href="/lib/font-awesome/css/font-awesome.min.css"><script src="/lib/vue/vue.min.js"></script> </head>body，歡迎頁展示主體內容
<body><div class="layui-container"><div class="layui-row"><blockquote class="layui-elem-quote layui-quote-nm logo-block"><div class="logo-jxrg-item">International standard IQ test<hr class="layui-bg-gray">國際標準智商測試題</div></blockquote><divclass="layui-col-xs10 layui-col-sm8 layui-col-md6 layui-col-xs-offset1 layui-col-sm-offset2 layui-col-md-offset3"><fieldset class="layui-elem-field"><legend>簡介</legend><div class="layui-field-box content-jxrg">智商，即智力的商數，是用來衡量一個人智力高低的標準。...<br /><hr class="layui-bg-gray">本系統共60題，完成測試大約需要45分鐘。<br /><hr class="layui-bg-gray"><strong>測試前言</strong><br />得分140以上是天才！</div></fieldset><table><tr><td class="layui-bg-red">￥89.99，限時免費！</td><td>   </td><td>已有 24 人參與測試！</td></tr></table><hr class="layui-bg-gray"><div id="jxrg"><a type="button" class="layui-btn layui-btn-normal layui-btn-fluid" href="/c/iq/iq60/index.html">開始測試</a></div><hr class="layui-bg-gray"><fieldset class="layui-elem-field"><legend>國際標準智商測試</legend><div class="layui-field-box align-center"><img src="/qa/index/qrcode?target=/iq/iq60" /><br />分享二維碼，讓朋友們一起來！<a href="/qa" class="layui-badge layui-bg-blue"><i class="fa fa-hand-pointer-o" aria-hidden="true"></i><span>更多...<span></a></div></fieldset><hr class="layui-bg-gray"></div></div> </div>評論區，只支持微信，這里是評論應用vue框架的組件入口
<div id="xs-comment"><xs-comment-index></xs-comment-index> </div>footer，一些支持類庫，比如layui支持庫、axios支持庫、百度訪問統計等
<script src="/lib/layui/layui.js"></script> <script src="/lib/axios/axios.min.js"></script> <script src="/lib/visit/baidu.js"></script><script src="/d/iq-welcom-iq60.js"></script> <script src="/d/comment.js"></script>總結
以上是生活随笔為你收集整理的php和vue实现智商在线测试题的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： C语言 文件
- 下一篇： php varbinary,php –