注意：用到了jquery需要引入jquery.min.js。
需求：
1.每個地方需要分別打分，總分為100;
2.第一個打分總分為40;
3.第二個打分總分為60。
注意：需要判斷null、""、isNaN()(是否是數字:如輸入的是字母"a")、輸入數值大小范圍不能超過規定的總分;
如果為null、""、isNaN為true、輸入數值大小范圍超過規定的總分則將文本框賦值為空並將input對應的數值賦值為0參與計算總分。
文本框輸入數值的時候總數會隨着分數的輸入而實時變化(即js實時監聽input中值變化)。(實踐是propertychange兼容各個瀏覽器，如IE、火狐、谷歌等)
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="js/jquery.min.js"></script> <title>Insert title here</title> <style type="text/css"> </style> <script type="text/javascript"> $(function(){ $('input').bind('input propertychange', function() { var input1 = $("#input1").val(); var input2 = $("#input2").val(); var result = 0; if(input1==null||input1==""){ input1 = parseInt(0); }else if(isNaN(input1)){ alert("請填寫數字！"); $("#input1").val(""); input1 = parseInt(0); }else{ input1 = parseInt(input1); if(input1>40){ alert("填寫的分數不能超過40"); $("#input1").val(""); input1 = parseInt(0); } } if(input2==null||input2==""){ input2 = parseInt(0); }else if(isNaN(input2)){ alert("請填寫數字！"); $("#input2").val(""); input2 = parseInt(0); }else{ input2 = parseInt(input2); if(input2>60){ alert("填寫的分數不能超過60"); $("#input2").val(""); input2 = parseInt(0); } } result = input1+input2; $("#totalScore").val(result); }); }); </script> </head> <body> <!-- js 實時監聽input中值變化 --> 分數1：<input id="input1" name="input1" value=""> <span style="color: red;">(總分為40)</span><br> 分數2：<input id="input2" name="input2" value=""> <span style="color: red;">(總分為60)</span><br><br> 總 分：<input id="totalScore" name="totalScore" value=""><br> </body> </html>