考试系统示例（layui + H5 + PHP + 缓存localstorage）

已于 2022-12-02 19:50:07 修改
阅读量648 收藏 1
点赞数
文章标签： layui javascript php 缓存 web app
于 2022-08-11 19:17:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/masterphp/article/details/126291454
版权 
<html style="font-size: 21.6667px;"><head>
<meta charset="utf-8">
<title>凌立SCRM</title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
<!--引入微信样式  weui.css-->
<!--引入jquery  jquery-1.9.0.js-->
<!--引入框架代码  layui-->
<script>
//rem转换
(function(doc, win) {
	var docEl = doc.documentElement,
	resizeEvt = 'orientationchange' in window ? 'orientationchange': 'resize',
	recalc = function() {
		var clientWidth = docEl.clientWidth;
		if (!clientWidth) return;
		if (clientWidth >= 720) {
			docEl.style.fontSize = '20px';
		} else {
			docEl.style.fontSize = 40 * (clientWidth / 720) + 'px';
		}
	};
	if (!doc.addEventListener) return;
	win.addEventListener(resizeEvt, recalc, false);
	doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

window.onload = function() { 
	document.addEventListener('touchstart', function(event){
		 if (event.touches.length > 1) { event.preventDefault() } 
	}) 
	document.addEventListener('gesturestart', function(event){ 
		event.preventDefault() 
	}) 
}
</head>
<body ontouchstart="" style="zoom: 1;">
<style>
    /*试题部分样式*/
    .content {
        position: absolute;
        top: 0.5rem;
        right: 0;
        bottom: 0;
        left: 0;
        overflow: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }
    .swiper-container {
        margin-left: auto;
        margin-right: auto;
        position: relative;
        overflow: hidden;
        z-index: 1;
    }
    .define-wrapper {
        height: auto!important;
        display: block!important;
    }
    .swiper-slide {
        float: left;
        width: 100%;
    }
    .questions {
        padding: 1rem 1rem 1rem;
        padding: 0 1rem;
        margin-top: 1rem;
    }
    .quesname {
        color: #333333;
        line-height: 1rem;
    }
    .subcon {
        margin-top: 1rem;
    }
    .subject {
        margin-bottom: 1rem;
    }
    .subject label {
        color: #333;
        min-height: 1.5rem;
        display: inline-block;
        line-height: 1rem;
        position: relative;
        box-sizing: border-box;
        padding-left: 1.5rem;
    }
    /*单选图*/
    .onesub label span {
        display: inline-block;
        width: 0.8rem;
        height: 0.8rem;
        background: url('图片地址') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 0;
        top: 12%;
        margin-top: -0.13rem;
    }
    .onesub label span.checkradio {
        background: url('图片地址') no-repeat;
        background-size: 100% 100%;
    }
    .subject label input {
        width: 0.26rem;
        height: 0.26rem;
        position: absolute;
        left: 0.5rem;
        top: 50%;
        margin-top: -0.13rem;
        opacity: 0;
        filter: alpha(opacity=0);
    }
    /*多选图*/
    .checksub label span {
        display: inline-block;
        width: 0.8rem;
        height: 0.8rem;
        background: url('图片地址') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 0;
        top: 12%;
        margin-top: -0.13rem;
    }
    .checksub label span.checkradio {
        background: url('图片地址') no-repeat;
        background-size: 100% 100%;
    }
</style>
<div class="page-group">
    <div class="page page-current">
        <div class="header flex-center bulehead">
             <span>在线考试</span>
        </div>
        <div class="content development">
            <!--试题部分开始-->
            <div class="content">
                <div class="swiper-container swiper-container-h  define-container swiper-no-swiping swiper-container-horizontal" style="overflow: auto;">
                    <div style="margin-left: 1rem;color: red"> 当前考题： <span id="tipnum">1</span> / 4</div>
                    <div class="swiper-wrapper define-wrapper" style="transition-duration: 0ms;">
                        <div class="layui-tab-item layui-show  class1" name="1">
                            <!-- A1、A2型题开始 -->
                            <div class="swiper-slide">
                                <div class="questions" data-id="11" data-type="1">
                                    <p class="quesname">单选1 【单选】</p>
                                        <div class="subcon">
                                            <div class="subject onesub">
                                                <label name="" class="checkradio"><span></span><input type="radio" id="" name="" value="答案1">A、答案1</label>
                                            </div>
                                            <div class="subject onesub">
                                                <label name="" class="checkradio"><span></span><input type="radio" id="" name="" value="答案2">B、答案2</label>
                                            </div>
                                            <div class="subject onesub">
												<label name="" class="checkradio"><span></span><input type="radio" id="" name="" value="答案3">C、答案3</label>
                                            </div>
                                            <div class="subject onesub">
                                                <label name="" class="checkradio"><span></span><input type="radio" id="" name="" value="答案4">D、答案4</label>
                                            </div>
                                            <div class="subject onesub">
                                                <label name="" class="checkradio"><span></span><input type="radio" id="" name="" value="答案5">E、答案5</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- A1、A2型题结束 -->
                            </div>
                            <div class="layui-tab-item  class2" name="2">
                                <!-- A1、A2型题开始 -->
                                <div class="swiper-slide">
                                    <div class="questions" data-id="12" data-type="1">
                                        <p class="quesname">单选2 【单选】</p>
                                            <div class="subcon">
                                                <div class="subject onesub">
                                                    <label name="" class="checkradio"><span></span><input type="radio" id="" name="" value="答案1">A、答案1</label>
                                                </div>
                                                <div class="subject onesub">
                                                    <label name="" class="checkradio"><span></span><input type="radio" id="" name="" value="答案2">B、答案2</label>
                                                </div>
                                                <div class="subject onesub">
                                                    <label name="" class="checkradio"><span></span><input type="radio" id="" name="" value="答案3">C、答案3</label>
                                                </div>
                                                <div class="subject onesub">
                                                    <label name="" class="checkradio"><span></span><input type="radio" id="" name="" value="答案4">D、答案4</label>
                                                </div>
                                            </div>
                                        </div>
									</div>
                                <!-- A1、A2型题结束 -->
                                </div>
                                <div class="layui-tab-item  class3" name="3">
                                    <!-- A1、A2型题开始 -->
									<div class="swiper-slide">
										<div class="questions" data-id="13" data-type="1">
											<p class="quesname">单选3 【单选】</p>
											<div class="subcon">
												<div class="subject onesub">
													<label name="" class="checkradio"><span></span><input type="radio" id="" name="" value="答案1">A、答案1</label>
												</div>
                                                <div class="subject onesub">
                                                   <label name="" class="checkradio"><span></span><input type="radio" id="" name="" value="答案2">B、答案2</label>
                                                </div>
                                                <div class="subject onesub">
                                                    <label name="" class="checkradio"><span></span><input type="radio" id="" name="" value="答案3">C、答案3</label>
                                                </div>
                                                <div class="subject onesub">
                                                    <label name="" class="checkradio"><span></span><input type="radio" id="" name="" value="答案4">D、答案4</label>
                                                </div>
                                            </div>
                                        </div>
									</div>
                                <!-- A1、A2型题结束 -->
                                </div>
                                <div class="layui-tab-item  class4" name="4">
								<!-- X型题开始 -->
									<div class="swiper-slide">
										<div class="questions" data-id="15" data-type="2">
											<p class="quesname">多选2【多选】</p>
                                            <div class="subcon">
                                                <div class="subject checksub">
                                                    <label name="" class="checkradio"><span></span><input type="checkbox" id="" name="" value="答案1">A、答案1</label>
                                                </div>
                                                <div class="subject checksub">
                                                    <label name="" class="checkradio"><span></span><input type="checkbox" id="" name="" value="答案2">B、答案2</label>
                                                </div>
                                                <div class="subject checksub">
                                                    <label name="" class="checkradio"><span></span><input type="checkbox" id="" name="" value="答案3">C、答案3</label>
                                                </div>
                                                <div class="subject checksub">
                                                    <label name="" class="checkradio"><span></span><input type="checkbox" id="" name="" value="答案4">D、答案4</label>
                                                </div>
											</div>
                                    </div>
                                </div>
                                <!-- X型题结束 -->
                            </div>
                        </div>
                    <div class="layui-tab" style="margin-top:25rem;margin-left:10%;z-index: 10000000">
                        <div id="after" class="layui-btn layui-btn-normal" style="padding: 0 15%">上一题</div>
                        <div id="before" class="layui-btn layui-btn-normal" style="padding: 0 15%;margin-left: 5%">下一题</div>
                        <div id="num" style="display: none">1</div>
                    </div>
                </div>
            </div>
            <!--试题部分结束-->
        </div>
    </div>
</div>

<script>
    //上一个
    $(document).on("click","#after",function(){
        var num = $('#num').text();
        var mark = num*1 - 1*1;
        if(mark >0){
            $('.layui-tab-item').removeClass('layui-show');
            var names = 'class'+mark;
            $('.'+names).addClass('layui-show');
            $('#num').text(mark);
            //修改数据(题目计数器)
            $('#tipnum').text(mark);
        }else{
            $('.layui-tab-item').removeClass('layui-show');
            $('.class1').addClass('layui-show');
            $('#num').text('1');
            //修改数据(题目计数器)
            $('#tipnum').text(1);
        }
    });

    //下一个
    $(document).on("click","#before",function(){
        var num = $('#num').text();
        var mark = num*1 + 1*1;
        var maxnum = 4;
        if(mark <= maxnum){
            $('.layui-tab-item').removeClass('layui-show');
            var names = 'class'+mark;
            $('.'+names).addClass('layui-show');
            $('#num').text(mark);
            //修改数据(题目计数器)
            $('#tipnum').text(mark);
        }else{
            $('.layui-tab-item').removeClass('layui-show');
            $('.class'+maxnum).addClass('layui-show');
            $('#num').text(maxnum);
            //修改数据(题目计数器)
            $('#tipnum').text(maxnum);

            //触发交卷
            layer.open({
                content: '是否确定交卷？'
                ,btn: ['交卷', '取消']
                ,skin: 'footer'
                ,yes: function(index){
                    submitdata();
                }
            });
        }
    });

    //交卷
    function submitdata() {
        //新建数组
        var answer = new Object();
        //循环获取数据
        $.each($('.questions'), function(k,v) {
            //题目标准范围
            var types = JSON.parse('[1,2]')
            //获取相关参数
            var type = $(this).data('type')
                ,id = $(this).data('id');

            if (types.indexOf(type) > -1) {
                switch(type)
                {
                    // 单选题
                    case 1:
                        var checked_val = $(this).find($("input[type=radio]:checked")).val();
                        answer[id] = checked_val?checked_val:'';
                        break;
                    // 多选题
                    case 2:
                        var checked_vals = [];
                        $($(this).find("input[type='checkbox']")).each(function () {
                            if ($(this).is(":checked")) {
                                checked_vals.push($(this).val());
                            }
                        });
                        checked_vals = checked_vals.join('$$');
                        answer[id] = checked_vals?checked_vals:'';
                        break;
                }
            }
        });
        //ajax提交数据
        submit_url = '提交地址';
        $.ajax({
            type:'post',
            dataType: 'json',
            url:submit_url,
            async:true,
            data:{
                exam : "1",
                answer : JSON.stringify(answer),
                starttime:"1659937635",
            },
            success:function(res){
                if(res.status ==0){
                    layer.msg(res.errorMessage);
                    setTimeout(function () {
                        location.href='数据重载地址';
                    },1000);
                }else{
                    layer.msg(res.errorMessage,{icon:2});
                    return false;
                }
            },
            error:function(){

            }
        });
    }
</script>


<script>
    $(function(){

        //单选选中效果
        $('.onesub label').click(function(){
            $(this).css({color:'#3897f9'});
            $(this).parent().siblings().find('label').css({color:'#333'});
            $(this).find('span').addClass('checkradio');
            $(this).parent().siblings().find('span').removeClass('checkradio');
            $(this).parents('.subcon,.single_ele').find('input').prop('checked',false);
            $(this).find('input').prop('checked',true);
        })

        /***************************分界线******************************/


        //多选选中效果
        $('.checksub label').click(function() {
            if($(this).find('input').prop('checked') == true){
                $(this).find('input').prop('checked',false);
                $(this).css({color:'#333'});
                $(this).find('span').removeClass('checkradio');
            }else{
                $(this).find('input').prop('checked',true);
                $(this).css({color:'#3897f9'});
                $(this).find('span').addClass('checkradio');
            }
            return false;
        })

        /*****************************公共方法***********************/
		
		
		//提交保存答案(缓存)
        function save_answer(qid, answer) {
            //试卷id
            var examid = "<?=$examid?>";
            //唯一标识
            var exammark = 'exam'+examid;
            //组装数组
            var examarray = [{'id':qid,'data':{'answer':answer}}];
            //获取存储数据
            var getarray = JSON.parse(localStorage.getItem(exammark));
            //判断（插入还是修改）
            if(getarray == null){
                localStorage.setItem(exammark,JSON.stringify(examarray));
            }else{
                var listnew = [];
                var idarray = [];
                //获取
                getarray.map(function(value,index){
                    idarray[index] = value['id'];
                });

                //判断是否需要修改或者追加
                getarray.map(function(value,index){
                    listnew[index]=value;
                    //判断当前数据是否已经在数组中
                    var indexs = $.inArray(qid, idarray);   //结果：index=1
                    if (indexs >= 0) {//已经存在数组中
                        if(value['id'] == qid){
                            if(value['data']['answer'] != answer){//需要跟新数据
                                listnew[index]['data']['answer']=answer;
                            }
                        }
                    }else{//不在数组中，需要追加数据
                        var num = getarray.length*1;
                        var pushdata = [{'id':qid,'data':{'answer':answer}}];
                        listnew[num] = pushdata[0];
                    }
                });
                localStorage.setItem(exammark,JSON.stringify(listnew));
            }
        };
    })
</script></body></html>

考试系统：layui框架+微信WeUI+ajax+php+本地缓存localstorage

主要记录点（缓存：如果有切换效果可以尝试本地缓存，数据不会丢失）

//提交保存答案(缓存)

        function save_answer(qid, answer) {

            //试卷id

            var examid = "<?=$examid?>";

            //唯一标识

            var exammark = 'exam'+examid;

            //组装数组

            var examarray = [{'id':qid,'data':{'answer':answer}}];

            //获取存储数据

            var getarray = JSON.parse(localStorage.getItem(exammark));

            //判断（插入还是修改）

            if(getarray == null){

                localStorage.setItem(exammark,JSON.stringify(examarray));

            }else{

                var listnew = [];

                var idarray = [];

                //获取

                getarray.map(function(value,index){

                    idarray[index] = value['id'];

                });

                //判断是否需要修改或者追加

                getarray.map(function(value,index){

                    listnew[index]=value;

                    //判断当前数据是否已经在数组中

                    var indexs = $.inArray(qid, idarray);   //结果：index=1

                    if (indexs >= 0) {//已经存在数组中

                        if(value['id'] == qid){

                            if(value['data']['answer'] != answer){//需要跟新数据

                                listnew[index]['data']['answer']=answer;

                            }

                        }

                    }else{//不在数组中，需要追加数据

                        var num = getarray.length*1;

                        var pushdata = [{'id':qid,'data':{'answer':answer}}];

                        listnew[num] = pushdata[0];

                    }

                });

                localStorage.setItem(exammark,JSON.stringify(listnew));

            }

        };

masterphp
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在线考试系统html页面结果,Node.js在线考试系统——页面布局(学生)
weixin_35137190的博客
05-30 1543
Node.js在线考试系统1.布局总览准备界面.jpg答题界面.jpg2.页面布局模块分析1.navBar页面中的导航栏2.ready考试前的准备界面,由三个部分组成考试开始时间考试倒计时开始测试按钮2.1 deltaTime考试倒计时2.2 startTest开始测试按钮,时间到则允许开始考试3.main考试的主要界面,由四个部分组成题目相关信息题目内容输入框三个按钮3.1questionInf...
layui搭建框架及测试
sj0613xz的博客
12-26 2518
layui环境搭建，简单学习
layui制作带进度条单选答题代码
07-14
layui制作带进度条单选答题代码是一款可用于考试答题功能页面。
Java项目:在线考试管理(java+SpringBoot+Vue+ElementUI+Layui+Mysql)
最新发布
一位性感程序员的博客
11-06 61
项目介绍 基于SpringBoot Vue的在线考试管理 角色：管理员、学生、教师 管理员：管理员登录系统后，可以对首页，个人中心，学生管理，教师管理，课程分类管理，课程信息管理，在线考试管理，试题管理，习题管理，考试管理等功能 学生：学生管理，在学生管理页面可以对索引，学生账号，性别，头像，年龄，电话号码等内容进行详情，修改或删除等操作 教师：教师登录进入在线考试系统可以对首页，个人中心，课程信息管理，试题管理，在线考试管理，考试管理等功能 环境需要 1.运行环境：最好是java jdk
Layui布局页面设计:
henrenzhenderen的博客
09-23 1581
1、layui简介： 是一套开源的 Web UI 解决方案，采用自身经典的模块化规范，并遵循原生 HTML/CSS/JS 的开发方式。主要面向的是全层次的前后端开发者，极易上手，开箱即用，非常适合网页界面的快速开发。(若依) 2、栅格系统： ...
前端框架---之----layui的使用
MyBlogHiHi的博客
05-21 1964
注意：也可以自定义css样式，设置统一的按钮样式等 1.在前端页面HTML页面中引入js文件 2.在前端页面HTML页面中引入css样式文件 3.使用layui样式时，需按照layui编写html规范进行编写，例如： 4.引入layui的js文件之后，便可以使用layui形式的js写法啦（table列表渲染，layui文件上传，jQuery） layui.js文件源码 ;!function(e){"use strict";var t=document,n={modules:{},status:{
在线考试试题显示模板
12-11
b/s结构的在线考试系统的试题显示模板功能，提供了试题的显示格式。
基于vue2.0+vuex+localStorage开发的本地记事本示例
01-19
本文采用vue2.0+vuex+localStorage+sass+webpack，实现一个本地存储的记事本。兼容PC端和移动端。 实现效果 功能说明 支持回车添加事件 支持事件状态切换 添加事件 -> 进入未完成列表 未完成 -> 已完成(勾选...
利用jQuery+localStorage实现一个简易的计时器示例代码
11-29
前言 在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，...示例代码
LocalStorage+HTML+CSS+jQuery 实现简易的学生管理系统
10-04
使用HTML+CSS+Javascript(ES6) / jQuery以及LocalStorage实现简易的学生管理系统，支持学生信息（学号、姓名、专业、班级）的CRUD
javaee 考试系统
06-11
课程设计的作业 希望可以帮到你们 一起学习
网上在线考试系统DEMO
06-02
网上在线考试系统DEMO网上在线考试系统DEMO网上在线考试系统DEMO网上在线考试系统DEMO网上在线考试系统DEMO
基于layui后台html模板
07-31
基于layui后台html模板
Java毕业设计，SpringBoot+MySQL+Layui实现的在线考试系统源码.zip
06-04
一个 JAVA 实现的在线考试系统,主要实现一套基于不同类型的客观题,进行自动组卷、批卷等功能的考试系统（没有主观题） 在线演示：http://120.24.242.142:8080/index 学生账号：111/12345 教师账号：000/12345 系统架构 后端技术栈 基于 Spring Boot 数据库 MySQL ORM MyBatis & MyBatis-plus 缓存 Redis、guava的LoadingCache 安全 Shiro Excel 导出 easyexcel 日志 slf4j、log4j2 图片上传 qiniu 其它工具 swagger、hutool、guava、hibernate-validator 实在是不怎么懂前端 [菜..] 前端技术栈 基于 layui 模板引擎 thymeleaf 表格展示 echart 部署 单纯启动： 安装 Mysql 并执行 sql 文件, 修改数据源配置 ,见 test-system.sql 、 application.yaml 注册七牛图床,修改项目中七牛相关信息,见 applica
Vue项目使用localStorage+Vuex保存用户登录信息
01-19
本文实例为大家分享了Vue使用localStorage+Vuex保存用户登录信息的具体代码，供大家参考，具体内容如下 api.js import axios from 'axios' const baseURL = 'http://XXX // 全局的 axios 默认值 axios.defaults....
前端H5可视化拖拽布局器-Layui,Bootstrap等各种UI-可视化表单设计器
热门推荐
adyuebanwan的专栏
05-08 7万+
本节介绍一款前端H5可视化布局器 MagicalDrag2.1.5 由js+css+html编写而成 软件官方在线使用地址：http://layuiout.magicalcoder.com/layui 在线使用：免费 优点在于 功能强大，可以自由嵌入各种web项目，有html+css+js编写而成,可以基于各种设备响应式设计布局 软件基本截图主界面 （图片拉扯了好难看） 各种下拉编辑...
常见js表单验证方法（H5，layUI，amazeUI，vue）
入门菜鸟程序员的成长
01-08 877
记录一下自己用过的不同工具的表单验证方法，默认非表单提交而是用resultful请求风格提交。 原生H5验证： <form id="form-demo" onsubmit="return false;"> <input type="text" class="form-control modaltd" placeholder="请输入..." id="s01Fo...
springboot+layui+mysql+Ajax实现用户登录
03-26
1、前端使用基于layui框架搭建的页面，包括登录框和注册框。 2、使用JQuery和Ajax技术实现异步登录和注册功能，将表单中的数据封装成一个JSON对象，将其发送到后端接口。 3、后端使用SpringBoot框架，使用MVC架构，采用MySQL数据库作为数据存储方式。 4、接口中实现登录和注册功能，使用Spring Security进行用户认证和授权。 5、登录验证方法主要通过在后端判断该用户是否已经注册，并且密码是否正确，若验证通过则返回一个用户身份标识token。 6、注册验证方法主要通过在后端判断该用户是否已经注册，若注册则返回提示信息，否则将该用户信息以加密方式写入数据苣库中。 7、前端通过localStorage将用户身份标识保存在浏览器中，实现不同页面间的数据传递。 8、在登录成功后，跳转到主页，显示登录信息，失败后显示错误信息。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值