HTML+CSS+JS实现简单计算器

溺水的鱼儿(*^_^*)

于 2020-06-22 11:13:58 发布

阅读量1.5k

点赞数 5

分类专栏： CSS javaScript 文章标签： javascript css3 html5

本文链接：https://blog.youkuaiyun.com/weixin_47450039/article/details/106897555

版权

本文展示了如何利用前端技术HTML、CSS和JavaScript创建一个简易计算器。内容包括设计计算器界面，通过JavaScript实现基本的加、减、乘、除、清屏、退格、取余、取倒数等运算功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文运用前端代码实现一个简单的计算器界面，并通过JS实现了基本的运算功能。（加、减、乘、除、清屏/退格、取余、取倒）

1.编写前端界面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的计算器</title>
    <style>
        .containor{
            border:1px solid black;
            background-color: #fafafa;
            height: 380px;
            width: 296px;
            margin: auto;
            margin-top: 40px;
        }
        .top{
            background-color: lightgray;
            height: 30px;
        }
        a{
            display: block;
            float: left;
            font-size: 8px;
            height: 26px;
            padding: 0 6px;
            margin-left: 6px;
            line-height: 26px;
        }

        a:hover{
            background-color: dimgray;
            color: white;
            cursor: default;
        }

        .input{
            width: 86%;
            height:60px;
            padding: 4px;
            margin: 0 auto;
            margin-top: 12px;
        }
        .input:focus{
            outline: none;
        }
        button{
            width: 50px;
            height: 30px;
            margin: 2px;
            text-align: center;
            font-size: 10px;
            border: 0.5px solid gray;

        }
        button:hover{
            border: 1px solid gray;
            background-color: #ffaa55;
            outline: none;
        }
        .bottom{
            width: 100%;
            height: 30px;
            background-color:lightgray;
            color: white;
            position: relative;
            margin-top: 5

最低0.47元/天解锁文章