1使用HTML+CSS搭建网页至少展示5道单选题。2区域1在屏幕左侧：点击某个选项A、B、C、D后下方对应的单选按钮自动呈现被选中状态。3区域2再每个题目的右下角：单击时在标记和取消标记间切换。4区域3在屏幕右侧下方：区域1点击某个选项卡答题卡区域的题目呈现已答题状态从白色变为绿色；区域2单击标记时答题卡对应题目加上标记单击取消标记时答题卡对应题目去掉标记。5区域4在屏幕右侧上方：倒计时显示。动态
<!DOCTYPE html>
<html>
<head>
<title>单选题测试</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
// 点击选项，自动选中对应单选按钮
$(".option").click(function(){
var id = $(this).attr("id");
$("#" + id + " input[type=radio]").prop("checked", true);
});
<pre><code> // 点击标记，切换标记状态
$(".mark").click(function(){
if($(this).hasClass("marked")){
$(this).removeClass("marked");
$(this).text("标记");
// 在答题卡中去掉标记
var qid = $(this).closest(".question").attr("id");
$("#" + qid + "-card").removeClass("marked");
} else {
$(this).addClass("marked");
$(this).text("取消标记");
// 在答题卡中加上标记
var qid = $(this).closest(".question").attr("id");
$("#" + qid + "-card").addClass("marked");
}
});
// 点击答题卡中的题目，跳转到对应题目
$(".card-item").click(function(){
var id = $(this).attr("id");
var qid = id.substring(0, id.indexOf("-card"));
var offset = $("#" + qid).offset().top;
$("html, body").animate({scrollTop: offset}, 500);
});
// 倒计时
var countDownDate = new Date("2022-01-01 00:00:00").getTime();
var x = setInterval(function() {
var now = new Date().getTime();
var distance = countDownDate - now;
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
var time = hours + "小时 " + minutes + "分钟 " + seconds + "秒 ";
$("#countdown").text("离考试还有：" + time);
if (distance < 0) {
clearInterval(x);
$("#countdown").text("考试时间到！");
}
}, 1000);
});
</script>
</code></pre>
</head>
<body>
<div id="header">
<h1>单选题测试</h1>
<div id="countdown"></div>
</div>
<div id="main">
<div id="questions">
<div class="question" id="q1">
<div class="title">1. 下列哪个选项不属于HTML标签？</div>
<div class="options" id="q1-options">
<div class="option" id="q1-a">
<input type="radio" name="q1" id="q1-a-radio">
<label for="q1-a-radio">A. <p></label>
</div>
<div class="option" id="q1-b">
<input type="radio" name="q1" id="q1-b-radio">
<label for="q1-b-radio">B. <span></label>
</div>
<div class="option" id="q1-c">
<input type="radio" name="q1" id="q1-c-radio">
<label for="q1-c-radio">C. <div></label>
</div>
<div class="option" id="q1-d">
<input type="radio" name="q1" id="q1-d-radio">
<label for="q1-d-radio">D. <java></label>
</div>
</div>
<div class="mark">标记</div>
</div>
<div class="question" id="q2">
<div class="title">2. CSS中，以下哪个属性可以设置文字颜色？</div>
<div class="options" id="q2-options">
<div class="option" id="q2-a">
<input type="radio" name="q2" id="q2-a-radio">
<label for="q2-a-radio">A. font-size</label>
</div>
<div class="option" id="q2-b">
<input type="radio" name="q2" id="q2-b-radio">
<label for="q2-b-radio">B. background-color</label>
</div>
<div class="option" id="q2-c">
<input type="radio" name="q2" id="q2-c-radio">
<label for="q2-c-radio">C. color</label>
</div>
<div class="option" id="q2-d">
<input type="radio" name="q2" id="q2-d-radio">
<label for="q2-d-radio">D. text-align</label>
</div>
</div>
<div class="mark">标记</div>
</div>
<div class="question" id="q3">
<div class="title">3. 下列哪个标签可以插入图片？</div>
<div class="options" id="q3-options">
<div class="option" id="q3-a">
<input type="radio" name="q3" id="q3-a-radio">
<label for="q3-a-radio">A. <img></label>
</div>
<div class="option" id="q3-b">
<input type="radio" name="q3" id="q3-b-radio">
<label for="q3-b-radio">B. <div></label>
</div>
<div class="option" id="q3-c">
<input type="radio" name="q3" id="q3-c-radio">
<label for="q3-c-radio">C. <span></label>
</div>
<div class="option" id="q3-d">
<input type="radio" name="q3" id="q3-d-radio">
<label for="q3-d-radio">D. <p></label>
</div>
</div>
<div class="mark">标记</div>
</div>
<div class="question" id="q4">
<div class="title">4. 下列哪个CSS属性可以设置边框？</div>
<div class="options" id="q4-options">
<div class="option" id="q4-a">
<input type="radio" name="q4" id="q4-a-radio">
<label for="q4-a-radio">A. font-size</label>
</div>
<div class="option" id="q4-b">
<input type="radio" name="q4" id="q4-b-radio">
<label for="q4-b-radio">B. background-color</label>
</div>
<div class="option" id="q4-c">
<input type="radio" name="q4" id="q4-c-radio">
<label for="q4-c-radio">C. color</label>
</div>
<div class="option" id="q4-d">
<input type="radio" name="q4" id="q4-d-radio">
<label for="q4-d-radio">D. border</label>
</div>
</div>
<div class="mark">标记</div>
</div>
<div class="question" id="q5">
<div class="title">5. 下列哪个属性可以将元素向左或向右浮动？</div>
<div class="options" id="q5-options">
<div class="option" id="q5-a">
<input type="radio" name="q5" id="q5-a-radio">
<label for="q5-a-radio">A. font-size</label>
</div>
<div class="option" id="q5-b">
<input type="radio" name="q5" id="q5-b-radio">
<label for="q5-b-radio">B. background-color</label>
</div>
<div class="option" id="q5-c">
<input type="radio" name="q5" id="q5-c-radio">
<label for="q5-c-radio">C. color</label>
</div>
<div class="option" id="q5-d">
<input type="radio" name="q5" id="q5-d-radio">
<label for="q5-d-radio">D. float</label>
</div>
</div>
<div class="mark">标记</div>
</div>
</div>
<div id="sidebar">
<div id="answer-sheet">
<div class="card-title">答题卡</div>
<div class="card-item" id="q1-card">1</div>
<div class="card-item" id="q2-card">2</div>
<div class="card-item" id="q3-card">3</div>
<div class="card-item" id="q4-card">4</div>
<div class="card-item" id="q5-card">5</div>
</div>
</div>
</div>
</body>
</html>
<p>/* CSS */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}</p>
<p>#header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}</p>
<p>#main {
display: flex;
flex-wrap: wrap;
}</p>
<p>#questions {
flex: 3;
padding: 20px;
}</p>
<p>.question {
margin-bottom: 20px;
padding: 10px;
background-color: #f5f5f5;
position: relative;
}</p>
<p>.title {
font-size: 18px;
margin-bottom: 10px;
}</p>
<p>.options {
display: flex;
flex-wrap: wrap;
}</p>
<p>.option {
margin-right: 20px;
margin-bottom: 10px;
cursor: pointer;
}</p>
<p>.option label {
cursor: pointer;
}</p>
<p>.option input[type=radio] {
display: none;
}</p>
<p>.mark {
position: absolute;
right: 10px;
bottom: 10px;
padding: 5px;
background-color: #333;
color: #fff;
cursor: pointer;
}</p>
<p>.mark:hover {
background-color: #555;
}</p>
<p>.mark.marked {
background-color: #f00;
}</p>
<p>#sidebar {
flex: 1;
padding: 20px;
}</p>
<p>#answer-sheet {
background-color: #f5f5f5;
padding: 10px;
}</p>
<p>.card-title {
font-size: 18px;
margin-bottom: 10px;
}</p>
<p>.card-item {
display: inline-block;
padding: 5px;
margin-right: 10px;
background-color: #fff;
border: 1px solid #ccc;
cursor: pointer;
}</p>
<p>.card-item.marked {
background-color: #0f0;
}</p>
<p>#countdown {
font-size: 24px;
margin-bottom: 10px;</p>
原文地址: https://www.cveoy.top/t/topic/d567 著作权归作者所有。请勿转载和采集!