vue代码：
<template>
<div class="contain">
<div class="title">考试题目</div>
<div class="head">
<div v-bind="time">倒计时 {{ time }} </div>
<div><el-button @click="start" type="primary" v-bind:disabled="show" round>开始</el-button></div>
</div>
<!-- <div class="time" v-bind="time">{{ time }}</div> -->
<div class="content">
<div class="left">
<div>一、单选题</div>
<div class="subject" v-for="(item, index) in subject">
<div class="order">{{ item.number }}</div>
<div class="name">
<div>{{ item.name }}</div>
<div>
<el-radio-group v-model="radio[index]">
<el-radio v-for="item2 in item.select" :label="item2"
@change="signleHandleChange($event, item.id, item2)">
{{ item2 }}
</el-radio>
</el-radio-group>
</div>
</div>
</div>
<div>二、多选题</div>
<div class="subject" v-for="(item, index) in subject2">
<div class="order">{{ item.number }}</div>
<div class="name">
<div>{{ item.name }}</div>
<div>
<el-checkbox v-for="item2 in item.select" :label="item2"
@change="multipleHandleChange($event, item.id, item2)">{{ item2 }}</el-checkbox>
</div>
</div>
</div>
</div>
<div class="right">
<div class="single">
<div>一、单选题</div>
<div class="option">
<div class="number" v-for="item in subject" :class="[item.click ? 'select' : '']">
{{ item.number }}
</div>
</div>
</div>
<div class="more">
<div>二、多选题</div>
<div class="option">
<div class="number" v-for="item in subject2" :class="[item.click==1 ? 'select' : '']">
{{ item.number }}
</div>
</div>
</div>
</div>
</div>
<div style="text-align: center;">
<el-button type="danger" round>提交</el-button>
</div>
</div>
</template>
<script>
export default {
name: "Book",
data() {
return {
radio: 3,
radio: [],
values: [],//保存多选题答案
show: false,
time: '01:00:00',
checkList: [],
subject: [
{
id: 1,
name: '1+1=?',
number: 1,
select: [
"A选项",
"B选项",
"C选项"
],
answer: 'A'
},
{
id: 2,
number: 2,
name: '机械温控冰箱可以存放易燃易爆的化学品',
select: [
"A选项",
"B选项",
"C选项"
],
answer: 'C'
},
{
id: 3,
number: 3,
name: '挪威的森林作者是谁?',
select: [
"A选项",
"B选项",
"C选项"
],
answer: 'B'
}
],
subject2: [
{
id: 4,
number: 1,
name: '许三观卖血记的作者是谁？',
select: [
"A选项",
"B选项",
"C选项",
"D选项"
],
answer: 'D'
},
{
id: 5,
number: 2,
name: '机械温控冰箱可以存放易燃易爆的化学品？',
select: [
"A选项",
"B选项",
"C选项",
"D选项"
],
answer: 'B'
},
{
id: 6,
number: 3,
name: '嫌疑人X献身作者是谁?',
select: [
"A选项",
"B选项",
"C选项",
"D选项"
],
answer: 'A'
}
]
}
},
created() {
// alert(123);
},
methods: {
// 单选传值
signleHandleChange(e, id, answer) {
var arr = this.subject;
arr.forEach(item => {
// console.log(item.id);
if (item.id == id) {
item.click = 1;
}
})
this.subject = arr;
// console.log(this.subject);
this.$forceUpdate();//刷新数据
},
multipleHandleChange(e, id, answer) {
var _this = this;
let flag = false;
let flag2 = false;
let number;
let number2;
if (this.values == '') {
var value = {};
value.id = id;
value.chose = [answer];
_this.values.push(value);
// console.log(id);
// console.log(_this.values);
} else {
try {
this.values.forEach((item, index) => {
if (item.id == id) {
flag = true;
number = index;
throw new Error("ending");//报错，就跳出循环
}
})
} catch (error) {
}
if (flag) {
try {
this.values[number].chose.forEach((item2, index) => {
if (item2 == answer) { //删除
flag2 = true;
number2 = index;
throw new Error("ending");//报错，就跳出循环
}
})
} catch (error) {
}
if (flag2) {
let index2 = this.values[number].chose.splice(number2, 1);
if (this.values[number]== '') {
this.values[number].click=0;
}
} else {
this.values[number].chose.push(answer);
}
} else {
var value = {};
value.id = id;
value.chose = [answer];
_this.values.push(value);
}
// console.log(_this.values);
}
var arr = this.subject2;
arr.forEach(item => {
// console.log(item.id);
if (item.id == id) {
item.click = 1;
}
})
arr.forEach(item=>{
this.values.forEach(item2=>{
if(item2.id==item.id){
if(item2.chose==''){
item.click=0;
}
}
})
})
this.subject2=arr;
this.$forceUpdate();//刷新数据
},
start() {
let time = 1 * 60 * 60 * 1000; // 定义一个两小时的毫秒数
this.show = true;
let iter = setInterval(() => {
if (time <= 0) { //倒计时结束
// 取消定时器(退出轮询)
clearInterval(iter);
return;
}
time -= 1000; // 进入轮询，将剩余时间减去1000毫秒
let date = new Date(time);
let hour = "0" + (date.getHours() - 8); // 北京是东八区，北京时间-8小时 = 格林尼治时间
let min = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
let sec = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
this.time = `${hour}:${min}:${sec}`;
}, 1000)
}
}
}
</script>
<style>
.title {
text-align: center;
font-size: 25px;
font-weight: 600;
letter-spacing: 2px;
}
.contain {
width: 100%;
height: 100%;
}
.content {
width: 100%;
display: flex;
flex-direction: row;
}
.head {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.time {}
.subject {
width: 90%;
margin-bottom: 10px;
margin-left: 10px;
padding-bottom: 10px;
text-align: left;
border: solid rgb(187, 185, 185) 1px;
display: flex;
flex-direction: row;
align-items: center;
}
.name {
margin-left: 25px;
display: flex;
flex-direction: column;
}
.order {
width: 35px;
height: 30px;
padding-top: 10px;
text-align: center;
border-radius: 45px;
background-color: aqua;
}
.right {
display: flex;
flex-direction: column;
flex-wrap: wrap;
width: 50%;
}
.left {
width: 50%;
}
.single {
display: flex;
flex-direction: column;
}
.more {
display: flex;
flex-direction: column;
}
.option {
display: flex;
flex-direction: row;
}
.select {
background-color: aqua;
}
.number {
width: 35px;
height: 35px;
border: solid gray 1px;
margin-left: 10px;
padding-top: 8px;
text-align: center;
border-radius: 20px;
}
</style>
扫一扫
500
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
