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>

2.效果展示

效果如下:

JavaScript实现计算器(菜鸟狗头保命)_第1张图片

3.总结

       由于第一次书写博客,页面过于丑陋,见谅。改demo学会了如何用js实现html计算器,熟悉了js的基础语法及基本使用。

你可能感兴趣的:(前端,javascript,html,css)