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> &nbsp </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实现智商在线测试题相关推荐

vue canvas插件_基于vue.js 制作在线桌椅定制选择交互特效源码
码农那点事儿关注我们,一起学习进步基于vue.js写的在线桌子椅子垫子选择拼成的自己理想的书桌椅图像,这是一款交互式的课桌椅在线定制选择功能.非常不错,感兴趣的朋友前来下载使用. 下载源码(提取码 ...
js-xlsx vue导入excel在线预览
js-xlsx vue导入excel在线预览导入XLSX库官方地址Github 安装 npm install xlsx --s 引入 import XLSX from 'xlsx' HTML &l ...
SSM+基于Vue框架的在线投票系统的设计与实现毕业设计-附源码221604
基于Vue框架的在线投票系统的设计与实现摘要 21世纪时信息化的时代,几乎任何一个行业都离不开计算机,将计算机运用于在线投票系统也是十分常见的.过去使用手工的管理方式对在线投票系统进行管理,造成了 ...
SSM+基于Vue框架的在线投票系统的设计与实现毕业设计-附源码
基于Vue框架的在线投票系统的设计与实现摘要 21世纪时信息化的时代,几乎任何一个行业都离不开计算机,将计算机运用于在线投票系统也是十分常见的.过去使用手工的管理方式对在线投票系统进行管理,造成了 ...
腾讯云运维工程师认证(TCA)在线测试题
腾讯云运维工程师认证(TCA)在线测试题 54.(2.0分)腾迅云数据库MySQL在购买式列时可以指定数据复制方式.腾迅云数据库MySQL支持三种数据复制方式,下列选项中属于这三种复制方式的是哪项? ...
vue实战之在线翻译项目
vue实战之在线翻译项目今天,博主带来的分享是vue实战之在线翻译项目,一个小小的vue项目,用到了vue的很多基础语法,传组件等等!我们先来看下效果把! 左侧输入一种语言,右侧选择要转换的语言,点 ...
Springboot+MySQL+VUE实现的在线教育网站源码+视频教程(Springboot微服务架构)
下载地址:https://download.csdn.net/download/BSDKT/85347133?spm=1001.2014.3001.5503 项目介绍: Springboot+MySQ ...
C语言学堂在线测试题防丢失汇总
C语言学堂在线测试题(自己写基础题的时候整理的部分知识点,文档word链接在这边文档链接) 链接:https://pan.baidu.com/s/1SUjKPEMbIVl98O0a94JjZw 提取码 ...
计算机实训安全考试答案,(实验室安全在线测试题答案.doc
(实验室安全在线测试题答案判断题(实验室) 103001. 学生初次进入实验室应了解实验室具体的潜在危险,认真阅读.理解安全手册和操作手册,接受安全教育或培训,并通过考核. 正确 103002. 实 ...
云队友丨比智商在线、情商感人更重要的，是一个人的“时间商”
时间商,是一个人的核心能力探索人生哲学 | 追求自我成长『自言稚语』 "人生最大的错误是什么?" 佛祖如是说:"最大的错误就是你认为你有时间." 时间的奇妙 ...

php和vue实现智商在线测试题

php和vue实现智商在线测试题相关推荐

最新文章

热门文章