智商,自以为是的人总是以此作为自傲的本钱。
听说你很聪明?来来来,是骡子是马溜溜再说。小编前几天在网络上发现了一篇智商测试题目,遂动了动手将他做成了一个小玩具,仅供各位爱好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=description
content="寻溯励志网,以成为优质励志主题服务平台为目标,以治愈每一位暂处心灵低谷的朋友为己任。励志文章、励志语录,九型人格、抑郁症、盖洛普、霍兰德(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>
<div
class="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>