html5&amp；css&amp；js代码 030 一个计算器_html5计算器代码-优快云博客

本文链接：https://blog.youkuaiyun.com/2401_84434086/article/details/139927545
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <title>计算器</title>
    <meta charset="utf-8"/>
    <style>
        body {
            background-color: #5a5d65;
            font-family: 微软雅黑, sans-serif;
            text-align: center;
        }
        h1 {
            margin-top: 50px;
            font-size: 30px;
        }

        .calculator {
            background-color: #333333;
            border-radius: 10px;
            box-shadow: 0 0 10px #888888;
            margin: 30px auto;
            padding: 20px;
            width: 500px;
        }

        .display {
            background-color: #999999;
            border: 1px solid #CCCCCC;
            border-radius: 5px;
            font-size: 24px;
            height: 40px;
            padding: 10px;
            text-align: right;
            margin-bottom: 20px;
            width: 96%;
        }

        .button {
            background-color: #CCCCCC;
            border: none;
            border-radius: 5px;
            color: #000000;
            cursor: pointer;
            font-size: 24px;
            height: 50px;
            margin-top: 10px;
            width: 23%;
        }

        .button:hover {
            background-color: #FF69B4;
        }

        .button:active {
            box-shadow: none;
            background-color: #AAAAAA;
        }

        .operator {
            background-color: #FFA500;
            color: #FFFFFF;
        }

        .equals {
            background-color: #4CAF50;
            color: #FFFFFF;
            width: 48%;
        }
    </style>
</head>
<body>
<h1>计算器</h1>
<div class="calculator">
    <div class="display" id="display"></div>

    <button class="button" onclick="addToDisplay('7')">7</button>
    <button class="button" onclick="addToDisplay('8')">8</button>
    <button class="button" onclick="addToDisplay('9')">9</button>
    <button class="button operator" onclick="addToDisplay('+')">+</button>
    <button class="button" onclick="addToDisplay('4')">4</button>
    <button class="button" onclick="addToDisplay('5')">5</button>
    <button class="button" onclick="addToDisplay('6')">6</button>
    <button class="button operator" onclick="addToDisplay('-')">-</button>
    <button class="button" onclick="addToDisplay('1')">1</button>
    <button class="button" onclick="addToDisplay('2')">2</button>
    <button class="button" onclick="addToDisplay('3')">3</button>
    <button class="button operator" onclick="addToDisplay('*')">&times;</button>
    <button class="button" onclick="addToDisplay('0')">0</button>
    <button class="button" onclick="addToDisplay('.')">.</button>
    <button class="button" onclick="clearDisplay()">C</button>
    <button class="button operator" onclick="addToDisplay('/')">&#247;</button>
    <button class="button equals" onclick="calculate()">=</button>
</div>
<script>
    function addToDisplay(value) {
        document.getElementById("display").innerHTML += value;
    }

    function clearDisplay() {
        document.getElementById("display").innerHTML = "";
    }

    function calculate() {


### 结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。



的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。



![html5](https://img-blog.csdnimg.cn/img_convert/79329993f1f365f9a0bcc987c09dcad9.webp?x-oss-process=image/format,png)