怎么样网页制作计算器用js中的eval方法

最新推荐文章于 2022-05-06 11:33:10 发布

acararduino

最新推荐文章于 2022-05-06 11:33:10 发布

阅读量206

点赞数

文章标签： html js

原文链接：https://blog.csdn.net/qq_32623363/article/details/77119753

版权

先看效果
在这里插入图片描述
制作过程分为三部。

第一部分（HTML）主干

<!DOCTYPE html>
<html>
<head>
    <title>计算器</title>
    <meta charset="utf-8">
    <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
    <link rel="stylesheet" type="text/css" href="css/textFour.css">
    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
    <script src="js/testThree.js"></script>
</head>
<body>
<div class="main">
    <h1>计算器</h1>
    <input type="text" name="number" readonly class="showAns">
    <div class="buttons">
        <button value="AC">AC</button>
        <button value="CE">CE</button>
        <button value="%">%</button>
        <button value="/">/</button>
        <button value="7">7</button>
        <button value="8">8</button>
        <button value="9">9</button>
        <button value="*">*</button>
        <button value="4">4</button>
        <button value="5">5</button>
        <button value="6">6</button>
        <button value="-">-</button>
        <button value="1">1</button>
        <button value="2">2</button>
        <button value="3">3</button>
        <button value="+">+</button>
        <button value=".">.</button>
        <button value="0">0</button>
        <button value="Ans">Ans</button>
        <button value="=">=</button>
    </div>
</div>
</body>
</html>

第二部分，css修饰部分

*{
    margin: 0;
    padding: 0;
}
html,body{
    width: 100%;
    height: 100%;
    background-color: White;
}
.main{
    text-align: center;
    background-color: #b9887d;
    border-radius: 20px;
    width: 300px;
    height: 350px;
    margin: auto;
    position: absolute;
    top: 200px;
    left: 200px;
    right: 200px;
    bottom: 200px;
}

h1{
    font-size: 2em;
    color: #fff;
}

.showAns{
    width: 280px;
    margin: 0 auto;
    margin-bottom: 5px;
    border:solid 0px #fff;
    background-color: #f19483;
    padding: 3px 5px;
    text-align: right;
}

.buttons{
    width: 275px;
    margin: 0 auto;
    padding: 7px;
}

button{
    margin-bottom: 7px;
    width: 62px;
    height: 40px;
    background-color: #f8c3cd;
    border-style: none;
    outline: none;
    color: #656765;
}

第三部分，逻辑和js计算返回eval()

var ans = 0;
$(document).ready(function(){
    var counter="";     //记录输入的数据与结果的字符串
    $("button").on("click",function(){
        var text = $(this).attr('value');
        if(text !== 'AC' && text !== 'CE' && text !== 'Ans' && text !== '='){
            counter +=text;
            $(".showAns").val(counter);
        }
        else if(text === 'AC'){
            counter="";
            $(".showAns").val(counter);
        }else if(text ==='CE'){
            counter = counter.slice(0,-1);
            $(".showAns").val(counter);
        }else if(text === '='){
            ans = eval(counter);
            $(".showAns").val(ans);
            counter = "";
        }

    });

});

acararduino

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
怎么样网页制作计算器用js中的eval方法

先看效果制作过程分为三部。第一部分（HTML）主干<!DOCTYPE html><html><head> <title>计算器</title> <meta charset="utf-8"> <link rel='stylesheet prefetch' href='http://max...
复制链接

扫一扫