本範例是以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/>加 <input type="radio" name="choose" id="minus" checked/>減 <input type="radio" name="choose" id="mulitiple" checked/>乘 <input type="radio" name="choose" id="division" checked/>除 </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; } } |
呈現效果:
沒有留言:
張貼留言