html+css+js实现简易网页计算器

18岁倔强码农

已于 2023-03-21 20:11:36 修改

阅读量494

点赞数 3

文章标签： javascript css html Powered by 金山文档

于 2023-03-21 20:08:20 首次发布

本文链接：https://blog.csdn.net/m0_70932336/article/details/129696315

版权

该文章展示了一个基本的网页计算器的实现，使用HTML构建布局，CSS进行样式设计，JavaScript处理用户交互和计算功能，包括数字输入、运算符应用、结果展示以及清空和退格功能。

摘要由CSDN通过智能技术生成

计算器

css

*{
            box-sizing: border-box;
        }
        .box{
            width: 400px;
            margin: 0 auto;
            height: 400px;
            background-color: gray;
        }
        .top{
            width: 260px;
            margin: 0 auto;
        }
        .top input{
            width: 260px;
            margin: 0 auto;
            height: 50px;
            font-size: 20px;
            padding-left: 10px;
            outline: medium;
            margin-top: 10px;
        }
        .main{
            width: 400px;
            background-color: green;
            height:300px;
            display: flex;
            flex-wrap: wrap;
            align-content:flex-start;
            margin-top: 20px;
        }
        .main button{
            width: 80px;
            height: 40px;
            margin-left: 15px;
            margin-top: 15px;

        }

html

<div class="box">
        <div class="top">
            <input type="text" id="res">
        </div>
        <div class="main">
            <button onclick="che('')">C</button>
            <button onclick="tuige()">back</button>
            <button onclick="num(1)">1</button>
            <button onclick="num(2)">2</button>
            <button onclick="num(3)">3</button>
            <button onclick="num(4)">4</button>
            <button onclick="num(5)">5</button>
            <button onclick="num(6)">6</button>
            <button onclick="num(7)">7</button>
            <button onclick="num(8)">8</button>
            <button onclick="num(9)">9</button>
            <button onclick="num(0)">0</button>
            <button onclick="cal('+')">+</button>
            <button onclick="cal('-')">-</button>
            <button onclick="cal('*')">*</button>
            <button onclick="cal('/')">/</button>
            <button onclick="res('=')">=</button>
            

        </div>
    </div>

js

function num(shuzi){
            let _res=document.getElementById('res')
            _res.value=_res.value+shuzi
        }
        function cal(par){
            let _res=document.getElementById('res')
            _res.value=_res.value+par
        }
        // =======结果======
        function res(r){
            let _res=document.getElementById('res')
            _res.value=_res.value+"="+eval(_res.value)
        }
        // ====清空=====
        function che(){
            let _res=document.getElementById('res')
            _res.value=""
        }
        // ====退格=====
        function tuige(){
            let _res=document.getElementById('res')
            _res.value= _res.value.substring(0, _res.value.length-1)
        }