The following picture is a schematic diagram of the effect of the webpage: (There are only multiple-choice questions, and the questions are randomly selected) The
first step: first download the js file
Go to my blog to download it for free
My blog link: http://zhenyunboy.icu/?p=302
Step 2: Copy the following html code into your html code and run it:
<!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/[email protected]/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>