简单实现查找题库随机出题, 且可点击查看对应答案

        因为要考驾照, 科目一里的扣分题目和罚款题目, 老是记不住或者记混, 就写了个简单的页面, 可以点击按钮, 随机拿到一个题目, 自己想完答案, 可以再点击按钮, 查看答案是否正确。下面是代码,PC或移动端都可以。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>科一常见扣分罚款随机出题</title>
    <style>
        body {
            max-width: 540px;
            min-width: 320px;
            margin: 0 auto;
            font: normal 16px/1.5 "PingFangSC-regular",
            Tahoma,Lucida "Grande",Verdana,"Microsoft Yahei","STXihei","hei";
            background-color: #f2f2f2;
            -webkit-tap-highlight-color: transparent;
        }
        div {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            padding: 100px 50px;
            box-sizing: border-box;
            font-size: 24px;
            /* border-radius: 20px; */
            background: linear-gradient(5deg, rgba(135, 243, 193, 0.2) 29%, rgba(203, 100, 235, 0.2) 69%, rgb(133, 149, 243) 95%);
            /* background: url(../pictures/bg4.jpg) 0px 7px no-repeat; */
        }
        button {
            width: 5rem;
            height: 2.5rem;
            line-height: 2.5rem;
            font-size: 1.5rem;
            border-radius: 5px;
            background: antiquewhite;
            border-color: antiquewhite;
        }
    </style>
