要用html和js 并给出分析结果的显示代码
时间: 2024-03-08 13:50:09 浏览: 20
好的,以下是一个使用HTML和JavaScript实现的代码示例:
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>排队选择题</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>通常在排队的时候你来晚了,下面哪种方式属于你或比较接近你?</h2>
<form>
<label class="radio-inline"><input type="radio" name="option" value="1">规规矩矩地排在最后一个</label>
<label class="radio-inline"><input type="radio" name="option" value="2">面带微笑,随便排在最后</label>
<label class="radio-inline"><input type="radio" name="option" value="3">不夹塞,帮着维持秩序或是夹塞,呵斥别人让开点</label>
<label class="radio-inline"><input type="radio" name="option" value="4">满腹牢骚,怪自己来得晚或是排队的人太多,并试着夹塞,别人不让还不高兴,甚至与别人争吵</label>
</form>
<button onclick="getResult()" class="btn btn-primary">提交</button>
<br><br>
<h3 id="result"></h3>
</div>
<script>
function getResult() {
var options = document.getElementsByName("option");
var result = "";
for (var i = 0; i < options.length; i++) {
if (options[i].checked) {
if (options[i].value == "1") {
result = "您的选择是规规矩矩地排在最后一个。很好,这是一种很文明的行为,遵守秩序和规则是我们每个人的责任。";
} else if (options[i].value == "2") {
result = "您的选择是面带微笑,随便排在最后。虽然这种行为并不违反规定,但是我们也应该尽量遵守规则和秩序。";
} else if (options[i].value == "3") {
result = "您的选择是不夹塞,帮着维持秩序或是夹塞,呵斥别人让开点。虽然有时候夹塞确实可以让我们更快地完成任务,但是我们也应该尽量尊重他人的权益。";
} else if (options[i].value == "4") {
result = "您的选择是满腹牢骚,怪自己来得晚或是排队的人太多,并试着夹塞,别人不让还不高兴,甚至与别人争吵。这种行为是不文明的,不仅会影响到自己的形象,也会影响到他人的情绪。";
}
break;
}
}
document.getElementById("result").innerHTML = result;
}
</script>
</body>
</html>
```
这个代码实现了题目的功能,使用了Bootstrap框架实现了样式美化。在表单提交时,使用了JavaScript进行判断,根据用户的选择输出相应的结果,并将结果显示在页面上。
需要注意的是,这里只是一个简单的示例,如果您需要更加完善的实现,需要对代码进行相应的修改。