Javascript是一種在網(wǎng)頁(yè)中使用的腳本語(yǔ)言,可以通過(guò)它控制文本框的加減。舉個(gè)例子,假如我們要在頁(yè)面上制作一個(gè)計(jì)算器,用戶可以通過(guò)點(diǎn)擊按鈕實(shí)現(xiàn)數(shù)字的加減,那么這時(shí)我們就可以運(yùn)用Javascript來(lái)實(shí)現(xiàn)此功能。
首先,在HTML中創(chuàng)建一個(gè)文本框和兩個(gè)按鈕,一個(gè)表示加一個(gè)表示減。代碼如下:
<input type="text" id="number" value="0"><br><button onclick="add()">+</button><button onclick="subtract()">-</button>
其中,number為文本框的ID,這里我們默認(rèn)用戶直接在文本框中輸入0作為初始值。
接下來(lái),在Javascript中定義add()和subtract()兩個(gè)函數(shù)。代碼如下:
function add() { var num = document.getElementById("number").value; num++; document.getElementById("number").value = num; } function subtract() { var num = document.getElementById("number").value; num--; document.getElementById("number").value = num; }
在函數(shù)中,我們通過(guò)document.getElementById獲取到文本框的值,實(shí)現(xiàn)對(duì)數(shù)字的加減,然后再將新的結(jié)果賦值給文本框。
但是這樣存在一個(gè)問(wèn)題,如果用戶輸入的不是一個(gè)數(shù)字,會(huì)導(dǎo)致程序出錯(cuò)。因此我們需要加入符合性檢查,檢查用戶輸入的是否為數(shù)字。代碼如下:
function add() { var num = document.getElementById("number").value; if(!isNaN(num)){ num++; document.getElementById("number").value = num; } } function subtract() { var num = document.getElementById("number").value; if(!isNaN(num)){ num--; document.getElementById("number").value = num; } }
加入了符合性檢查后,我們就可以放心地讓用戶進(jìn)行計(jì)算了。
但是,我們還需要考慮一個(gè)問(wèn)題。如果用戶一直不停的點(diǎn)擊加減按鈕,數(shù)字一直在變化,那么我們?nèi)绾卧O(shè)置一定的限制使其不會(huì)超出一個(gè)合理的范圍呢?這時(shí)我們可以在函數(shù)中添加一個(gè)判斷條件,限制數(shù)字的上下限。比如文本框中只能輸入1-100之間的數(shù)字。代碼如下:
function add() { var num = document.getElementById("number").value; if(!isNaN(num)){ num++; if(num >100){ num = 100; } document.getElementById("number").value = num; } } function subtract() { var num = document.getElementById("number").value; if(!isNaN(num)){ num--; if(num< 1){ num = 1; } document.getElementById("number").value = num; } }
這樣就可以避免數(shù)字超過(guò)上下限的問(wèn)題。
在實(shí)際開發(fā)中,我們還需要考慮其他因素,比如兼容性、文本框的樣式設(shè)計(jì)等等。但是通過(guò)以上的演示,我們可以基本了解Javascript如何控制文本框的加減。