input輸入數值自動計算

2021-09-25 02:00:06 字數 1269 閱讀 9339

有很多時候我們需要在一些輸入框輸入某一些內容後然後就在其他地方顯示出來一些結果,例如計算一些和、差、商、積等等,也可以有複雜的運算,只要符合你的需求即可。

例如下面乙個例子的,通過填寫去程預計時間和回程預計時間計算出總預計時間,其實方法很簡單,就是獲取到去程和回程的預計時間一加起來就是總預計時間了。

但是我們在頁面上只能給輸入框輸入數值,這需要電腦自己去計算。需要讓電腦自己執行計算的方法就要使用到乙個事件,onchange()改變事件。通過改變事件可以在輸入框的內容發生改變時觸發我們寫好的計算方法,然後計算出結果值。因為總預計時間=去程預計時間+回程預計時間,所以改變事件要寫到去程和回程兩個輸入框上。

完成這個功能的全部**都在上面了,效果圖:

驗證輸入值的原因是判斷一下輸入的值是否為整數或者為一到兩位小數的小數。而且獲取到的值不能直接運算,需要轉換一下型別,因為獲取到的內容是字串型別的,如果不轉換的情況下運算是無法完成是,如果是相加就會出現字串拼接的情況。

parsefloat是轉換成浮點型這樣可以計算小數、整數,當然也可以轉換成整型(parseint),但只能計算整數。如果需要計算小數時一定不要忘記了乙個事情,它們相加的結果和我們平時計算的結果是不相等的。例如0.1+0.2是不等於0.3的。

所以在計算小數時只需要保留2位小數即可,就是計算結果最後加上的tofixed(2),需保留多少位就寫多少。

最後乙個問題就是當只輸入了乙個輸入框的情況下,不進行判斷賦值的話會出現總預計時間的輸入框顯示nan。因為空字串無法轉換成數字型別,出現無法計算的情況,所以要判斷如果有為空的值就使這個值為0這樣就可以計算了。

這樣子輸入數值自動計算的功能就完成了,自動計算其實就是體現在改變事件上。用這個方法你可以執行更為複雜的運算過程。

input輸入框自動消除空格

今天遇到了乙個問題,使用者在在前端的input裡面輸入id的時候,多寫了個空格,資料庫裡面就找不到id了,所以無法獲取輸入的id所繫結的標籤位置在 現在需要在前端做乙個處理,input框輸入的數值裡面,會自動消除空格。示例 資產編號 這段 的作用 onkeyup this.value this.va...

input輸入框自動消除空格

今天遇到了乙個問題,使用者在在前端的input裡面輸入id的時候,多寫了個空格,資料庫裡面就找不到id了,所以無法獲取輸入的id所繫結的標籤位置在 現在需要在前端做乙個處理,input框輸入的數值裡面,會自動消除空格。示例 資產編號 這段 的作用 onkeyup this.value this.va...

input輸入框自動獲取焦點

使用者名稱 密碼 focus 不生效 在執行一段指令碼時,對dom的操作應當是即時生效的。dom操作確實都是同步的。但是因dom改變而觸發的事件,以及其他一些效應 例如樣式應用 很可能是非同步的。所以,focus這裡可能是有延遲的。也有人說指令碼對dom的操作不是即時生效的,瀏覽器可能執行完當前指令...