</head>
<body>
    <div>
        <h3>嘿嘿嘿 *^-^*</h3>
        <button class="showQues">出题</button> : <span class="question"></span>
        <br>
        <hr>
        <button class="showAnswer">答案</button> : <span class="answer"></span>
    </div>

    <script>
        const showQues = document.querySelector('.showQues');
        const testObj = [
            {Q: '不系安全带', A: '1分'},
            {Q: '摩托车不带头盔', A: '1分'},
            {Q: '不按规定会车;普通路上违规倒车掉头', A: '1分'},
            {Q: '不按规定使用灯光', A: '1分'},
            {Q: '违反禁令标志、禁止标线', A: '1分'},
            {Q: '载货长度、宽度、高度超过规定的', A: '1分'},
            {Q: '驾驶未按规定定期进行安全技术检验的公路客运汽车、旅游客运汽车、危险物品运输车辆以外的机动车上道路行驶的', A: '1分'},
            {Q: '超载未达30%', A: '1分'},
            {Q: '驾驶校车、中型以上载客载货汽车、危险物品运输车辆在普通路上超速10%-20%', A: '1分'},
            {Q: '驾驶擅自改变已登记的结构、构造或者特征的载货汽车上道路形式', A: '1分'},
            {Q: '普通车载人超载20%-50%', A: '3分'},
            {Q: '普通车在普通路上超速20%-50%', A: '3分'},
            {Q: '货车超载30%-50%的,或者违反规定载客的', A: '3分'},
            {Q: '(所有车)在高速公路或者城市快速路上不按规定车道行驶的', A: '3分'},
            {Q: '不按规定超车、让行;普通路上逆行的', A: '3分'},
            {Q: '借道超车或者占用对面车道、穿插等候车辆的', A: '3分'},
            {Q: '打电话', A: '3分'},
            {Q: '行经人行横道不按规定减速、停车、避让行人的', A: '3分'},
            {Q: '不按规定避让校车的', A: '3分'},
            {Q: '驾驶不按规定安装机动车号牌的机动车上道路行驶的', A: '3分'},
            {Q: '在道路上车辆发生故障、事故停车后,不按规定使用灯光或者设置警告标志的', A: '3分'},
            {Q: '驾驶未按规定定期进行安全技术检验的公路客运汽车、旅游客运汽车、危险物品运输车辆上道路行驶的', A: '3分'},
            {Q: '驾驶校车上道路行驶前,未对校车车况是否符合安全技术要求进行检查,或者驾驶存在安全隐患的校车上道路行驶的', A: '3分'},
            {Q: '连续驾驶载货汽车超过4小时未停车休息或者停车休息时间少于20分钟的', A: '3分'},
            {Q: '驾驶机动车在高速公路上行驶低于规定最低时速的', A: '3分'},
            {Q: '驾驶校车、公路客运汽车、旅游客运汽车载人超载未达到20%', A: '6分'},
            {Q: '驾驶7座以上载客汽车载人超载20%-50%', A: '6分'},
            {Q: '其他普通车载人超载50%-100%的', A: '6分'},
            {Q: '驾驶校车、中型以上载客载货汽车、危险物品运输车辆在高速公路、城市快速路上超速未达到20%,或者在普通路上超速20%-50%的', A: '6分'},
            {Q: '普通车在高速公路、城市快速路上超速20%-50%;在普通路上超速50%以上的', A: '6分'},
            {Q: '货车超载50%以上的', A: '6分'},
            {Q: '驾驶机动车载运爆炸物品、易燃易爆化学物品以及剧毒、放射性等危险物品,未按指定的时间、路线、速度行驶或者未悬挂警示标志并采取必要的安全措施的', A: '6分'},
            {Q: '驾驶机动车不按交通信号灯指示通行的', A: '6分'},
            {Q: '机动车驾驶证被暂扣或者扣留期间驾驶机动车的', A: '6分'},
            {Q: '造成致人轻微伤或者财产损失的交通事故后逃逸,尚不构成犯罪的', A: '6分'},
            {Q: '违法占用应急车道', A: '6分'},
            {Q: '驾驶7座以上载客汽车载人超载50%-100%的', A: '9分'},
            {Q: '驾驶校车、中型以上载客载货汽车、危险物品运输车辆在普通道路上超速50%以上', A: '9分'},
            {Q: '在高速公路或者城市快速路上违法停车的', A: '9分'},
            {Q: '驾驶未悬挂机动车号牌或者故意遮挡、污损机动车号牌的机动车上道路行驶的', A: '9分'},
            {Q: '驾驶与准驾车型不符的机动车的', A: '9分'},
            {Q: '未取得校车驾驶资格驾驶校车的', A: '9分'},
            {Q: '连续驾驶中型以上载客汽车、危险物品运输车辆超过4小时未停车休息或者停车休息时间少于20分钟的', A: '9分'},
            {Q: '饮酒后驾驶机动车的', A: '12分'},
            {Q: '造成致人轻伤以上或者死亡的交通事故后逃逸,尚不构成犯罪的', A: '12分'},
            {Q: '使用伪造、变造的机动车号牌、行驶证、驾驶证、校车标牌或者使用其他机动车号牌、行驶证的', A: '12分'},
            {Q: '驾驶校车、公路客运汽车、旅游客运汽车载人超载20%以上,或者驾驶其他载客汽车载人超载100%以上的', A: '12分'},
            {Q: '驾驶校车、中型以上载客载货汽车、危险物品运输车辆在高速公路、城市快速路上超速20%以上,或者驾驶其他机动车在高速公路、城市快速路上超速50%以上的', A: '12分'},
            {Q: '驾驶机动车在高速公路、城市快速路上倒车、逆行、穿越中央分隔带掉头的', A: '12分'},
            {Q: '代替实际机动车驾驶人接受交通违法行为处罚和记分牟取经济利益的', A: '12分'},
            {Q: '实习期牵引挂车', A: '20以上200以下'},
            {Q: '实习期独自上高速', A: '20以上200以下'},
            {Q: '信息变化没有及时换信息', A: '20以上200以下'},
            {Q: '换证后仍使用原证', A: '20以上200以下'},
            {Q: '未带驾驶证、行驶证', A: '20以上200以下'},
            {Q: '未按规定申报信息', A: '20以上200以下'},
            {Q: '逾期不年检', A: '200以上500以下'},
            {Q: '驾驶证被扣期间使用隐瞒或者欺骗等手段补领', A: '200以上500以下'},
            {Q: '身体变化不适合开车,仍然开', A: '200以上500以下'},
            {Q: '造成交通事故,暂不构成犯罪', A: '200以上2000以下,15日以下拘留'},
            {Q: '驾驶证被扣期间开车', A: '200以上2000以下,15日以下拘留'},
            {Q: '违反交通管理,强行通行', A: '200以上2000以下'},
            {Q: '非法截留、扣留机动车,造成交通严重堵塞和财产损失', A: '200以上2000以下,15日以下拘留'},
            {Q: '超速50%以上', A: '200以上2000以下,吊销驾驶证'},
            {Q: '把驾驶证给无驾照或者驾照被吊销的人开', A: '200以上2000以下,吊销驾驶证'},
            {Q: '驾驶拼装机动车或者已达报废标准的机动车上路行驶', A: '200以上2000以下,吊销驾驶证'},
            {Q: '非法安装报警器、标志性灯具;故意损毁、移动、涂改交通设施的', A: '200以上2000以下'},
            {Q: '未系安全带', A: '罚五十,扣一分'},
            {Q: '车身涂鸦、广告遮挡视线', A: '罚200以下'},
            {Q: '未按规定办理转让登记、变更登记等', A: '罚200以下'},
            {Q: '不按期限进行安全技术检查', A: '警告或者罚200以下'},
            {Q: '撞后,应撤未撤,造成交通堵塞', A: '交警有权让你撤,并罚200以下'},
            {Q: '提供虚假材料', A: '罚500以下(并一年不能再申请驾照)'},
            {Q: '组织、参与以欺骗、贿赂等手段取得驾照牟利', A: '罚违法所得3-5倍,10万以下'},
            {Q: '机动车驾驶人请他人代为接受交通违法行为处罚和记分并支付经济利益的', A: '【请别人消分或者给别人消分,3倍以下,5万以下】,违法所得3倍以下罚款,最高不超过5万元'},
            {Q: '组织别人消分', A: '违法所得五倍以下罚款,10万以下'},
            {Q: '满分教育、满分学习,或扣减积分安全教育中弄虚作假', A: '成绩无效,罚1000以下'},
            {Q: '代替参与教育的', A: '罚2000以下'},
            {Q: '组织别人弄虚作假、替考的', A: '有违法所得的,3倍以下,2万以下;没有违法所得的,2万以下'},
            {Q: '饮酒累犯(饮酒后驾车被罚,再次饮酒驾车)', A: '1000-2000罚款,10日以下拘留,并吊销驾驶证'},
            {Q: '伪造变造检验、保险标志', A: '1000-3000罚款,10日以下拘留,扣留车'},
        ]
        const showAnswer = document.querySelector('.showAnswer');
        let arr = [];

        function getRandomIntInclusive(min, max) {
            min = Math.ceil(min);
            max = Math.floor(max);
            return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值,含最小值 
        }
        function clickQues() {
            document.querySelector('.answer').innerHTML = '';
            let index = getRandomIntInclusive(0, testObj.length);
            if(arr.length >= testObj.length) {
                console.log(arr.length);
                arr = [];
            }
            if(!arr.includes(index)) {
                arr.push(index);
                console.log(index);
                document.querySelector('.question').innerHTML = testObj[index].Q;
                showAnswer.onclick = function() {
                    document.querySelector('.answer').innerHTML = testObj[index].A;
                }
            }else {
                clickQues();
            }
        }

        showQues.onclick = function() {
            clickQues()
        }

    </script>
</body>
</html>

静态页面(非常简单)

 

  • 5
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值