1.點擊組隊開始pk按鈕跳轉到輸入4個數字的界面，輸出之后這個頁面只顯示登錄人的姓名，如果是第一個登錄的人就顯示開始pk按鈕，其他人不顯示開始pk按鈕，有幾個人登錄就會顯示幾個人的信息

2.隊長點擊開始pk，其他人頁面顯示等待隊長誰開始pk，然后都跳到pk界面，默認限時，然后寫上限時時間(時間是可以配置的)

3.當到了限時時間或者個人去掉限時時間然后點擊完成，此時判斷如果是一個人練習就把成績插入到result表中，如果判斷為一個組的pk此時就把成績插入到result表中，同時也插入到pk_result表中。

4.到了限時時間自動彈出pk的成績和排名。

1. 有四個數字同時下面還有9個數字的9宮格的設計拿一個舉例子

<input style="display:none;" #number1 value="1"><button type="button" class="btn" color="light" (click)="ChoiceNumber(number1)">1</button> <button type="button" class="btn" color="light" (click)="clearText()"><i class="fa fa-refresh"></i></button> ---刪除所有數字，界面上的刷新按鈕<button type ="button" class="btn" color="light" (click)="deleteText()">X</button> --界面上的x

?

// 輸入文本ChoiceNumber(number: any) {if (this.oneText === undefined || this.oneText === null || this.oneText === '') {this.oneText = number.value;return;}

?

// 四個數字都輸入完成了，調用查詢人員的方法 this.keyText = this.oneText + this.twoText + this.threeText + this.fourText; this.faceToface();

?

// 調用方法，前端傳一個model過去 faceToface() {this.interval = setInterval(() => {{const body = JSON.stringify({keyText: this.keyText,// userIdid: this.id, //從localstorage里面取出來的// userNamename: this.userName //從localstorage里面取出來的});const dataUrl = 'typing-web/teFaceToFace/findByKeyText';this.http.post(dataUrl, body).subscribe(res => {// 后端傳回來的結果const resObject: any = res.json();if (resObject.code === '0011') {this.showDialog('組隊完成，請加入其它組或30秒后再試！');clearInterval(this.interval); // 清除一直請求后端的方法this.router.navigateByUrl('workspace/typing-exercise/typing-exercise');return;}if (resObject.code !== '0000') {alert('加載失敗，請重新加入');clearInterval(this.interval); // 清除一直請求后端的方法this.router.navigateByUrl('workspace/typing-exercise/typing-exercise');return;}const pkModel: any = resObject.data; //定義局部變量就可以，沒有必要定義全局變量(因為我發現在前端的時候很多人都把所有的變量定義在類下面實際上是沒有必要的)if ( pkModel.started) {// 已開始，跳轉到打字頁面this.router.navigate(['workspace/typing-exercise/typing-test'], {queryParams: {previewflag: 'true'}});} else {// 顯示所有pk成員this.users = pkModel.userSet;if (pkModel.captionId === this.id) {// 判斷是否組長，是組長則顯示開始pk按鈕。this.firstPerson();}else {this.elsePerson();}}// 當組隊完成時記錄此時的組的id，為了下面更新是否pk開始的時候用localStorage.setItem('groupId', pkModel.groupId);// 顯示第一個人的姓名this.firstUserName = pkModel.captionName;});}}, 500);}

實際上應該先介紹后端是怎么寫的

controller ---> service就不介紹了，?重點就是serviceimp這一塊。

@Resourceprivate RedisTemplate redisTemplate;// 將輸入相同四個數字的人統計出來返回到頁面上@Overridepublic ItooResult findByKeyText(FaceToFaceModel faceToFaceModel) {// 當前端傳的數據跟后端實體的字段類型和命名一樣時可以傳到實體里面，下面是獲取界面上輸入的四個數字String keyText = faceToFaceModel.getKeyText();if (keyText == null) {return ItooResult.build("1111", "未獲得keyText值");}// 根據key值查詢出來所有的人PkModel pkModel = (PkModel) redisTemplate.opsForValue().get(keyText);if (pkModel == null) {//第一個人進入時，將其設置為隊長，生成組IdpkModel = new PkModel();pkModel.setKeyText(keyText);pkModel.setGroupId(BaseUuidUtils.base58Uuid());// 設置第一個人的Id 為了方便前端判斷是否為進入的第一個人pkModel.setCaptionId(faceToFaceModel.getId());// 設置第一個人的Name為了方便前端取出第一個人的名字顯示pkModel.setCaptionName(faceToFaceModel.getName());// 默認是否開始pk為falsepkModel.setStarted(false);Set<FaceToFaceModel> userSet = new HashSet<>();userSet.add(faceToFaceModel);// 像前端返回查詢到人的信息pkModel.setUserSet(userSet);// 將pkModel的信息添加到redis緩存中redisTemplate.opsForValue().set(keyText, pkModel);// 清除redis緩存的信息redisTemplate.expire(keyText, 30, TimeUnit.SECONDS);return ItooResult.build("0000", "查詢成功", pkModel);}//如果不是第一個人。if (pkModel.getStarted()) {//pk開始了Set<FaceToFaceModel> userSet = pkModel.getUserSet();if (userSet.contains(faceToFaceModel)) {//已加入本組隊的人return ItooResult.build("0000", "查詢成功", pkModel);} else {//尚未加入本組隊的人return ItooResult.build("0011", "組隊已完成，請加入其他分組！");}} else {//尚未開始,則把此人加入到userSet中。Set<FaceToFaceModel> userSet = pkModel.getUserSet();userSet.add(faceToFaceModel);pkModel.setUserSet(userSet);redisTemplate.opsForValue().set(keyText, pkModel);redisTemplate.expire(keyText, 30, TimeUnit.SECONDS);return ItooResult.build("0000", "查詢成功", pkModel);}

?這只是一部分的代碼。

?

總結

以上是生活随笔為你收集整理的打字练习pk之代码篇的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。