一个简单的javascript计算器 javascript计算器代码

转载

mob6454cc773039 2023-06-12 00:36:45

文章标签 javascript写计算器含括号 javascript html css input标签 文章分类 JavaScript 前端开发

JavaScript 计算器

一、实现功能
二、展示

1.代码展示
2.效果展示
3.总结

一、实现功能

（1）利用css样式、javascript语言和html语言实现计算器的算法（2）对计算器的页面进行规划以及对界面进行颜色的填涂（3）对界面各个边框边距进行适当的调整

二、展示

1.代码展示

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算器</title>

    <style>
        body{
            padding:0;margin:0;
            background-color:bisque;
        }
        #calculator{
            position:absolute;
            width:1200px;height:620px;
            left:50%;top:50%;
            margin-left:-600px;
            margin-top:-310px;
        }
        #calculator #c_title{
            margin:auto;
            width:800px;
            height:80px;
            margin-left: 150px;
        }
        #calculator #c_title h2{
            text-align:center;
            font-size:33px;font-family:微软雅黑;color:#666666;
            box-shadow: 1px 1px 1px 1px rgba(0, 0, 255, .2);
        }
        #calculator #c_text input{
            padding-right:20px;
            margin-left: 50px;
            width:970px;
            height:50px;
            font-size:25px;font-family:微软雅黑;color:#666666;
            text-align:right;
            border:double 1px;
            border:1px solid black;
        }
        #calculator #c_value{
            widows: 1080px;
            height:408px;
            margin:20px auto;
        }
        #calculator #c_value ul{
            margin:0px;
        }
        #calculator #c_value ul li{
            margin:10px;
            list-style:none;
            float:left;
            width:180px;
            height:80px;
            line-height:80px;
            text-align:center;
            background-color:coral;
            border:0px solid black;
            font-size:30px;
            font-family:微软雅黑;
            color:#666;
            box-shadow: 12px 12px 2px 1px rgba(0, 0, 255, .2);
        }
        #calculator #c_value ul li button{
            width: 160px;
            height:40px;
            font-size: 20px;
        }
    </style>

    <script>
        function onLoad(){
            //加载完毕后光标自动对应到输入框
            document.getElementById("input").focus();
        }
        //读取按钮的值，传给输入框
        function inputEvent(e){
            //把val的值改为每个事件的innerHTML值 innerHTML 属性
            var val=e.innerHTML;
            //获取input标签
            var xsval=document.getElementById("input");
            //标签里的value连接每个事件的innerHTML值
            xsval.value+=val; 
        }
        //计算出结果
        function inputOper(){
            var xsval=document.getElementById("input");//获取input标签
            xsval.value=eval（document.getElementById("input").value); //eval（)方法计算
        }
        //清零
        function clearNum(){
            var xsval=document.getElementById("input");//获取input标签
            xsval.value="";
            document.getElementById("input").focus();
        }
        //退格
        function backNum(){
            var arr=document.getElementById("input");//获取input标签
            arr.value=arr.value.substring(0,arr.value.length-1); //substring()提取第一个至倒数第二个字符串
        } 
    </script>

</head>

<body>
    <div id="calculator">
        <!--标题-->
        <div id="c_title">
            <h2>计算器</h2>
        </div>
        <!--输入框-->
        <div id="c_text">
            <input type="text" id="input" value="0" readonly="readonly"> <!-- input (id)-->
        </div>
        <!--计算器按钮元件-->
        <div id="c_value">
            <ul>
                <li><button onclick="inputEvent(this)">7</button></li>  <!--onlick 鼠标点击函数  this -->
                <li><button onclick="inputEvent(this)">8</button></li>
                <li><button onclick="inputEvent(this)">9</button></li>
                <li style="background: yellow"><button onclick="clearNum()">清零</button></li>
                <li style="background: burlywood"><button onclick="backNum()">退格</button></li>
                <li><button onclick="inputEvent(this)">4</button></li>
                <li><button onclick="inputEvent(this)">5</button></li>
                <li><button onclick="inputEvent(this)">6</button></li>
                <li><button onclick="inputEvent(this)">*</button></li>
                <li><button onclick="inputEvent(this)">/</button></li>
                <li><button onclick="inputEvent(this)">1</button></li>
                <li><button onclick="inputEvent(this)">2</button></li>
                <li><button onclick="inputEvent(this)">3</button></li>
                <li><button onclick="inputEvent(this)">+</button></li>
                <li><button onclick="inputEvent(this)">-</button></li>
                <li><button onclick="inputEvent(this)">0</button></li>
                <li><button onclick="inputEvent(this)">00</button></li>
                <li ><button onclick="inputEvent(this)">.</button></li>
                <li><button onclick="inputEvent(this)">%</button></li>
                <li style="background: red"><button onclick="inputOper(this)">=</button></li>
            </ul>
        </div>
            
    </div>
    
</body>
</html>