js实例1——JavaScript实现计算器

最新推荐文章于 2024-08-11 01:47:13 发布

浅栀_TANG

最新推荐文章于 2024-08-11 01:47:13 发布

阅读量1.1k

点赞数 2

分类专栏：前端 javascript 文章标签： javas html css 计算器

本文链接：https://blog.csdn.net/Tangtaoyao123/article/details/102605375

版权

前端同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

javascript

1 篇文章 0 订阅

订阅专栏

用html、css和js实现简单的计算器功能，根据菜鸟里的案例自己敲了一遍，菜鸟链接在这里：https://c.runoob.com/codedemo/3124

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js计算器</title>
</head>
<style>
    *{
        border: none;
        margin: 0 auto;
        padding: 0;
        font-family: 'Open Sans', sans-serif;
    }
    .center{ /*居中*/
        margin: 0 auto;
        text-align: center;
    }
    h1{
        color: #495678;
        font-size: 30px;
        display: block;
        margin: 25px;
    }
    form{
        background-color: #495678;
        box-shadow: 4px 4px #3d4a65;
        width: 350px;
        height: 380px;
        border-radius: 18px;
        padding-top: 45px;
    }
    .btn{
        cursor: pointer;
        font-size: 20px;
        width: 45px;
        height: 45px;
        margin: 10px;
        border-radius: 15px;
        outline: none;/*避免点击按钮时出现轮廓*/
    }
    .number{
        background-color: #72778b;
        box-shadow: 0 4px #5f6680;
        color: white;
    }
    .operator{
        background-color: #dededc;
        box-shadow: 0 4px #bebebe;
        color: #72778b;
    }
    .other{
        background-color: #e3844c;
        box-shadow: 0 4px #e76a3d;
        color: #dededc;
    }
    .btn:active{ /*active 设置对象在被用户激活（在鼠标点击与释放之间发生的事件）时的样式属性。*/
        box-shadow: 2px 2px cornflowerblue;
        -webkit-transform: translateY(2px);/*谷歌*/
        -ms-transform: translateY(2px);/*IE*/
        -moz-tranform: translateY(2px);/*火狐*/
        transform: translateY(2px);/*Transform属性应用于元素的2D或3D转换，Y轴方向*/
    }
    #display{
        outline: none;
        background-color: #98d1dc;
        box-shadow: inset 3px 3px 0 #3facc0;
        /*color: #dededc;*/
        color:#666;
        width: 190px;
        height: 45px;
        font-size: 20px;
        text-align: right;
        border-radius: 15px;
        padding: 0 10px;
    }
</style>
<body>
<div class="center">
    <h1>HTML CSS JavaScript 计算器</h1>
    <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>
    //点击C按钮清理显示器
    document.getElementById('clear').addEventListener('click',function () {
        //addEventListener()方法用于向指定元素添加事件句柄。向id='clear'元素添加click事件，click事件是将id='display'的元素变为空''.
        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='';
        document.getElementById('display').value=eval(result);//eval()计算括号里的内容
    }

</script>

</body>
</html>

计算器界面如下：