下面图片是网页的效果示意图： （只有选择题哦，且是随机出题） 第一步：首先要下载js文件
去本人博客就能免费下载
本人博客链接：http://zhenyunboy.icu/?p=302
第二步：将下面html代码复制到你的html代码中运行即可：
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link href="css/mui.css" rel="stylesheet" /> <title>公共类-营业类- Download by http://www.codefans.net</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="js/index.css" type="text/css" /> <style type="text/css"> /*打印时，背景为白色*/ @media print{ body{ font-size:12px; background-color:#fff; } .div_topic{ padding:5px; border:#000 dashed; border-width: 0 0 1px 0; background-color:#fff; } .div_topic h4{ font-size:14px; color:#000; } .div_topic h4 span{ display:none} #answer_last { background-color:#eee; border:1px dashed #333; color:#000000; display:block; position: static; width:auto; height:auto; } } </style> <script src="js/jquery.js" type="text/javascript"></script> <script src="js/test1.js" type="text/javascript"></script> <script src="js/fun.js" type="text/javascript"></script> <script> $(document).ready(function(){ $("#topic_all_num").html(arr_topic.length); $("#get_topic").click(function(){ $("#status").html(""); if($("#topic_all").html() != ""){ if(!confirm("是否要重新出题？")){ return; }else{ $("#topic_all").html(""); } } var topic_num = $("#topic_num").val(); if(isNaN(topic_num)){ $("#topic_num").val("20"); }else{ if(topic_num <= 0){ $("#topic_num").val("20"); } if(topic_num > arr_topic.length){ $("#topic_num").val(arr_topic.length); } } topic_num = $("#topic_num").val(); get_topic(arr_topic,topic_num); int(); }); }); </script> <link rel="stylesheet" type="text/css" href="https://www.huangwx.cn/css/sweetalert.css"> <script type="text/javascript" src="https://www.huangwx.cn/js/sweetalert-dev.js"></script> <link rel="stylesheet" type="text/css" href="https://www.huangwx.cn/css/sweetalert.css"> <script type="text/javascript" src="https://www.huangwx.cn/js/sweetalert-dev.js"></script> </head> <body> <div id="fixedLayer"><div> <center> <font size="6" color="green"><b>数据结构测试详细版</b></font> <h1>初步了解您对本课程的认识程度</h1> <h3 style="color:red;">请务必认真作答</h3> </center><br> <input name="get_topic" id="get_topic" type="button" value=" 开始答题 " class="btn btn-default"/> <span id="status"></span> <input name="check_answer" id="check_answer" type="button" value=" 算分 " class="btn btn-default"/></span> <input name="topic_num" type="text" id="topic_num" style="visibility:hidden" /> <input name="check_answer" id="check_answer" type="button" value=" 其他 " class="btn btn-default" onclick="goo()"/></span> <script> function goo(){ swal("开始这个完美的弹出框旅程吧！") } </script> </div> </div> <br/><br/><br/><br/><br/><br/><br/><br/><br><br><br> <div id="topic_all"></div> <div id="answer_last"></div> </body> </html>