这篇用来记录本次web作业所遇到的问题与心得。
作业描述：
- 写一个用于进行四则运算的js程序
- 写一个用于显示当前实时的js程序
已经解决的问题：
- 多个js的function放到一个<script>里面会导致无法运行——基本确定是调用的函数某一句出了问题，只不过编译器没有报错，我出现过的错误：没加分号、打错函数名…
- 使用<input>接收用户的输入后，可以使用<input>里的id属性，给用户的输入起个名字，例如：
<input id="num1"><input>，这样在后续使用时就可以利用id的名称（这个id在js中相当于作为了全局变量，但真正使用却需要用双引号括起来） - 触发js脚本（封装为函数的代码片）的方式有很多种：例如
<input type="button" value="点击我" onclick="function_name()">或者<a href="javascript:function_name()">链接调用函数<\a>或者<button onclick="javascript:function_name()">点击</button>等 - 通过id属性获取了输入的对象obj后，想要得到输入的值/字符串，需要使用
document.getElementById("obj").value来获取，不然直接对obj操作得不到想要的结果。
待解决的问题：
- isNaN()函数和我注释掉的正则表达式似乎都无法完美检测字符串是否可以转化为合法数值，在数字中间穿插字母无法被识别
- 见于本代码getResult()函数的注释部分，如果不满足条件，if()语句应该不会执行到内部，也就是说if(){}括起来的内容不会影响后续计算，可如果在其中加上alert()，则只要一次警告后，后续输入即使合法也再得不到应有的结果。
我的代码：
<!DOCTYPE html>
<html>
<head>
<title>counter.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function add(x, y){
return x + y;
}
function prime(x, y){
return x * y;
}
function sub(x, y){
return x - y;
}
function devide(x, y){
return x / y;
}
function getResult(){
x = document.getElementById("num1").value;
x = parseFloat(x);
y = document.getElementById("num2").value;
y = parseFloat(y);
algorithm = document.getElementById("algorithm").value;
if(!isLegal(x, y))
/* 如果不满足isLegal()的条件，应该不会执行到下面这句话，可不知道为什么如果是alert
就一定不会再执行后面的语句，也不会提示alert的内容*/
// alert("输入有误，请重新输入数字！");
return;
// alert(algorithm);
switch(algorithm){
case '+':
result = add(x, y);break;
case '-':
result = sub(x, y);break;
case 'x':
result = prime(x, y);break;
case '/':
// 先判断是否除零
if(!y){
alert("devide by zero!");
break;
}
result = devide(x, y);break;
default:
alert('执行有误！');break;
}
// output
document.getElementById("result").innerHTML = result;
}
</script>
<script type="text/javascript">
function isLegal(x, y){
// 正则匹配浮点数，不是很完善，中间穿插字母匹配不出来....
// if(!(/^[-+]?\d*\.?\d+$/.test(x)) || !(/^[-+]?\d*\.?\d+$/.test(y)))
// 下面也匹配不出来...
if(isNaN(x) || isNaN(y))
return false;
return true;
}
</script>
<script type="text/javascript">
function time(){
var vWeek,vWeek_s,vDay;
vWeek = ["星期天","星期一","星期二","星期三","星期四","星期五","星期六"];
var date = new Date();
year = date.getFullYear();
month = date.getMonth() + 1;
day = date.getDate();
hours = date.getHours();
minutes = date.getMinutes();
seconds = date.getSeconds();
vWeek_s = date.getDay();
document.getElementById("time").innerHTML = year + "年" + month + "月" + day + "日" + "\t" + hours + ":" + minutes + ":" + seconds + "\t" + vWeek[vWeek_s] ;
}
setInterval("time()",1000);
</script>
</head>
<body>
<!-- This is my HTML page. <br> -->
<div>
<h2>简单科学计算器</h2>
<input id='num1' type='text'></input>
<select id='algorithm'>
<option id='add'>+</option>
<option id='sub'>-</option>
<option id='prime'>x</option>
<option id='devide'>/</option>
</select>
<input id='num2' type='text'>=<span id='result'>?</span></input>
<br>
<button onclick="javascript:getResult()">结果</button>
<br>
</div>
<div>
<br>
<h2>当前日期</h2>
<div id="time"></div>
<br>
</div>
</body>
</html>
