基于jQuery的简易计算器实现

最新推荐文章于 2022-11-09 20:26:08 发布

z215676803

最新推荐文章于 2022-11-09 20:26:08 发布

阅读量4.3k

点赞数 5

本文链接：https://blog.csdn.net/z215676803/article/details/80714201

版权

简易计算器实现,练手的代码

html部分

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简易计算器</title>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="cal.js"></script>
<link type="text/css" rel="stylesheet" href="cal.css">
</head>
<body>
    <div id="cal" onclick="f(event)" >
        <span id="screen"></span>

        <input type="button" value="C">
        <input type="button" value="7">
        <input type="button" value="8">
        <input type="button" value="9">
        <input type="button" value="+">

        <input type="button" value="4">
        <input type="button" value="5">
        <input type="button" value="6">
        <input type="button" value="-">

        <input type="button" value="1">
        <input type="button" value="2">
        <input type="button" value="3">
        <input type="button" value="*">

        <input type="button" value="0">
        <input type="button" value=".">
        <input type="button" value="=">
        <input type="button" value="/">
    </div>
</body>
</html>

css部分:

@charset "UTF-8";
*{
    font-family: 微软雅黑 Light;
    margin:0;
    padding:0;
}
#cal{
    width:300px;
    height:350px;
    margin:100px auto;
    border:4px solid #808080;
    border-radius: 4px;
}
span{
    display:block;
    float:left;
    border:2px solid #808080;
    border-radius: 2px;
    width:200px;
    height:46px;
    line-height:46px;
    margin:10px 10px;
    /* 若算式溢出屏幕,自动添加滚轮效果 */
    overflow: auto;
}
input{
    width:50px;
    height:50px;
    margin:10px 10px;
    border:1px solid #808080;
    border-radius: 2px;
    background-color: #f0f0f0;
}

JS部分:

 function f(event){
    var btn = event.target;
    if($(btn).prop('nodeName') !='INPUT'){
        return;
    }
    var num = $(btn).val();
    var formula = $('#screen').html();
    if(num == 'C'){
        $('#screen').html('');
    }else if(num == '='){
        var result = eval(formula);
        $('#screen').html(formula+'='+result);
    }else{
        formula += num;
        $('#screen').html(formula);
    }
}