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

js利用点击事件做一个简单的计算器

程序员文章站 2022-03-23 19:02:07
先放一个样式图: 源代码如下: ————简单来说,我的做法就是根据需求给每一个按键添加一个点击事件。 先获取到显示器部分: ————利用点击事件将按键的值传给显示部分,用到这个方法的的按键有0~9的数字,小数点,加减乘除和取余(%)的运算符号 ————给等号按键添加的方法如下,eval方法会自动进行 ......

先放一个样式图:

js利用点击事件做一个简单的计算器

 

源代码如下:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            span{
                display: inline-block;
                width: 100px;
                height: 100px;
                background-color: wheat;
                border-radius: 100px;
                text-align: center;
                line-height: 100px;
                margin: 5px 10px;
            }
            div{
                width: 500px;
                height: 700px;
                background-color: black;
            }
            #ling{
                display: inline-block;
                width: 225px;
                height: 100px;
                background-color: wheat;
                border-radius: 100px;
                text-align: center;
                line-height: 100px;
            }
            #result{
                display: inline-block;
                width: 480px;
                height: 100px;
                background-color: white;
                text-align: right;
                border-radius: 0;
                line-height: 100px;
                color: red;
                font: 25px/100px "微软雅黑";
            }
        </style>
    </head>
    <body>
        <div id="">
            <span id="result"></span><br />
            <span onclick="delall()">del</span>
            <span onclick="del()">c</span>
            <span onclick="display('%')">%</span>
            <span onclick="display('/')">/</span>
            <span onclick="display(7)">7</span>
            <span onclick="display(8)">8</span>
            <span onclick="display(9)">9</span>
            <span onclick="display('*')">*</span>
            <span onclick="display(4)">4</span>
            <span onclick="display(5)">5</span>
            <span onclick="display(6)">6</span>
            <span onclick="display('-')">-</span>
            <span onclick="display(1)">1</span>
            <span onclick="display(2)">2</span>
            <span onclick="display(3)">3</span>
            <span onclick="display('+')">+</span>
            <span id="ling" onclick="display(0)">0</span>
            <span onclick="display('.')">.</span>
            <span onclick="cal()">=</span>
        </div>
        <script type="text/javascript">
            var osp = document.getelementbyid("result");
            
            function display(num){
                osp.innerhtml=osp.innerhtml+num;
            }
            function cal(){
                osp.innerhtml=eval(osp.innerhtml);
            }
            function delall(){
                osp.innerhtml="";
            }
            function del(){
                osp.innerhtml = osp.innerhtml.slice(0,osp.innerhtml.length-1);
            }
        </script>
    </body>
</html>

 

————
简单来说,我的做法就是根据需求给每一个按键添加一个点击事件。


先获取到显示器部分:

<span id="result"></span>
var osp = document.getelementbyid("result");

————
利用点击事件将按键的值传给显示部分,用到这个方法的的按键有0~9的数字,小数点,加减乘除和取余(%)的运算符号

            <span onclick="display('%')">%</span>
            <span onclick="display('/')">/</span>
            <span onclick="display(7)">7</span>
            <span onclick="display(8)">8</span>
            <span onclick="display(9)">9</span>
            <span onclick="display('*')">*</span>
            <span onclick="display(4)">4</span>
            <span onclick="display(5)">5</span>
            <span onclick="display(6)">6</span>
            <span onclick="display('-')">-</span>
            <span onclick="display(1)">1</span>
            <span onclick="display(2)">2</span>
            <span onclick="display(3)">3</span>
            <span onclick="display('+')">+</span>
            <span id="ling" onclick="display(0)">0</span>
            <span onclick="display('.')">.</span>
function display(num){
                osp.innerhtml=osp.innerhtml+num;
            }

————
给等号按键添加的方法如下,eval方法会自动进行运算。

<span onclick="cal()">=</span>
function cal(){
                osp.innerhtml=eval(osp.innerhtml);
            }

————
del按键用来清空显示器中的内容。这里直接给显示器赋空值就好了

<span onclick="delall()">del</span>
function delall(){
                osp.innerhtml="";
            }

————
c键用来删除输入内容的最后一位,此处用到的方法是slice(),拿这里的例子来说:osp.innerhtml.slice(0,osp.innerhtml.length-1);就是截取字符串中索引值0到length-1的部分,包含0不包含length-1,所以刚好能达到我们所要的效果,即删除字符串的最后一位

function del(){
                osp.innerhtml = osp.innerhtml.slice(0,osp.innerhtml.length-1);
            }