js+css实现保安员证真题模拟考试系统代码-html代码-BFW代码库

代码语言：html
所属分类：其他
代码描述：js+css实现保安员证真题模拟考试系统代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>保安员证模拟考试系统</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap" rel="stylesheet">
<style>
*{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#0a0f1c;--card:#131a2e;--card2:#1a2340;--accent:#f5a623;--accent2:#e8920a;--ok:#2dd4a8;--okbg:rgba(45,212,168,.1);--err:#f44;--errbg:rgba(255,68,68,.1);--t1:#eef1f8;--t2:#8892a8;--t3:#4a5568;--bd:#252e48}
html{scroll-behavior:smooth}
body{font-family:'Noto Sans SC',system-ui,sans-serif;background:var(--bg);color:var(--t1);min-height:100vh;overflow-x:hidden}
body::before{content:'';position:fixed;inset:0;background:radial-gradient(ellipse at 10% 10%,rgba(245,166,35,.03) 0%,transparent 50%),radial-gradient(ellipse at 90% 90%,rgba(45,212,168,.02) 0%,transparent 50%);pointer-events:none;z-index:0}
.screen{display:none;position:relative;z-index:1;min-height:100vh;padding:20px 16px}
.screen.active{display:block}
.app{max-width:760px;margin:0 auto}
.hero{text-align:center;padding:48px 0 32px}
.hero h1{font-size:2.6rem;font-weight:900;background:linear-gradient(135deg,var(--accent),#ffd080);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.3;margin-bottom:8px}
.hero .sub{color:var(--t2);font-size:1rem}.hero .sub em{font-style:normal;color:var(--accent);font-weight:700;font-size:1.15rem}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-top:24px}
.mc{background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:28px 20px;cursor:pointer;transition:all .25s;text-align:center}
.mc:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 8px 28px rgba(245,166,35,.1)}
.mc .ic{font-size:2.4rem;margin-bottom:10px;display:block}
.mc h3{font-size:1.15rem;margin-bottom:4px}
.mc p{font-size:.82rem;color:var(--t2)}
.panel{background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:28px 24px;margin:18px 0;position:relative}
.panel h2{font-size:1.5rem;margin-bottom:18px;color:var(--accent);font-weight:700}
.sr{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.sr label{min-width:80px;color:var(--t2);font-size:.9rem}
.og{display:flex;gap:8px;flex-wrap:wrap}
.ob{padding:7px 16px;border:1px solid var(--bd);background:transparent;color:var(--t2);border-radius:8px;cursor:pointer;font-size:.85rem;transition:all .2s;font-family:inherit}
.ob.sel{background:var(--accent);color:#111;border-color:var(--accent);font-weight:600}
.ob:hover{border-color:var(--accent)}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:11px 28px;border:none;border-radius:10px;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .2s;font-family:inherit;gap:6px}
.btn-p{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#111}.btn-p:hover{transform:translateY(-2px);box-shadow:0 4px 18px rgba(245,166,35,.3)}
.btn-o{background:transparent;border:1px solid var(--bd);color:var(--t2)}.btn-o:hover{border-color:var(--accent);color:var(--accent)}
.btn-r{background:var(--err);color:#fff}
.btn-g{background:var(--ok);color:#fff}
.btn-s{padding:7px 16px;font-size:.82rem;border-radius:8px}
.bg{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.eh{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;background:var(--card);border-bottom:1px solid var(--bd);position:sticky;top:0;z-index:50;backdrop-filter:blur(8px)}
.timer{font-size:1.2rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--accent)}
.timer.warn{color:var(--err);animation:pulse 1s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.ptxt{font-size:.85rem;color:var(--t2)}
.pbar{position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--bd)}
.pfill{height:100%;background:var(--accent);transition:width .3s;border-radius:0 3px 3px 0}
.qw{max-width:680px;margin:0 auto;padding:24px 16px}
.qn{display:inline-block;background:var(--accent);color:#111;font-weight:700;font-size:.82rem;padding:3px 11px;border-radius:20px;margin-bottom:12px}
.qt{font-size:1.05rem;line-height:1.8;margin-bottom:22px}
.opts{display:flex;flex-direction:column;gap:9px}
.opt{display:flex;align-items:flex-start;gap:12px;padding:13px 16px;background:var(--card2);border:2px solid var(--bd);border-radius:11px;cursor:pointer;transition:all .2s;line-height:1.6;font-size:.95rem}
.opt:hover{border-color:var(--accent);background:rgba(245,166,35,.05)}
.opt .lt{flex-shrink:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--bd);color:var(--t2);font-weight:700;font-size:.85rem;transition:all .2s}
.opt.sel{border-color:var(--accent);background:rgba(245,166,35,.08)}.opt.sel .lt{background:var(--accent);color:#111}
.opt.ok{border-color:var(--ok);background:var(--okbg)}.opt.ok .lt{background:var(--ok);color:#fff}
.opt.wr{border-color:var(--err);background:var(--errbg)}.opt.wr .lt{background:var(--err);color:#fff}
.opt.dis{pointer-events:none;opacity:.85}
.nb{display:flex;gap:10px;justify-content:center;padding:18px;flex-wrap:wrap}
.st{position:fixed;bottom:18px;right:18px;width:48px;height:48px;border-radius:50%;background:var(--accent);color:#111;font-size:1.3rem;display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;z-index:60;box-shadow:0 4px 18px rgba(245,166,35,.4);transition:all .2s}.st:hover{transform:scale(1.08)}
.so{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:70;backdrop-filter:blur(3px)}.so.show{display:flex;align-items:center;justify-content:center}
.sp{background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:22px;max-width:480px;width:90%;max-height:78vh;overflow-y:auto}
.sp h3{margin-bottom:14px;color:var(--accent);font-size:1.1rem}
.sg{display:grid;grid-template-columns:repeat(auto-fill,minmax(38px,1fr));gap:5px}
.sb{width:38px;height:38px;border-radius:7px;border:1px solid var(--bd);background:var(--card2);color:var(--t2);font-size:.78rem;font-weight:600;cursor:pointer;transition:all .15s;font-family:inherit}.sb.ans{background:var(--accent);color:#111;border-color:var(--accent)}.sb.cur{box-shadow:0 0 0 2px var(--accent)}.sb:hover{border-color:var(--accent)}
.rh{text-align:center;padding:40px 16px 24px}
.sr-ring{width:160px;height:160px;margin:0 auto 20px;position:relative}
.sr-ring svg{transform:rotate(-90deg)}
.sr-ring .bg{stroke:var(--bd);fill:none;stroke-width:10}
.sr-ring .fg{fill:none;stroke-width:10;stroke-linecap:round;transition:stroke-dashoffset 1.2s ease}
.sr-ring .stxt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.sn{font-size:2.6rem;font-weight:900}.sl{font-size:.82rem;color:var(--t2)}
.rst{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0}
.sc{background:var(--card);border:1px solid var(--bd);border-radius:11px;padding:16px;text-align:center}
.sc .v{font-size:1.5rem;font-weight:700;margin-bottom:3px}.sc .l{font-size:.78rem;color:var(--t2)}.sc.ok .v{color:var(--ok)}.sc.er .v{color:var(--err)}.sc.tm .v{color:var(--accent)}
.rl{margin-top:18px}
.ri{background:var(--card);border:1px solid var(--bd);border-radius:11px;padding:16px;margin-bottom:10px}
.ri .rq{font-size:.92rem;margin-bottom:8px;line-height:1.6}.ri .ra{font-size:.85rem;color:var(--t2);margin-bottom:3px}.ri .ra.w{color:var(--err)}.ri .ra.r{color:var(--ok)}
.es{text-align:center;padding:50px 16px;color:var(--t3)}.es .ei{font-size:2.8rem;margin-bottom:14px}.es p{font-size:.92rem}
.wh{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
.ptag{display:inline-block;padding:5px 18px;border-radius:18px;font-weight:700;font-size:1.05rem;margin-top:10px}
.ptag.p{background:var(--okbg);color:var(--ok);border:1px solid var(--ok)}.ptag.f{background:var(--errbg);color:var(--err);border:1px solid var(--err)}
.fb{margin-top:14px;padding:14px;border-radius:11px;font-size:.92rem;line-height:1.6;display:none}.fb.show{display:block}.fb.c{background:var(--okbg);border:1px solid var(--ok);color:var(--ok)}.fb.w{background:var(--errbg);border:1px solid var(--err);color:var(--err)}
.xb{position:absolute;top:10px;right:14px;background:none;border:none;color:var(--t2);font-size:1.3rem;cursor:pointer;padding:8px}
.badge{display:inline-block;padding:2px 8px;border-radius:4px;font-size:.72rem;background:var(--bd);color:var(--t2);margin-right:5px}
@keyframes fi{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}.fi{animation:fi .35s ease}
@media(max-width:560px){.hero h1{font-size:1.9rem}.grid3{grid-template-columns:1fr}.rst{grid-template-columns:repeat(3,1fr);gap:8px}.sc{padding:12px 4px}.sc .v{font-size:1.2rem}.qt{font-size:.95rem}}
</style>
</head>
<body>
<div id="app">
<div class="screen active" id="s0"><div class="app">
<div class="hero fi"><h1>保安员证<br>模拟考试</h1><p class="sub">题库共 <em id="qc">0</em> 道题 · 助你轻松备考</p></div>
<div class="grid3 fi">
<div class="mc" onclick="showSet('exam')"><span class="ic">📝</span><h3>模拟考试</h3><p>限时随机出题 · 模拟真实考场</p></div>
<div class="mc" onclick="showSet('practice')"><span class="ic">📖</span><h3>练习模式</h3><p>不限时 · 逐题作答即时反馈</p></div>
<div class="mc" onclick="showW()"><span class="ic">📕</span><h3>错题本</h3><p id="wcl">0 道错题待复习</p></div>
</div></div></div>

<div class="screen" id="s1"><div class="app">
<div class="panel fi"><button class="xb" onclick="go0()">✕</button>
<h2 id="stitle">考试设置</h2>
<div class="sr"><label>题目数量</label><div class="og" id="no"></div></div>
<div class="sr" id="tr"><label>考试时间</label><div class="og" id="to"></div></div>
<div class="bg"><button class="btn btn-p" onclick="start()">开始考试</button><button class="btn btn-o" onclick="go0()">返回</button></div>
</div></div></div>

<div class="screen" id="s2">
<div class="eh" id="eh"><div class="timer" id="tmr">--:--</div><div class="ptxt"><span id="cn">1</span>/<span id="tn">0</span></div><div class="pbar"><div class="pfill" id="pf" style="width:0"></div></div></div>
<div class="qw" id="qw"></div>
<div id="pfb" class="fb" style="max-width:680px;margin:0 auto;padding:0 16px"></div>
<div class="nb">
<button class="btn btn-o btn-s" onclick="nav(-1)">← 上一题</button>
<button class="btn btn-p btn-s" onclick="nav(1)">下一题 →</button>
<button class="btn btn-r btn-s" id="sbtn" onclick="subC()">交卷</button>
</div>
<button class="st" onclick="togS()">📋</button>
</div>

<div class="so" id="sov" onclick="if(event.target===this)togS()"><div class="sp">
<h3>答题卡</h3><div class="sg" id="sg"></div>
<div style="margin-top:14px;text-align:center"><button class="btn btn-r btn-s" onclick="subC()">交卷</button></div>
</div></div>

<div class="screen" id="s3"><div class="app fi">
<div class="rh">
<div class="sr-ring"><svg viewBox="0 0 200 200"><circle class="bg" cx="100" cy="100" r="85"/><circle class="fg" id="sarc" cx="100" cy="100" r="85" stroke-dasharray="534" stroke-dashoffset="534"/></svg><div class="stxt"><div class="sn" id="sn">0</div><div class="sl">分</div></div></div>
<div id="ptag"></div>
</div>
<div class="rst">
<div class="sc ok"><div class="v" id="ro">0</div><div class="l">答对</div></div>
<div class="sc er"><div class="v" id="re">0</div><div class="l">答错</div></div>
<div class="sc tm"><div class="v" id="rt">0:00</div><div class="l">用时</div></div>
</div>
<div class="bg" style="justify-content:center"><button class="btn btn-p btn-s" onclick="rW()">查看错题</button><button class="btn btn-o btn-s" onclick="go0()">返回首页</button></div>
<div class="rl" id="rl"></div>
</div></div>

<div class="screen" id="s4"><div class="app">
<div class="panel fi"><button class="xb" onclick="go0()">✕</button>
<div class="wh"><h2>📕 错题本</h2><div><button class="btn btn-p btn-s" onclick="rtW()">错题重练</button> <button class="btn btn-o btn-s" onclick="cW()">清空</button></div></div>
<div id="wl" style="margin-top:16px"></div>
</div></div></div>
</div>
<script>
// ==================== 题库 ====================
const Q=[
["保安员在防火巡查时，以下项目中不需要检查的是","防火门、防火卷帘、消防安全疏散指示标志等设施均处于正常状态","消防安全标志是否完好","消防安全重点部位的人员在岗情况","本单位人员是否掌握灭火器材使用方法",3],
["在道路交通活动中，驾驶机动车，必须遵守的原则","左侧通行","右侧通行","中间通行","内侧通行",1],
["在道路交通活动中，道路交通主体是指","机动车和非机动车","机动车、非机动车和行人","机动车、非机动车和交通警察","机动车、非机动车、行人和交通管理部门",1],
["存有火灾隐患的一项是","小区内无消防车通道","室内外均有消防供水设施","常闭式防火门处于关闭状态","防火卷帘下无堆放物品",0],
["当机动车行驶至车道减少的路段或路口时，应当","借道超车","依次交替通行","加速通过","抢道行驶",1],
["机动车在设有最高限速标志的道路上行驶时","不得超过标明的最高时速","允许超过标明最高时速的10%","可以超过车辆的最高设计时速","按规定的最高车速行驶",0],
["机动车行驶在没有限速标志的路段时","应当以最高设计车速行驶","可以不受速度限制行驶","应当保持安全车速行驶","可以按自己的意愿行驶",2],
["正在道路上作业的清扫车在不影响其他车辆通行的情况下，可以","不受行驶速度限制","不受车辆分道行驶的限制","不受交通信号灯的限制","不受交通标志的限制",1],
["非机动车通过有交通信号灯控制的交叉路口，向左转弯时，应靠路口中心点转弯","右侧","左侧","最近处","最远处",0],
["保安员张三因就餐在饭店将李四打成重伤，直接侵犯李四的","名誉权","自由权","平等权","健康权",3],
["不属于电气火灾隐患的是","线路电量负荷过大","用钢、铁丝代替保险丝","电气线路严重老化","消防控制室电路出现故障",3],
["机动车距离交叉路口多少米以内不准停车","20","30","40","50",3],
["机动车在停车场以外的其他地点临时停车时，应当","在非机动车道停车","紧靠道路右边停放","紧靠道路左边停放","选择路边停车",1],
["符合用火规范的是","在小区花园角落可以焚烧垃圾","消防控制室严禁使用明火","在楼道内焚烧垃圾","在小区内燃放烟花炮竹",1],
["机动车载物的宽度不准超出","车厢","车厢左右各10厘米","车厢左右各20厘米","车厢左右各15厘米",0],
["对重大火灾隐患概念叙述正确的是","违反消防法规，可能导致火灾发生或危害增大，可能造成重大火灾事故和严重社会影响的不安全因素","违反保安法规，必定导致火灾发生","违反消防法规，必定导致火灾发生","违反保安法规，可能导致特大火灾事故和严重政治影响的不安全因素",0],
["在目标部位守护中，流动岗一般是设置在什么部位区域","重点单位的重要部位","防范工作的薄弱环节","客户单位认定的重要部位",".........完整代码请登录后点击上方下载按钮下载查看