js-实现计算器

最新推荐文章于 2022-07-02 23:58:02 发布

星辰落海

最新推荐文章于 2022-07-02 23:58:02 发布

阅读量623

点赞数

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

本文链接：https://blog.csdn.net/weixin_45596380/article/details/106007448

版权

js 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

前端

3 篇文章 0 订阅

订阅专栏

知识点
eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js计算器</title>
    <link href="../css/计算器.css" rel="stylesheet">
</head>
<body>
<h1 class="h1">计算器</h1>
    <div class="box">
        <form name="calculator">
            <input type="button" id="clear" class="btn other" value="C">
            <input type="text" id="display">
            <br/>
            <input type="button" class="btn number" value="7" onclick="get(this.value);">
            <input type="button" class="btn number" value="8" onclick="get(this.value);">
            <input type="button" class="btn number" value="9" onclick="get(this.value);">
            <input type="button" class="btn operator" value="+" onclick="get(this.value);">
            <br/>
            <input type="button" class="btn number" value="4" onclick="get(this.value);">
            <input type="button" class="btn number" value="5" onclick="get(this.value);">
            <input type="button" class="btn number" value="6" onclick="get(this.value);">
            <input type="button" class="btn operator" value="*" onclick="get(this.value);">
            <br/>
            <input type="button" class="btn number" value="1" onclick="get(this.value);">
            <input type="button" class="btn number" value="2" onclick="get(this.value);">
            <input type="button" class="btn number" value="3" onclick="get(this.value);">
            <input type="button" class="btn operator" value="-" onclick="get(this.value);">
            <br/>
            <input type="button" class="btn number" value="0" onclick="get(this.value);">
            <input type="button" class="btn operator" value="." onclick="get(this.value);">
            <input type="button" class="btn operator" value="/" onclick="get(this.value);">
            <input type="button" class="btn other" value="=" onclick="calculates();">
        </form>
    <div>
<script src="../js/计算器.js">
</script>
</body>
</html>

.h1{
    position: relative;
    color:blueviolet;
    font-size:50px;
    text-align: center;
    top:50px;
}
.box{
    width:500px;
    position: relative;
    top: 100px;
    left:50%;
    margin-left: -250px;
    text-align: center;
    background: #495678;
    padding:80px 0;
    border-radius: 20px;
    box-shadow: 4px 4px  #3d4a65;
}
.btn{
    background:rgba(255,192,203,0.8);
    border: 1px solid pink;
    cursor:pointer;
    outline:none;
    font-size:30px;
    margin:10px 15px;
    height: 70px;
    width: 70px;
    box-shadow: 0 5px #1a1313de;
}
.btn:active{
    transform: translateY(2px);
}
.btn:first-child{
    margin-left:-300px;
}
#display{
    overflow: hidden;
    box-sizing: border-box;
    padding-right:18px;
    text-align: right;
    outline: none;
    border:1px solid #4caf50;
    color:yellow;
    font-size: 30px;
    width:280px;
    position: absolute;
    height: 50px;
    top:95px;
    right:55px;
    background-color: #4caf50;
}
#display,.btn,.box{
    border-radius:35px;
}
.operator{
    background:orange;
}
.other{
    background:white;
}

    //清空
     document.getElementById("clear").addEventListener("click",function(){
       document.getElementById("display").value="";
   });
//运算
    function get(value) {
        document.getElementById("display").value+=value;
    }
    //结果
    function calculates() {
        var  result=0;
        result=document.getElementById("display").value;
        document.getElementById("display").value = eval(result);
    }

效果图

在这里插入图片描述

星辰落海

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js-实现计算器

知识点eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>js计算器</title> <link href="../css/计算器.css" rel="stylesheet"></head><body
复制链接

扫一扫

专栏目录