用vue寫一個舒爾特訓練表
阿新 • • 發佈：2022-05-05
檢視程式碼
<!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>