关闭

Mini Calculator(JavaScript)

标签: javascripttextboxinputfunctiontablehtml
474人阅读 评论(0) 收藏 举报
分类:
<html>
    
<head>
        
<title>Calculator</title>
        
<script language="javascript">
            
            
//数字验证
            function ValidateIsNum(textbox)
            
{
                
//如果为空,则默认为0
                if(textbox.value == "")
                
{
                    textbox.value 
= 0;
                    
return true;
                }

                
//输入为非数字则清空并提示
                if(isNaN(textbox.value))
                
{
                    textbox.value 
= "";
                    alert(
"请输入数字");
                    textbox.focus();
                    
return false;
                }

                
return true;
            }

            
            
//改变提示
            function ChangeTitle(radio)
            
{
                
var title1 = document.getElementById("tdTitle1");
                
var title2 = document.getElementById("tdTitle2");
                
if(radio.id =="plus")
                
{                    
                    title1.innerText 
= "请输入加数1:";
                    title2.innerText 
= "请输入加数2:"
                }

                
if(radio.id == "minus")
                
{                    
                    title1.innerText 
= "请输入被减数:";
                    title2.innerText 
= "请输入减数:"
                }

                
if(radio.id == "multiply")
                
{                    
                    title1.innerText 
= "请输入被乘数:";
                    title2.innerText 
= "请输入乘数:"
                }

                
if(radio.id == "divide")
                
{
                    title1.innerText 
= "请输入被除数:";
                    title2.innerText 
= "请输入除数:"
                }

                
//有输入框为空,则Focus,不为空则计算
                var text1 = document.getElementById("input1");
                
var text2 = document.getElementById("input2");
                
if(text1.value == "")
                    text1.focus();
                
else if(text2.valuse == "")
                    text2.focus();
                    
else
                        Calc(text1,text2);
            }

            
            
function Calc(textbox1,textbox2)
            
{
                
//验证输入是否合法
                if(!ValidateIsNum(textbox1) || !ValidateIsNum(textbox2))
                
{
                    
return;
                }

                
var operand1 = parseFloat(textbox1.value);
                
var operand2 = parseFloat(textbox2.value);
                
var result = 0;
                
if(document.getElementById("plus").checked == true)
                
{
                    result 
= operand1 + operand2;
                }

                
if(document.getElementById("minus").checked == true)
                
{
                    result 
= operand1 - operand2;
                }

                
if(document.getElementById("multiply").checked == true)
                
{
                    result 
= operand1 * operand2;
                }

                
if(document.getElementById("divide").checked == true)
                
{
                    
if(operand2 != 0)
                    
{
                        result 
= operand1 / operand2;
                    }

                    
else
                    
{
                        alert(
"被除数不可为零");
                        textbox2.value 
= "";
                        textbox2.focus();
                    }

                }

                
//输出
                document.getElementById("inputResult").value = result;
            }

            
            
//当focus时如果内容为0,则清空
            function ClearWhenFocus(textbox)
            
{
                
if(textbox.value == 0)
                
{
                    textbox.value 
= "";
                }

            }

        
</script>
    
</head>
    
<body>
        
<table border="2">
            
<tr>
                
<td>请选择运算符:</td>
                
<td>
                    
<input type="radio" checked="true" id="plus" name="operator" onclick="ChangeTitle(this)"></input>+
                    
<input type="radio" id="minus" name="operator"  onclick="ChangeTitle(this)"></input>-
                    
<input type="radio" id="multiply" name="operator"  onclick="ChangeTitle(this)"></input>*
                    
<input type="radio" id="divide" name="operator"  onclick="ChangeTitle(this)"></input>/
                
</td>
            
</tr>
            
<tr>
                
<td id="tdTitle1">请输入加数1</td>
                
<td><input type="text" id="input1" style="display:block" onkeyup="Calc(this,input2)" onfocus="ClearWhenFocus(this)"></input></td>
            
</tr>
            
<tr>
                
<td id="tdTitle2">请输入加数2</td>
                
<td><input type="text" id="input2" style="display:block" onkeyup="Calc(input1,this)" onfocus="ClearWhenFocus(this)"></input></td>
            
</tr>
            
<tr>
                
<td>计算结果为:</td>
                
<td><input type="text" id="inputResult" style="display:block"></input></td>
            
</tr>
        
</table>
    
</body>
</html>
 
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:36788次
    • 积分:650
    • 等级:
    • 排名:千里之外
    • 原创:26篇
    • 转载:11篇
    • 译文:0篇
    • 评论:3条
    文章分类
    最新评论