用vue写一个舒尔特训练表
作者：互联网
查看代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./css/element.css">
<script src="./js/vue.js"></script>
<script src="./js/element.js"></script>
</head>
<body>
<div id="app">
<div style="margin-top:30px;margin-block: 30px">{{warnMessage}}</div>
<div style="margin-top:30px;margin-block: 30px">{{useTime}}</div>
<div v-for="(item1,index1) in rows">
<span v-for="(item2,index2) in rows">
<el-button type="success" value="item1"
@click="check(index1,index2)"
:style="refStyle"
>
{{dataRow[index1][index2]}}
</el-button>
</span>
</div>
<!-- <div v-for="(item,index) in 7"> {{index}}</div>-->
<div style="margin-top: 20px">
<el-button v-if="!startFlag" type="primary" @click="startGame()">开始</el-button>
<el-button v-if="startFlag" type="primary" @click="stopGame()">停止</el-button>
<el-input-number v-if="!startFlag" v-model="rows" @change="initData" :min="1" :max="10" label="描述文字"></el-input-number>
</div>
<div style="margin-top: 30px">历史得分</div>
<el-table stripe
:data="historyScope"
style="width: 370px">
<el-table-column
prop="startTime"
label="日期"
width="150">
</el-table-column>
<el-table-column
prop="useTime"
label="用时"
width="120"
align="right">
</el-table-column>
<el-table-column
prop="rows"
label="阶数"
width="100"
align="left">
</el-table-column>
</el-table>
</div>
<script type="text/javascript">
let interval;
var vue = new Vue({
el: '#app',
data: {
startFlag: 0, // 0 代表未开始，1 代表开始了
warnMessage: '点击 ‘开始’ 按钮开始比赛', // 提示语
nowNum: 1, // 此时的数字
endNum: 25, // 结束数字
dataRow: [
[1, 2, 3, 4, 5],
[25, 6, 7, 8, 9],
[10, 11, 12, 13, 14],
[15, 16, 17, 18, 19],
[20, 21, 22, 23, 24]
],
startTime: ' ', // 开始的时间
useTime: '0.00',
rows: 2,
historyScope:[],
refStyle:{
width: '60px', // 按钮的属性
height: '60px',
marginRight:'5px',
marginTop:'5px',
fontSize: '20px'
},
screenWidth: document.body.clientWidth, // 屏幕宽
screeHeight: document.body.clientHeight, // 屏幕高
},
methods: {
startGame: function () {
this.nowNum = 1;
this.initData();
this.warnMessage = '请点击' + this.nowNum;
this.startCountTime();
this.startFlag = 1;
},
check: function (index1,index2) {
if (!this.startFlag) {
this.warnMessage = '点击 ‘开始’ 按钮开始比赛';
return;
}
// 如果是最后
if (this.nowNum === this.endNum && this.dataRow[index1][index2] === this.nowNum) {
this.warnMessage = '恭喜你，完成了';
this.stopTime();
this.startFlag = 0;
let date = new Date().toLocaleDateString('fr-CA') +" "+new Date().getHours()+":"+new Date().getMinutes();
this.historyScope.unshift({useTime: this.useTime,startTime: date,rows: this.rows})
while (this.historyScope.length > 6) {
this.historyScope.pop();
}
localStorage.setItem('scope_history', JSON.stringify(this.historyScope));
return;
}
if ( this.dataRow[index1][index2] === this.nowNum) {
this.nowNum++;
this.warnMessage = '请点击' + this.nowNum;
} else {
this.warnMessage = this.nowNum + " 错了";
}
},
// 开始计时
startCountTime: function () {
this.startTime = new Date().getTime();
interval = setInterval(this.countTime, 5);
},
// 每5毫秒更新时间
countTime: function () {
this.useTime =((new Date().getTime() - this.startTime)/1000).toFixed(2)
},
// 停止计时
stopTime: function () {
clearInterval(interval)
},
// 初始化数组
initData: function () {
// 设置按钮大小
this.initButturnSize();
let arr = this.randomArray(this.rows*this.rows);
let begin = 0;
for (let j = 0; j < this.rows; j++) {
let rowArr = [];
for (let k = 0; k <this.rows; k++) {
rowArr.push(arr[begin++])
}
this.$set(this.dataRow, j, rowArr);
}
this.endNum = this.rows * this.rows;
},
initButturnSize: function () {
let longWidth = this.screenWidth * 0.90;
let needWidth = longWidth / this.rows;
if (needWidth > 300) {
needWidth = 300;
}
this.refStyle.width = needWidth + 'px';
this.refStyle.height = needWidth + 'px';
this.refStyle.fontSize = needWidth/2.8 + 'px';
},
// 生成一个 1-length 的无序数组
randomArray: function (length) {
let arr = [];
for (let i = 0; i < length; i++) {
arr.push(i + 1);
}
let index = length
// 从后往回走，每走一步随机和前面某一个进行交换
while (index) {
let j = Math.floor(Math.random() * index--);
let temp = arr[index]
arr[index] = arr[j]
arr[j] = temp;
}
return arr;
},
stopGame: function () {
this.warnMessage = '点击 ‘开始’ 按钮开始比赛';
this.stopTime();
this.startFlag = 0;
}
},
mounted() {
this.initData();
// 历史得分
let history = localStorage.getItem('scope_history');
if (history) {
this.historyScope = JSON.parse(history);
}
}
})
</script>
<style>
@font-face {
font-family: 'element-icons';//这个可以任意取，但是应与后面相对应
src: url('./css/element-icons.ttf') ;
src: url('./css/element-icons.woff') ;
}
</style>
</body>
</html>标签：function,index,arr,vue,训练,尔特,warnMessage,let,nowNum 来源： https://www.cnblogs.com/txt1024/p/16225936.html