html js 计算器 小程序 过滤非数字

来源:互联网 发布:钉钉wifi打卡mac地址 编辑:程序博客网 时间:2024/05/16 14:27

(暂不支持小数)




<!DOCTYPE html> 
<html lang="zh-cn" author="csdn_cloudyc"> 
    <meta name="content-type" content="text/html; charset=utf-8"> 
<head> 
<title>Calculator</title> 
<!--将按键内容以字符串形式存储在文字框中当按钮为“=”时,调用eval方法计算结果然后将结果输出文字框中--> 
<script type="text/javascript"> 
    var numresult; 
    var str; 
    function onClickNum(num) { 
        str = document.getElementById("nunmsg"); 
        str.value = str.value + num; 
    } 
    function onClickClear() { 
        str = document.getElementById("nunmsg"); 
        str.value = ""; 
    } 
    function onClickResult() { 
        str = document.getElementById("nunmsg"); 
        numresult = eval(str.value); 
        str.value = numresult;
    }
    function onNoneNumber(in_value) {
        var rule = /^\d+$/;
        if (!rule.test(in_value)) {
            alert('Please input numeric!');
            this.value = in_value.replace(0, in_value.Length - 1);
         
        }
    }
</script> 
</head> 
<body bgcolor="#EEEEEE" > 
    <div align="center" style="font-size:40px;" >Calculator</div>
    <!--定义按键--> 
    <table border="1" align="center" bgcolor="#DDD" style="height:350px; width:270px"> 
        <tr> 
            <td colspan="4"> 
            <input type="text" id="nunmsg"  style="height:90px; width:100%  ; font-size: 50px" 
            onkeyup="var rule = /^\d+$/; if(!rule.test(this.value)) {this.value=this.value.replace(/[^\d]+/g,'');}"
            <!--onkeyup="onNoneNumber(this.value)-->"/> 
            </td> 
        </tr> 
        <tr>    
             <td> 
                 <input type="button" value="1" id="1" onclick="onClickNum(1)" style="height: 70px; width: 90px; font-size: 35px"> 
            </td> 
            <td> 
                <input type="button" value="2" id="2" onclick="onClickNum(2)"  style="height: 70px; width: 90px; font-size: 35px"> 
            </td> 
            <td> 
                <input type="button" value="3" id="3" onclick="onClickNum(3)"  style="height: 70px; width: 90px; font-size: 35px"> 
            </td> 
            <td> 
                <input type="button" value="+" id="add" onclick="onClickNum('+')" style="height: 70px; width: 90px; font-size: 35px"> 
            </td> 
        </tr> 
        <tr> 
            <td> 
                <input type="button" value="4" id="4" onclick="onClickNum(4)"  style="height: 70px; width: 90px; font-size: 35px"> 
            </td> 
            <td> 
                <input type="button" value="5" id="5" onclick="onClickNum(5)"  style="height: 70px; width: 90px; font-size: 35px"> 
            </td> 
            <td> 
                <input type="button" value="6" id="6" onclick="onClickNum(6)" style="height: 70px; width: 90px; font-size: 35px"> 
            </td> 
            <td> 
                <input type="button" value="-" id="sub" onclick="onClickNum('-')" style="height: 70px; width: 90px; font-size: 35px"> 
            </td> 
        </tr> 
    <tr> 
        <td> 
            <input type="button" value="7" id="7" onclick="onClickNum(7)" style="height: 70px; width: 90px; font-size: 35px"> 
        </td> 
        <td> 
            <input type="button" value="8" id="8" onclick="onClickNum(8)" style="height: 70px; width: 90px; font-size: 35px"> 
        </td> 
        <td> 
            <input type="button" value="9" id="9" onclick="onClickNum(9)" style="height: 70px; width: 90px; font-size: 35px"> 
        </td> 
        <td> 
            <input type="button" value="×" id="mul" onclick="onClickNum('*')" style="height: 70px; width: 90px; font-size: 35px"> 
        </td> 
    </tr> 
    <tr> 
        <td colspan="2"> 
            <input type="button" value="0" id="0" onclick="onClickNum(0)" style="height: 70px; width: 190px; font-size: 35px"> 
        </td> 
        <td> 
            <input type="button" value="." id="point" onclick="onClickNum('.')" style="height: 70px; width: 90px; font-size: 35px"> 
        </td> 
        <td> 
            <input type="button" value="/" id="division" onclick="onClickNum('/')" style="height: 70px; width: 90px; font-size: 35px"> 
        </td> 
    </tr> 
    <tr> 
        <td colspan="2"> 
            <input type="button" value="Clear" id="clear" onclick="onClickClear()" style="height: 70px; width: 190px; font-size: 35px" /> 
        </td> 
        <td colspan="2"> 
            <input type="button" value="=" id="result" onclick="onClickResult()" style="height: 70px; width: 190px; font-size: 35px" /> 
        </td> 


    </tr> 


    </table> 
</body> 
</html> 

0 0
原创粉丝点击