iT邦幫忙

DAY 12
0

JavaScript學習路系列 第 12

JavaScript學習路-(12)猜數字遊戲

有鑒於一直寫理論方面的學習方式好像效果不太好
(前面寫錯的部分搞不好被各位 IT 大大在內心鞭之數十驅之別院了囧rz),
因此邊做邊學,日後文章可能練習與理論穿插(我很懷疑我還能不能睡覺...)
如果內容有誤還請不吝指正>_<

今天做的是猜數字的遊戲,輸入一個數字來猜猜我的吧~
網址請點我

以下記錄做法

html:
放個輸入框讓使用者輸入字串,這裡是字串喔!即使輸入的是數字,依然是字串。
按鈕跟字串各給他們一個 id

<input type="text" id="textfield" placeholder="輸入你的數字!">
<input type="button" id="btn" value="猜猜看">

JavaScript:
首先設定三個變數,我分別設定了最小值、正確答案以及最大值

var correctNum = 24;
var biggestNum = 100;
var smallestNum = 0;

當頁面讀取完畢後就執行 guessIt() 函式

window.onload = guessIt;

按下按鈕後執行猜猜看的函式。
guessIt() 函式抓取 #btn 的 onclick 事件 --> 執行判斷解答的函式
什麼是getElementById

function guessIt() {
document.getElementById('btn').onclick = function(evt) {
guessAnswer();
}
}

輸入數字後按下按鈕,就開始判斷輸入的字串囉!
宣告變數 textNum 抓取 input.textfield 的值後,再將 textNum 值轉成數字。
上面有提到,輸入的即使是數字,但他仍是字串。
什麼是 parseInt()
它可以把字串轉成整數,從範例來看只要前面沒有字串,都可以轉成整數
另外一個長得很像的函式叫做 parseFloat(); 則是可以轉成小數點兒
然後判斷輸入字串時的各種場景...一堆 if else 有點頭暈
除了小於等於大於以外,還要判斷輸入字為非字串的處理方式,
在這裏我利用轉不成數字就出現 NaN 特性,條件設定為非數字 (!textToInt) 通通顯示這項訊息 alert('這是什麼?可以吃嗎?Ψ( ̄∀ ̄)Ψ');

function guessAnswer() {
        var textNum = document.getElementById('textfield').value;
        var textToInt = parseInt(textNum);

        // 小於正確數字
        if (textToInt < correctNum) {
            alert('oops! 正確數字小於 ' + biggestNum + ' 大於 ' + textToInt + ' !');
        // 等於正確數字
        } else if (textToInt == correctNum) {
            alert('yes! 正確數字就是 ' + correctNum + ' !');
        // 大於正確數字
        } else if (textToInt > correctNum) {
            alert('oops! 正確數字小於 ' + textToInt + ' 大於 ' + smallestNum + ' !');
        // 非數字
        } else if (!textToInt) {
            alert('這是什麼?可以吃嗎?Ψ( ̄∀ ̄)Ψ');
        }

    }

以上同步發表於 http://azzurro.blog.aznc.cc/learn\_javascript\_12/


上一篇
JavaScript學習路-(11)Function-3
下一篇
JavaScript學習路-(13)Math
系列文
JavaScript學習路30

尚未有邦友留言

立即登入留言