考试答题系统模板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;
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>
</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" οnclick="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>
标签：3498db,linear,答题,gradient,image,html,background,answer,css 来源： https://blog.csdn.net/weixin_44172610/article/details/121878258