HTML作业-简易计算器

一颗橘子唐

已于 2023-03-13 19:06:05 修改

阅读量1.4k

点赞数 5

分类专栏：前端文章标签： css css3 html

于 2022-12-13 23:52:00 首次发布

本文链接：https://blog.csdn.net/qq_40467855/article/details/128309746

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HTML作业-简易计算器

使用eval()函数完成简单的四则运算。
具体请看代码，菜鸡勿喷。

html

<!DOCTYPE html>
<html lang="zh-CN">
<head onselectstart="return false">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简易计算器</title>
    <link rel="stylesheet" href="./css/index.css">
    <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
    <script src="./js/index.js"></script>
</head>
<body >
    <div class="out-box">
        <div class="src-box">
            <input id="ipt" type="text" placeholder="输入表达式..." autofocus="autofocus">
            <div id="re"></div>
        </div>
        <div class="btns-box">
            <div id="sin" class="fun btn">Sin</div>
            <div id="cos" class="fun btn">Cos</div>
            <div id="tan" class="fun btn">Tan</div>
            <div id="jdz" class="fun btn">|X|</div>
            <div id="lk" class="fun btn">(</div>
            <div id="rk" class="fun btn">)</div>
            <div id="mo" class="fun btn">%</div>
            <div id="chu" class="fun btn">/</div>
            <div id="n7" class="number btn">7</div>
            <div id="n8" class="number btn">8</div>
            <div id="n9" class="number btn">9</div>
            <div id="chen" class="fun btn">*</div>
            <div id="n4" class="number btn">4</div>
            <div id="n5" class="number btn">5</div>
            <div id="n6" class="number btn">6</div>
            <div id="jian" class="fun btn">-</div>
            <div id="n1" class="number btn">1</div>
            <div id="n2" class="number btn">2</div>
            <div id="n3" class="number btn">3</div>
            <div id="jia" class="fun btn">+</div>
            <div id="c" class="btn">C</div>
            <div id="n0" class="number btn">0</div>
            <div id="dian" class="number btn">.</div>
            <div id="result" class="btn">=</div>
        </div>
    </div>
    <center>
        右键"C"按钮清屏！<br>三角函数值填入括号内！
    </center>
</body>
</html>

css

*{
    padding: 0;
    margin: 0;
    /* border: red .1px solid; */
    box-sizing: border-box;
}
html,body{
    background: rgb(218, 218, 218);
    height: 100%;
    width: 100%;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
/* 主体box */
.out-box{
    margin: 2em;
    box-shadow: 4px 4px 2em 0 rgba(0,0,0,0.2);
    border-radius: 1em;
    overflow: hidden;
    background: white;
}
/* 顶部显示 */
.src-box{
    width: 100%;
    overflow-x: auto;
    background: white;
}
/* input标签和结果标签 */
#ipt ,#re{
    height: 2em;
    width: 100%;
    padding: 8px;
    border: none;
    font-size: 1.2em;
    font-weight: bolder;
    outline: none;
}
#ipt:focus,#ipt:active{
    border-bottom: rgb(207, 255, 207) solid 2px;
}
#re{
    text-align: right;
}
/* 按钮盒子 */
.btns-box{
    padding: .5em;
    margin-top: 1em;
    display: inline-grid;
    grid-template-columns: auto auto auto auto;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    border-radius: 1em;
    background:  rgba(255, 208, 186, 0.557);
}
/* 按钮 */
.btn{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: .5em;
    width: 3em;
    height: 3em;
    background-color: white;
    border-radius: 50%;
    font-size: 1em;
    font-weight: bolder;
    cursor: pointer;
    transition: all 0.1s linear;
}

/* 运算符按钮 */
.fun{
    background: rgb(194, 242, 255);
    box-shadow: 2px 2px 8px 0 rgba(17,176,255, 0.3);
}
.fun:hover{
    background: rgb(17, 176, 255) !important;
    box-shadow: 2px 2px 1em 0 rgba(17, 176, 255, 0.8)
}

/* 数字按钮 */
.number{
    box-shadow: 2px 2px 1em 0 rgba(199,199,199, 0.3)
}
.number:hover{
    background: rgb(199, 199, 199);
    box-shadow: 2px 2px 1em 0 rgba(199,199,199, 0.8)
}

/* 清除按钮 */
#c{
    background:rgb(255, 116, 116);
    box-shadow: 2px 2px 1em 0 rgba(255, 31, 31, 0.3);
}
#c:hover{
    background: rgb(255, 31, 31);
    box-shadow: 2px 2px 1em 0 rgba(255, 31, 31, 0.8);
}

/* 等于按钮 */
#result{
    background: orange;
    box-shadow: 2px 2px 1em 0 rgba(255,98,0, 0.3);
}
#result:hover{
    background: rgb(255, 72, 0) ;
    box-shadow: 2px 2px 1em 0 rgba(255,72,0, 0.8);
}
/* 定义滚动条样式 */
::-webkit-scrollbar{
	width: 6px;
	height: 6px;
	background: rgb(255, 255, 255)
}
::-webkit-scrollbar-track{
	background:rgb(217, 240, 255);
}
::-webkit-scrollbar-button{
	display: none;
}
::-webkit-scrollbar-thumb{
	background:rgb(117, 202, 255);
	transition: all 0.2s linear;
}
::-webkit-scrollbar-thumb:hover{
	background: rgb(0, 157, 255);
}

JS

$(document).ready(function(){
    // jq方法获取input标签元素
    var ipt = $("#ipt");

    // 运算符按钮被按下
    $(".fun").click(function(){
        if( $("#re").text() != ""){
            cl();
        }
        var fun = $(this).text();
        if (fun == "Sin"){
            ipt.val( ipt.val()+ "Math.sin()" );
        }else if (fun == "Cos"){
            ipt.val( ipt.val()+ "Math.cos()" );
        }else
        if (fun == "Tan"){
            ipt.val( ipt.val()+ "Math.tan()" );
        }else
        if (fun == "|X|"){
            ipt.val( ipt.val()+ "Math.abs()" );
        }else{
            ipt.val( ipt.val() + fun );
        }
        
    })
    // 数字按钮被按下
    $(".number").click(function(){
        if( $("#re").text() != ""){
            cl();
        }
        var num = $(this).text();
        ipt.val(ipt.val() + num);
    });
    // 等于号被按下
    $("#result").click(function(){
        re();
    });
    // 清除按钮被按下
    $("#c").click(function(){
        var ol = ipt.val();
        ipt.val(ol.substring(0, ol.length - 1));
    })
    
    // 修改元素最大宽度
    var maxwidth = $(".out-box").width();
    $(".src-box").css("max-width",maxwidth+"px");

    // 定义清屏方法
    function cl(){
        ipt.val("");
        $("#re").text("")
    }
    function re(){
        var trs = ipt.val().toString();
        var re = eval(trs);
        $("#re").text(re);
    }
    // 注册右键清湖
    var d = document.getElementById("c");
    d.oncontextmenu = function(E){
        cl();
        return false;
    }
    //  清除选择
    document.addEventListener('selectstart', function(e) {
        e.preventDefault();
    });

    document.onkeydown = function() {
        let keycode = event.keyCode;
        if (keycode == 13) {
            re();
        }
    }
});