Skip to content

yangchao / brains-h5

Go to a project
Commit f0b44900 by yangchao
Options

update

1 parent 68748c84
Inline Side-by-side
Showing with 244 additions and 9 deletions
src/router/index.js
......@@ -42,6 +42,11 @@ const constantRouterMap = [
component : _import('zhiExercise/zhiDrill') ,
name : 'zhiDrill' ,
},
{
path : '/zhiExercise/zhiAnswer' ,
component : _import('zhiExercise/zhiAnswer') ,
name : 'zhiAnswer' ,
},
//随机数字
{
path : '/randomNumber/index' ,
......
src/views/zhiExercise/zhiAnswer.vue 0 → 100644
<template>
<div class="content">
<div class="title">
<div>请按顺序输入图上出现过的字符</div>
</div>
<div class="answer">
<div class="item" :class="{focus : focus == 1}">{{answer1}}</div>
<div class="item" :class="{focus : focus == 2}">{{answer2}}</div>
<div class="item" :class="{focus : focus == 3}">{{answer3}}</div>
</div>
<div class="btn-list">
<div class="item" @click="input('a')">a</div>
<div class="item" @click="input('b')">b</div>
<div class="item" @click="input('c')">c</div>
<div class="item" @click="input('d')">d</div>
<div class="item" @click="input('e')">e</div>
<div class="item" @click="input('f')">f</div>
<div class="item" @click="input('g')">g</div>
<div class="item" @click="input('h')">h</div>
<div class="item" @click="input('i')">i</div>
<div class="item" @click="input('j')">j</div>
<div class="item" @click="input('k')">k</div>
<div class="item" @click="input('l')">l</div>
<div class="item" @click="input('m')">m</div>
<div class="item" @click="input('n')">n</div>
<div class="item" @click="input('o')">o</div>
<div class="item" @click="input('p')">p</div>
<div class="item" @click="input('q')">q</div>
<div class="item" @click="input('r')">r</div>
<div class="item" @click="input('s')">s</div>
<div class="item" @click="input('t')">t</div>
<div class="item" @click="input('u')">u</div>
<div class="item delete" @click="deleteA">删除</div>
<div class="item" @click="input('v')">v</div>
<div class="item" @click="input('w')">w</div>
<div class="item" @click="input('x')">x</div>
<div class="item" @click="input('y')">y</div>
<div class="item" @click="input('z')">z</div>
</div>
<div class="submit" @click="submit">确定</div>
</div>
</template>
<script>
export default {
name: "zhiAnswer",
data() {
return {
focus: 1,
correctAnswer: [],
answer1: '',
answer2: '',
answer3: ''
}
},
methods:{
//提交
submit() {
let data = '';
this.correctAnswer.forEach(v=>{
data = data + v
})
alert('正确答案为：'+ data)
},
deleteA() {
if(this.focus == 1) {
this.answer1 = '';
} else if(this.focus == 2) {
this.answer2 = '';
this.focus --
} else if(this.focus == 3) {
this.answer3 = '';
this.focus --
}
},
input(val) {
if(this.focus == 1) {
this.answer1 = val;
this.focus ++
} else if(this.focus == 2) {
this.answer2 = val;
this.focus ++
} else if(this.focus == 3) {
this.answer3 = val;
}
}
},
mounted() {
this.correctAnswer = this.$route.query.answer;
console.log(this.correctAnswer);
}
}
</script>
<style scoped>
.content {
padding: 30px 24px;
}
.title {
display: flex;
align-items: center;
justify-content: center;
color: #333;
font-size: 30px;
font-weight: bold;
}
.answer {
display: flex;
align-items: center;
justify-content: center;
}
.answer .item {
width: 90px;
height: 70px;
border: 2px solid #333;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
color: #333;
margin-right: 20px;
}
.answer .focus {
background: #65bbe6;
}
.btn-list {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-between;
margin-top: 20px;
}
.btn-list .item {
width: 13%;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
color: white;
background: #409eff;
border-radius: 10px;
font-size: 30px;
margin-bottom: 20px;
}
.btn-list .delete {
width: 27.5%;
background: #f56c6c;
}
.btn-list .zero {
width: 48%;
}
.submit {
width: 500px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
color: white;
background: #409eff;
border-radius: 40px;
margin: 50px auto;
}
</style>
src/views/zhiExercise/zhiDrill.vue
<template>
<div class="content">
<div class="title">00:00:00</div>
<div class="title">{{(time/10).toFixed(0)}}s</div>
<div class="border">
<div class="ball"></div>
<div class="ball" :style="{left: ballX + 'px',top: ballY + 'px'}">{{letter}}</div>
</div>
<div class="start">开始训练</div>
<div class="start" @click="start" v-if="showBtn">开始训练</div>
</div>
</template>
......@@ -17,15 +17,61 @@
directY: 1, //y轴方向 1代表从上到下 -1代表从下到上
ballX: 0, //小球的x坐标
ballY: 0, //小球的y坐标
speed: '', //小球的运动速度
speedX: 10, //小球的运动速度
speedY: 2,
timer: '',
time: 600,
timer1: '',
showBtn: true,
letter: '',
answer: []
}
},
methods: {
ballMove() {
this.ballX = this.ballX + this.directX * this.speed;
this.ballY = this.ballY + this.directY * this.speed;
}
if(this.ballX>300 || this.ballX<0) {
this.directX = -this.directX;
}
if(this.ballY>600 || this.ballY<0) {
this.directY = -this.directY;
}
this.ballX = this.ballX + this.directX * this.speedX;
this.ballY = this.ballY + this.directY * this.speedY;
},
start() {
this.showBtn = false;
this.timer = setInterval(()=>{
if(this.time > 0) {
this.ballMove();
this.letter = '';
if(this.time == 100 || this.time == 350 || this.time == 500) {
let arr = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'];
this.letter = arr[Math.floor(Math.random()*26)];
this.answer.push(this.letter);
}
}else {
this.showBtn = true;
clearInterval(this.timer);
this.$router.push({
path: '/zhiExercise/zhiAnswer',
query: {
answer: this.answer
}
})
}
},100)
this.countDown();
},
countDown() {
this.timer1 = setInterval(()=>{
if(this.time > 0) {
this.time = this.time - 1;
}else {
clearInterval(this.timer1);
}
},100)
},
}
}
</script>
......@@ -44,10 +90,11 @@
}
.border {
width: 100%;
width: 700px;
height: 1300px;
border: 10px solid #000;
margin-top: 20px;
position: relative;
}
.ball {
......@@ -55,6 +102,14 @@
height: 50px;
border-radius: 50%;
background: #000;
position: absolute;
left: 0;
top: 0;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 30px;
}
.start {
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!