자 바스 크 립 트 초시계 타임 게임 실현

12475 단어 js스톱워치시간 을 재다
본 논문 의 사례 는 자바 script 이 스톱워치 타임 게임 을 실현 하 는 구체 적 인 코드 를 공유 하여 여러분 께 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
설명
이 게임 페이지 의 디자인 은 좌우 두 칸 으로 나 뉜 다.왼쪽 위 는 주마등 이 고 왼쪽 아래 는 타이머 와'START'버튼 입 니 다.오른쪽 위 는 차 트,오른쪽 아래 는 게임 규칙 설명.
주마등 은 타 이 머 를 사용 하여 한 번 순환 한다.타 이 머 는'00:00:00'부터 시간 을 잽 니 다.'START'버튼 을 누 르 면 게임 을 시작 합 니 다.게임 을 멈 추 는 것 은 스페이스 바 를 누 르 는 것 입 니 다.게임 은 정지 시간 과'00:10:00'시간,즉 10 초 전의 시간 차 를 계산한다.10 초 전에 스페이스 바 를 누 르 고 멈 추 면 벌칙 이 있 습 니 다.벌칙 은 이전에 계 산 된 시간 차 가 배로 벌 어 집 니 다.마지막 으로 최종 시차 에 따라 작은 것 부터 큰 것 까지 순 위 를 매 긴 다.
2.효과 전시

코드
3.1 HTML

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>     </title>
 <link rel="stylesheet" href="./css/play.css" rel="external nofollow" >
 <script src="./js/play.js"></script>
</head>

<body>
 <div>
  <!--   -   -->
  <div id="left">
   <!--     -->
   <div id="marquee">
    <table>
     <tr id="tr1">
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
     </tr>
     <tr id="tr2">
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
     </tr>
     <tr id="tr3">
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
     </tr>
     <tr id="tr4">
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
     </tr>
    </table>
   </div>
   <!--     -->
   <div id="time">
    <span id="id_M">00</span>:
    <span id="id_S">00</span>:
    <span id="id_MS">000</span>
   </div>
   <br><br>
   <!-- "START"   -->
   <div>
    <button id="start">START</button>
   </div>
   <br><br>
  </div>

  <!--   -   -->
  <div id="right">
   <!--     -->
   <div class="board1">
    <table border="1" id="leaderboard">
     <caption>   </caption>
     <tr>
      <th>  </th>
      <th>  ID</th>
      <th>    </th>
      <th>    </th>
      <th>   </th>
     </tr>
    </table>
   </div>
   <!--        -->
   <div class="board2">
    <div>
     <div style="font-size: 1.5em;">      ：</div>
     <p>&emsp;&emsp;<span>  "START"    ，      10    ，         ，              10       ，                  。</span>
                ，      "START"。
      <br>&emsp;&emsp;
      <span style="color: rgb(202, 59, 59);">  ：     10       ，  “  ”  ，    ，       ！</span>
     </p>
    </div>
   </div>
  </div>
 </div>
</body>

</html>
3.2 CSS

body {
 background-image: url("../images/img02.png");
 background-size: cover;
}

body>div {
 display: flex;
 margin: 50px 50px 0px 50px;
}

/*   -   */
#left {
 height: 550px;
 flex: 1;
 text-align: center;
 background-color: rgba(10, 0, 6, 0.3);
}

/*     */
#marquee {
 width: 100%;
 height: 300px;
}

#marquee table {
 width: 95%;
 height: 280px;
 margin: 5px 20px 0px 20px;
 border-spacing: 20px;
}

#marquee table td {
 background-color: rgba(9, 28, 38, 0.8);
 border-radius: 5px;
}

/*    ： 、 、   */
#time {
 font-size: 4.5em;
 color: #02C4F2;
}

/* "START"   */
#start {
 font-size: 3em;
 background-color: rgba(10, 0, 6, 0.5);
 border-style: solid;
 border-color: #344665;
 color: #02C4F2;
 border-radius: 10px;
 cursor: pointer;
}

/*   -   */
#right {
 flex: 1;
 margin-left: 50px;
}

/*         */
#right .board1 {
 height: 350px;
 width: 100%;
 border: 1px solid #344665;
 overflow-y: scroll;
 padding: 5px;
 background-color: rgba(10, 0, 6, 0.2);
}

/*       */
#right>div::-webkit-scrollbar {
 background-color: rgba(219, 200, 212, 0.4);
}

/*        */
#right>div::-webkit-scrollbar-thumb {
 border-radius: 5px;
 background: rgba(155, 24, 24, 0.5);
}

/*     */
#leaderboard {
 width: 100%;
 border-color: #344665;
 color: white;
 font-size: 1.3em;
 text-align: center;
}

#leaderboard th {
 width: 18%;
}

/*        */
#right .board2 {
 height: 165px;
 width: 100%;
 border: 1px solid #344665;
 margin-top: 10px;
 padding: 5px;
 background-color: rgba(10, 0, 6, 0.2);
 color: white;
 line-height: 1.5em;
}

.board2>div {
 margin: 4px;
}
3.3 Javascript

