考试答题系统模板html和css
<!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>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
display: flex;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.test{
margin: 10px 30px;
}
.
qustion{
font-size: 18px;
background:rgb(221, 234, 255);
color: black;
line-height: 40px;
margin-top: 20px;
border: 1px solid gray;
white-space: pre-line;
}
.answer{
text-indent: 2em;
background:rgb(98, 172, 214);
color: white;
opacity: 0;
transition: 1s ease-out;
white-space: pre;
}
.answer_show{
text-indent: 2em;
background:rgb(98, 172, 214);
color: white;
免费管理系统html模板opacity: 0;
transition: 1s ease-out;
opacity: 1;
white-space: pre;
}
.btnTest{
background: #3498db;
background-image:-webkit-linear-gradient(top, #3498db, #2980b9);
background-image:-moz-linear-gradient(top, #3498db, #2980b9);
background-image:-ms-linear-gradient(top, #3498db, #2980b9);
background-image:-o-linear-gradient(top, #3498db, #2980b9);
background-image:linear-gradient(to bottom, #3498db, #2980b9);
-
webkit-border-radius: 28;
-moz-border-radius: 28;
border-radius: 28px;
font-family: Arial;
color: white;
font-size: 20px;
padding: 10px 20px 10px 20px;
text-decoration: none;
position: absolute;
top: 20px;
left: 50%;
}
}
.btnTest:hover{
background: #3cb0fd;
background-image:-webkit-linear-gradient(top, #3cb0fd, #3498db);
background-image:-moz-linear-gradient(top, #3cb0fd, #3498db);
background-image:-ms-linear-gradient(top, #3cb0fd, #3498db);
background-image:-o-linear-gradient(top, #3cb0fd, #3498db);
background-image:linear-gradient(to bottom, #3cb0fd, #3498db);
text-decoration: none;
}
</style>
</head>
<body>
<h1>H5-2122 早考题</h1>
<h4>12⽉10号</h4>
<div class="test">
<p class="qustion">1.使⽤for循环求出35,25的最⼤公约数</p>
<p class="answer">
var a=35,b=25;
var min=a>b ? b : a;
for(;min>=1;min--){
if(a%min===0 && b%min===0){
console.log(min+"就是最⼤公约数")
break; }
}
</p>
</div>
<div class="test">
<p class="qustion"> 2、求100以内的所有质数</p>
<p class="answer">
var i=2;
while(i<=100){ var j=2; var bool=true;
while(j < i ){
if(i%j===0){
bool=false; break; }
j++;
}
if(bool){
console.log(i+"这个数是素数")
} i++;
}
</p></div><div class="test">
<p class="qustion">3.做出*号组成的等腰三⾓形</p>
<p class="answer">
var i=0;
while(i<10){
var j=0;
var k=10;
if(i===0)document.write(" ensp; ")
while(k>i/1.1){
document.write("ensp;")
k--;
}
while(j<=i){
document.write("*");
document.write("ensp;")
j++;
}
document.write(" < br >");
i++;
}
</p>
</p>
</div>
<div class="test">
<p class="qustion">4.break 和return的区别？</p>
<p class="answer">
return 必须写在函数内，break必须写在循环或者switch中
如果在函数中有循环或者switch，如果使⽤return，直接跳出函数
如果使⽤break只跳出当前循环语句或者switch，执⾏后⾯的语句，
直到函数内所有内容运⾏完成
</p>
</div>
<div class="test">
<p class="qustion">5.写⼀个函数，传⼊参数，求出所给的参数中的最⼤值</p> <p class="answer">
function getSum(){
var max=0;
var min=arguments[0];
for(var i=0;i < arguments.length;i++){
if(max < arguments[i]){
max= a rguments[i] ;
}
}
console.log(max);
}
getSum(  );
</p>
</div><button class="btnTest"onclick="show()">显⽰答案</button>
</body>
<script>
// 获取答案列表
let answer = document.querySelectorAll(".answer");
// 获取按钮元素
let btn = document.querySelector(".btnTest");
// 显⽰⽅法
function show(){
// 判断当前按钮内容
if(btn.innerHTML ==="显⽰答案"){
btn.innerHTML ="隐藏答案"
// ⽤for循环改变答案列表class
for(let i =0; i < answer.length; i++){
answer[i].className ="answer_show"
}
}else{
btn.innerHTML ="显⽰答案"
for(let i =0; i < answer.length; i++){
answer[i].className ="answer"
}
}
}
</script>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。