1使用HTML+CSS搭建网页至少展示5道单选题。2区域1在屏幕左侧：点击某个选项A、B、C、D后下方对应的单选按钮自动呈现被选中状态。3区域2再每个题目的右下角：单击时在标记和取消标记间切换。4区域3在屏幕右侧下方：区域1点击某个选项卡答题卡区域的题目呈现已答题状态从白色变为绿色；区域2单击标记时答题卡对应题目加上标记单击取消标记时答题卡对应题目去掉标记。5区域4在屏幕右侧上方：倒计时显示。请给
<!DOCTYPE html>
<html>
<head>
<title>单选题测试</title>
<style>
/* 区域1样式 */
#questions {
float: left;
margin-right: 20px;
}
.question {
margin-bottom: 20px;
padding: 20px;
border: 1px solid #ccc;
}
.question h3 {
margin-top: 0;
}
.options label {
display: block;
margin-bottom: 10px;
}
.options input[type="radio"] {
margin-right: 5px;
}
.options input[type="radio"]:checked + span {
color: green;
font-weight: bold;
}
/* 区域2样式 */
.question .flag {
float: right;
margin-top: -40px;
margin-right: 10px;
cursor: pointer;
}
.flag:hover {
text-decoration: underline;
}
.flag.flagged {
color: orange;
}
/* 区域3样式 */
#answer-sheet {
float: right;
border: 1px solid #ccc;
padding: 20px;
width: 250px;
}
.answer {
margin-bottom: 10px;
}
.answer button {
margin-right: 10px;
}
.answer.answered {
background-color: green;
color: #fff;
}
.answer.flagged {
background-color: orange;
color: #fff;
}
/* 区域4样式 */
#countdown {
float: right;
margin-top: 20px;
font-size: 24px;
font-weight: bold;
color: red;
}
</style>
</head>
<body>
<div id="questions">
<div class="question">
<h3>1. 以下哪个不是一种JavaScript数据类型？</h3>
<div class="options">
<label><input type="radio" name="q1" value="a"><span>undefined</span></label>
<label><input type="radio" name="q1" value="b"><span>null</span></label>
<label><input type="radio" name="q1" value="c"><span>boolean</span></label>
<label><input type="radio" name="q1" value="d"><span>array</span></label>
</div>
<div class="flag" data-flagged="false">标记</div>
</div>
<div class="question">
<h3>2. 下面哪个不是CSS选择器？</h3>
<div class="options">
<label><input type="radio" name="q2" value="a"><span>class</span></label>
<label><input type="radio" name="q2" value="b"><span>id</span></label>
<label><input type="radio" name="q2" value="c"><span>tag</span></label>
<label><input type="radio" name="q2" value="d"><span>name</span></label>
</div>
<div class="flag" data-flagged="false">标记</div>
</div>
<div class="question">
<h3>3. 下列哪个不是HTML5新增的语义化标签？</h3>
<div class="options">
<label><input type="radio" name="q3" value="a"><span>article</span></label>
<label><input type="radio" name="q3" value="b"><span>section</span></label>
<label><input type="radio" name="q3" value="c"><span>aside</span></label>
<label><input type="radio" name="q3" value="d"><span>div</span></label>
</div>
<div class="flag" data-flagged="false">标记</div>
</div>
<div class="question">
<h3>4. 在CSS中，以下哪个不是盒子模型的属性？</h3>
<div class="options">
<label><input type="radio" name="q4" value="a"><span>margin</span></label>
<label><input type="radio" name="q4" value="b"><span>padding</span></label>
<label><input type="radio" name="q4" value="c"><span>border</span></label>
<label><input type="radio" name="q4" value="d"><span>color</span></label>
</div>
<div class="flag" data-flagged="false">标记</div>
</div>
<div class="question">
<h3>5. 下面哪个不是HTTP的响应状态码？</h3>
<div class="options">
<label><input type="radio" name="q5" value="a"><span>200</span></label>
<label><input type="radio" name="q5" value="b"><span>404</span></label>
<label><input type="radio" name="q5" value="c"><span>500</span></label>
<label><input type="radio" name="q5" value="d"><span>600</span></label>
</div>
<div class="flag" data-flagged="false">标记</div>
</div>
</div>
<div id="answer-sheet">
<div class="answer" data-answered="false" data-flagged="false">1</div>
<div class="answer" data-answered="false" data-flagged="false">2</div>
<div class="answer" data-answered="false" data-flagged="false">3</div>
<div class="answer" data-answered="false" data-flagged="false">4</div>
<div class="answer" data-answered="false" data-flagged="false">5</div>
<button id="submit">提交</button>
</div>
<div id="countdown">30:00</div>
<script>
// 定义倒计时时间
var timeLeft = 30 * 60;
<pre><code> // 倒计时函数
function countdown() {
var minutes = Math.floor(timeLeft / 60);
var seconds = timeLeft % 60;
document.getElementById("countdown").innerHTML = minutes + ":" + (seconds < 10 ? "0" : "") + seconds;
timeLeft--;
if (timeLeft < 0) {
alert("时间到！");
document.getElementById("submit").click();
}
}
// 开始倒计时
setInterval(countdown, 1000);
// 区域1点击事件
var options = document.querySelectorAll("#questions .options input[type='radio']");
for (var i = 0; i < options.length; i++) {
options[i].addEventListener("click", function() {
this.parentNode.parentNode.querySelector("input[type='radio']:checked + span").classList.remove("checked");
this.nextElementSibling.classList.add("checked");
var answerIndex = parseInt(this.getAttribute("name").substring(1));
document.querySelectorAll("#answer-sheet .answer")[answerIndex - 1].setAttribute("data-answered", "true");
});
}
// 区域2点击事件
var flags = document.querySelectorAll("#questions .flag");
for (var i = 0; i < flags.length; i++) {
flags[i].addEventListener("click", function() {
if (this.getAttribute("data-flagged") === "false") {
this.classList.add("flagged");
this.setAttribute("data-flagged", "true");
var answerIndex = parseInt(this.parentNode.querySelector("input[type='radio']").getAttribute("name").substring(1));
document.querySelectorAll("#answer-sheet .answer")[answerIndex - 1].setAttribute("data-flagged", "true");
} else {
this.classList.remove("flagged");
this.setAttribute("data-flagged", "false");
var answerIndex = parseInt(this.parentNode.querySelector("input[type='radio']").getAttribute("name").substring(1));
document.querySelectorAll("#answer-sheet .answer")[answerIndex - 1].setAttribute("data-flagged", "false");
}
});
}
// 区域3点击事件
var answerSheet = document.querySelectorAll("#answer-sheet .answer");
for (var i = 0; i < answerSheet.length; i++) {
answerSheet[i].addEventListener("click", function() {
if (this.getAttribute("data-answered") === "true") {
this.classList.toggle("answered");
} else if (this.getAttribute("data-flagged") === "true") {
this.classList.toggle("flagged");
}
});
}
// 提交按钮点击事件
document.getElementById("submit").addEventListener("click", function() {
var answers = document.querySelectorAll("#questions input[type='radio']:checked");
var answerSheet = document.querySelectorAll("#answer-sheet .answer");
var correctCount = 0;
for (var i = 0; i < answers.length; i++) {
var answerIndex = parseInt(answers[i].getAttribute("name").substring(1));
answerSheet[answerIndex - 1].classList.add("answered");
if (answers[i].value === "a") {
correctCount++;
}
}
alert("你的得分是：" + correctCount);
});
</script>
</code></pre>
</body>
</html
原文地址: https://www.cveoy.top/t/topic/d6aI 著作权归作者所有。请勿转载和采集!