欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

用js写计算器代码

程序员文章站 2024-02-27 12:40:45
...

用js写计算器代码
此项目的收获
input[type=“text”]{}的css用法
isNaN(n):不能转换为数字:ture,可以转换成数字:flase
return !isNaN(n);
n=n.substr(0,n.length-1); 字符串减少最后一个
[0,NaN,“”,null,undefined]都可以直接转化为false,但这几个值不是完全相等的
return (n==“0”||n.length==0);判断里面是否正确,正确为true,错误为false;
NaN 属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。
window.location.href=“http://www.imooc.com”;跳转链接
获得数组的如getElementsByTagName必有其循环去支撑数组的运行
步骤
1.判断是否是数字。
2.数字叠加
3.加减乘除的运行
4.判断特殊符号的作用
完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算器</title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
            }
        .content{
            width: 170px;
            margin:100px 0 0 100px;
        }
        input[type="button"]{
            width:30px;
            margin-right: 5px;
            margin-bottom: 3px;
        }
        input[type="text"]{
            width: 149px;
            background-color: white;
            text-align: right;
            border: solid 1px;
            padding-right: 5px;
            box-sizing: border-box;
        }
    </style>
    <script>
        function init(){
            num=document.getElementById('num');
            num.disabled="disabled";
            num.value="0";
          var input=document.getElementsByTagName("input");
          score=0;
          char="";
            for(var i=0;i<input.length;i++){
                input[i].onclick=function(){
                    if(!isNaN(this.value)){
                        if(isNull(num.value)){
                            num.value=this.value;
                        }else{
                            num.value=num.value+this.value;
                        }
                    }else{
                        btn=num.value;
                        switch(this.value){
                            case "+":
                                score=Number(btn);
                                num.value="0";
                                char="+";
                                break;
                            case "-":
                                score=Number(btn);
                                num.value="0";
                                char="-";
                                break;
                            case "*":
                                score=Number(btn);
                                num.value="0";
                                char="*";
                                break;
                            case "/":
                                score=Number(btn);
                                num.value="0";
                                char="/";
                                break;
                            case "+/-":
                                num.value=sign(btn);
                                break;
                            case "←":
                                num.value=reduce(btn);
                                break;
                            case "C":
                                num.value=0;
                                break;
                            case ".":
                                num.value=point(btn);
                                break;
                            case "=":
                                switch(char){
                                    case "+":
                                        num.value=score+Number(num.value);
                                        break;
                                    case "-":
                                        num.value=score-Number(num.value);
                                        break;
                                    case "*":
                                        num.value=score*Number(num.value);
                                        break;
                                    case "/":
                                        if(Number(num.value)==0){
                                            alert('除数不可为0,请重新输入');
                                            num.value="0";
                                        }else{
                                            num.value=score/Number(num.value);
                                        }
                                        break;
                                }
                                break;
                        }
                    }
                }
            }
            
            
        }
        //判断长度
        function isNull(n){
            return (n=="0"||n.length==0);
        }
        //正负转变
        function sign(n){
            if(Number(n)){
                n=n*-1;
            }else{
                n=n;
            }
            return n;
        }
        //减少一位
        function reduce(n){
            n=n.substr(0,n.length-1);
            if(n=="0"||n.length==0){
                n="0";
            }
            return n;
        }
        //加小数点
        function point(n){
            if(n.indexOf(".")==-1){
                n=n+".";
            }else{
                n=n;
            }
            return n;
        }
        //使页面跳转到百度
        function imooc(){
            document.getElementById('imooc').onclick=function(){
                window.location.href="http://www.baidu.com";
            }
        }
    </script>
</head>
<body onload="init(),imooc()">
    <div class="content">
        <div class="top">
            <input type="text" name="" id="num" value="">
        </div>
        <div class="bottom">
            <input type="button" name="" id="" value="C" />
            <input type="button" name="" id="" value="←" />
            <input type="button" name="" id="" value="+/-" />
            <input type="button" name="" id="" value="/" />
            <input type="button" name="" id="" value="1" />
            <input type="button" name="" id="" value="2" />
            <input type="button" name="" id="" value="3" />
            <input type="button" name="" id="" value="*" />
            <input type="button" name="" id="" value="4" />
            <input type="button" name="" id="" value="5" />
            <input type="button" name="" id="" value="6" />
            <input type="button" name="" id="" value="-" />
            <input type="button" name="" id="" value="7" />
            <input type="button" name="" id="" value="8" />
            <input type="button" name="" id="" value="9" />
            <input type="button" name="" id="" value="+" />
            <input type="button" name="" id="" value="0" />
            <input type="button" name="" id="" value="." />
            <input type="button" name="" id="" value="=" />
            <input type="button" name="" id="imooc" value="m" />
        </div>
    </div>
</body>
</html>
相关标签: js javascript