window.onload = function () {

 var count = 0; //            
 var timer; //       ，       
 var timer_color; //       ，       
 var flag = false; //     ，                    
 /*    */
 var id_M = document.getElementById("id_M");
 var id_S = document.getElementById("id_S");
 var id_MS = document.getElementById("id_MS");
 /*     */
 var td1 = this.document.getElementById("tr1").getElementsByTagName("td");
 var td2 = this.document.getElementById("tr2").getElementsByTagName("td");
 var td3 = this.document.getElementById("tr3").getElementsByTagName("td");
 var td4 = this.document.getElementById("tr4").getElementsByTagName("td");
 var color = td1[1].style.backgroundColor; //           ，    

 /*      */
 var start = this.document.getElementById("start");
 start.onclick = function () {
  start.blur(); //     
  if (flag) {
   clearInterval(timer); //               "START"   
  }
  flag = true;
  /*     */
  var ms = new Date().getTime();
  timer = setInterval(function () {
   count = new Date().getTime() - ms;
   id_M.innerText = handleTime1(parseInt(count / 1000 / 60));
   id_S.innerText = handleTime1(parseInt(count / 1000 % 60));
   id_MS.innerText = handleTime2(count % 1000);
  }, 103);
  /*     */
  clear(0); //      
  row = 4; //     
  col = 4; //     
  timer_color = setInterval(paomadeng, 200);
 }
 /*     ( 、 ) */
 function handleTime1(num) {
  if (num < 10) {
   return '0' + num;
  }
  return num;
 }
 /*     (  ) */
 function handleTime2(num) {
  if (num < 10) {
   return "00" + num;
  } else if (num < 100) {
   return '0' + num;
  }
  return num;
 }
 /*     */
 var row = 4,
  col = 4;
 function paomadeng() {
  if (col == -1) {
   clear(col + 1);
   col = 4;
  }
  if (row == 4) {
   clear(col + 1);
   td4[col].style.backgroundColor = "green";
   row--;
  } else if (row == 3) {
   td3[col].style.backgroundColor = "red";
   row--;
  } else if (row == 2) {
   td2[col].style.backgroundColor = "blue";
   row--;
  } else if (row == 1) {
   td1[col].style.backgroundColor = "#47DE00";
   row = 4;
   col--;
  }
 }
 /*       */
 function clear(n) {
  for (; n <= 4; n++) {
   td1[n].style.backgroundColor = color;
   td2[n].style.backgroundColor = color;
   td3[n].style.backgroundColor = color;
   td4[n].style.backgroundColor = color;
  }
 }



 /*         */
 this.document.onkeypress = function (ev) {
  // 32    
  if (ev.keyCode == 32 && flag) {
   clearInterval(timer);
   clearInterval(timer_color);
   flag = false;
   //      
   addRow();
  }
 }

 //    
 var table = this.document.getElementById("leaderboard");
 //          
 var players = [];
 /*       */
 function addRow() {
  var rows = table.rows.length;
  var insertTr;

  var before_time_diff = count - 10 * 1000; //      
  var after_time_diff; //      
  if (before_time_diff < 0) {
   after_time_diff = Math.abs(before_time_diff) * 2;
  } else {
   after_time_diff = before_time_diff;
  }
  // rows==1，        ；        
  if (rows != 1) {
   for (var i = 0; i < players.length; i++) {
    if (after_time_diff < players[i]) {
     console.log(after_time_diff, players[i])
     insertTr = table.insertRow(i + 1);
     break;
    }
   }
   if (insertTr == null) {
    insertTr = table.insertRow(rows);
   }
  } else {
   insertTr = table.insertRow(rows);
  }

  //   
  var inserTd = insertTr.insertCell(0);
  inserTd.innerText = rows
  //    
  var inserTd = insertTr.insertCell(1);
  inserTd.innerText = "  " + rows
  //     
  var inserTd = insertTr.insertCell(2);
  inserTd.innerText = id_M.innerText + ":" + id_S.innerText + ":" + id_MS.innerText
  //     
  var inserTd = insertTr.insertCell(3);
  if (before_time_diff < 0) {
   inserTd.innerText = " "
  } else {
   inserTd.innerText = " "
  }
  //      
  var inserTd = insertTr.insertCell(4);
  var M = handleTime1(parseInt(after_time_diff / 1000 / 60));
  var S = handleTime1(parseInt(parseInt(after_time_diff / 1000 % 60)));
  var MS = handleTime2(parseInt(parseInt(after_time_diff % 1000)));
  inserTd.innerText = M + ":" + S + ":" + MS

  //               players，   
  players.push(after_time_diff);
  players.sort(sortNum); //   ，sort             ，          
  //     
  resetRank();
 }
 /*         （    ） */
 function sortNum(a, b) {
  return a - b;
 }
 /*      */
 function resetRank() {
  var tr = document.getElementById("leaderboard").getElementsByTagName("tr");
  for (var i = 1; i < tr.length; i++) {
   tr[i].getElementsByTagName("td")[0].innerText = String(i);
  }
 }
}
더 많은 재 미 있 는 클래식 게임 을 통 해 주 제 를 실현 하고 여러분 에 게 공유 합 니 다.
C++클래식 게임 모음
python 클래식 게임 모음
python 러시아 블록 게임 집합
JavaScript 클래식 게임 을 계속 합 니 다.
javascript 고전 게임 모음
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
정규 표현 식 배우 기(js,C\#)
하이퍼링크 로 마우스 이동 효과

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage