2016年5月28日 星期六

JavaScript的基本概念(四) & 小學生四則運算

本範例是以HTML、CSS、JavaScript做一個簡易型的四則運算,呈現效果為判斷答題的正確性,且會依結果動態顯示圖片與音效。專案管理方面會以分工概念(HTML : 骨架、CSS : 皮肉、JavaScript :神經)將程式碼抽離,以下將分別介紹檔案的相關功能。


index.html:
為專案的主要核心,以<table>、<tr>、<td>、<input>、<img>、<audio>等標籤排列出的HTML網頁,並搭配basic_style.css、code.js等資源的導入,所呈顯的網頁程式架構。


css/basic_style.css
用來控制版面位置、網頁配色、文字與圖片特效等。


js/code.js
此檔案用JavaScript語法編寫,主要是讓HTML網頁增加動態效果,我們只需要用<script>標籤崁入JavaScript的程式碼就可以了。


images、sounds
放置圖片、音效等資源,用資料夾區分資料型別以方便管理。






程式範例如下:


index.html:
<!DOCTYPE html>

<html lang="en">
   
   <head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
       <!-- 導入資源-->
       <link rel="stylesheet" href="css/basic_style.css"/>
       <script src="js/code.js"></script>
       <title>小學生四則運算</title>
   </head>

   <body style="background-color: #CDE6B5">
       
       <table class="main">
           <tr class="tr1">
               <td>小學生四則練習</td>
           </tr>
           <tr class="tr2">
               <td>
                   <!--請輸入第一個數:-->
                   <table>
                       <tr>
                           <td style="width: 410px">請輸入第一個數:
                           </td>
                           <td style="width: 40px">
                               <input type="text" class="number" id="first"/>
                           </td>
                       </tr>
                   </table>
               </td>
           </tr>
           <tr class="tr3">
               <td>
                   <!--請輸入第二個數:-->
                   <table>
                       <tr>
                           <td style="width: 410px">請輸入第二個數:
                           </td>
                           <td style="width: 40px">
                               <input type="text" class="number" id="second"/>
                           </td>
                       </tr>
                   </table>
               </td>
           </tr>
           <tr class="tr4">
               <td>
                   請選擇算法:
               </td>
           </tr>
           <tr class="tr5">
               <td style="text-align: center">
                   <!--從form表單中取-->
                   <form id="form">
                       <input type="radio" name="choose" id="plus" checked/>&nbsp;&nbsp;&nbsp;
                       <input type="radio" name="choose" id="minus" checked/>&nbsp;&nbsp;&nbsp;
                       <input type="radio" name="choose" id="mulitiple" checked/>&nbsp;&nbsp;&nbsp;
                       <input type="radio" name="choose" id="division" checked/>&nbsp;&nbsp;&nbsp;
                   </form>
               </td>        
           </tr>
           <tr class="tr6">
               <td>
                   <!-- 呈現的欄位 -->
                   <table>
                       <tr>
                           <td style="width: 100px">答案:                                
                           </td>
                           <td style="width: 110px">
                               <input type="text" style="width: 40px" id="answer"/>
                           </td>
                           <td style="width: 110px">
                               <button onclick="check();">檢查</button>
                           </td>
                           <td style="width: 110px">
                               <button onclick="reset();">重填</button>
                           </td>
                       </tr>
                   </table>    
               </td>
           </tr>
           <tr class="tr7">
               <td>
                   <img src="images/math.jpg" alt="fff" id="pic"/>
               </td>
           </tr>
       </table>
       <audio src="sounds/ok.mp3" id="ok" preload="auto"></audio>
<audio src="sounds/no.mp3" id="no" preload="auto"></audio>
   </body>
</html>



basic_style.css
   .main{
position: absolute;
left: 50%;
top: 50%;
width: 450px;
height: 600px;
margin-top: -300px;
   margin-left: -225px;
   border-collapse: collapse;
   background-color: #ffffff;
}
.number{
width: 30px;
}
.tr1{
height: 50px;
text-align: center;
font-family: 標楷體;
font-size: 40px;
color: blue;
background-color: #BAED77;
margin: 10px;
}
.tr2{
height: 50px;
text-align: left;
font-family: 標楷體;
font-size: 20px;
color: blue;
background-color: #9DD651;
margin: 10px;
}
.tr3{
height: 50px;
text-align: left;
font-family: 標楷體;
font-size: 20px;
color: blue;
background-color: #85BD51;
margin: 10px;
}
.tr4{
height: 50px;
text-align: left;
font-family: 標楷體;
font-size: 20px;
color: blue;
background-color: #72A147;
margin: 10px;
}
.tr5{
height: 50px;
text-align: center;
font-family: 標楷體;
font-size: 20px;
color: blue;
background-color: #658C41;
margin: 10px;
}
.tr6{
height: 50px;
text-align: left;
font-family: 標楷體;
font-size: 20px;
color: blue;
background-color: #5B7A3D;
margin: 10px;
}
   #pic{
   width: 450px;
   height: 300px;
}


code.js
  /*1.宣告在所有的{}外面(全域變數),這樣這些變數才可以被程式的其他區段使用*/
   var first_number, second_number, answer_number;
   // 方法變數名
   var runOK, runNO;
   var runOK_02, runNO_02;

   /*2.使用window.onload系統事件,這個事件會在整個網頁完全載入後,執行他的(無名)事件處理函數*/
   window.onload = function () {
       first_number = document.getElementById("first");
       second_number = document.getElementById("second");
       answer_number = document.getElementById("answer");
   };

   /*3.1在"重填"按鈕按下去後觸發一個"click"使用者操作事件(已經以onclick屬性指定)*/
   function reset() {
       first_number.value = "";
       second_number.value = "";
       answer_number.value = "";
       
       //暫時音效
       audioOk.currentTime = 0;
       audioOk.pause();
       audioNO.currentTime = 0;
       audioNO.pause();
              
   }

   /*3.2在"檢查"按鈕按下去後觸發一個"click"使用者操作事件(已經以onclick屬性指定)*/
   function check() {
       //取得三個文字框中使用者的輸入
       var n1 = first_number.value;
       var n2 = second_number.value;
       var answer = answer_number.value;
       //window.alert("第一個數:" + first + "第二個數:" + second + "第三個數:" + third);
       
       //由四個單選項的form的radio的name屬性取得radio陣列
       var form = document.getElementById("form");
       var caculations = form.choose;
       var counter = 0;
       var correct_ans_number;
       var pic = document.getElementById("pic");

       //用一個迴圈,把陣列每一個元素走一遍
       for (var i = 0; i < caculations.length; i++) {
           //window.alert(caculations[i].value);
           if (caculations[i].checked) {
               correct_ans_number = i;
           }
       }

       //取得音效監聽控制器
       var audioOk = document.getElementById("ok");
       var audioNO = document.getElementById("no");
       
       /*4.1 計算正確--連續播放圖片與音效*/
       runOK = function (n1, n2, answer) {
           runOK_02 = window.setInterval(
                       function () {
                           counter++;
                           switch (counter) {
                               case 1:
                                   pic.src = "images/laugh1.png";
                                   break;
                               case 2:
                                   pic.src = "images/laugh2.png";
                                   break;
                               case 3:
                                   pic.src = "images/laugh3.png";
                                   break;
                               case 4:
                                   pic.src = "images/laugh4.png";
                                   break;
                           }
                           if (counter == 4) {
                               counter = 0;
                           }

                       }
                   , 500);
           /*4.1.1 */
           alert("yes");
           audioOk.play();
           //暫時音效
           audioNO.currentTime = 0;
           audioNO.pause();
           /*需要全域變數才可執行*/
           window.clearInterval(runNO_02);
       }

       /*4.2 計算錯誤--連續播放圖片與音效*/
       runNO = function (n1, n2, answer) {
           runNO_02 = window.setInterval(
                       function () {
                           counter++;
                           switch (counter) {
                               case 1:
                                   pic.src = "images/cry1.jpg";
                                   break;
                               case 2:
                                   pic.src = "images/cry2.jpg";
                                   break;
                               case 3:
                                   pic.src = "images/cry3.jpg";
                                   break;
                               case 4:
                                   pic.src = "images/cry4.jpg";
                                   break;
                           }
                           if (counter == 4) {
                               counter = 0;
                           }

                       }
                   , 500);
           /*4.2.1 */
           audioNO.play();
           alert("no");
           //暫時音效
           audioOk.currentTime = 0;
           audioOk.pause();          
           /*需要全域變數才可執行*/
           window.clearInterval(runOK_02);
       }


       /*5.判斷點擊--加減乘除*/
       //alert("n1=" + n1 + " n2=" + n2 + " answer=" + answer);
       switch (correct_ans_number) {
           case 0:
               if ((parseInt(n1) + parseInt(n2) == answer)) {runOK(n1,n2,answer);}
               else {runNO(n1,n2,answer);}
               break;
           case 1:
               if ((n1 - n2) == answer) {runOK(n1,n2,answer);}
               else {runNO(n1,n2,answer);}
               break;
           case 2:
               if ((n1 * n2) == answer) { runOK(n1,n2,answer);}
               else {runNO(n1,n2,answer);}
               break;
           case 3:
               if ((n1 / n2) == answer) {runOK(n1,n2,answer);}
               else {runNO(n1,n2,answer);}
               break;
       }

   }


呈現效果:


沒有留言:

張貼留言

[java] 條件控制

前言: 在 java 的條件控制中可分為 if-else 架構、三元運算子、switch-case 架構這三類,其中 if-else、三元運算子為條件型的判斷,條件必須為 true/false布林值;switch-case 為比對變數型的判斷,條件值比較多可以是 char、...