结合 HTML、CSS、基于原生 JavaScript 实现计算器

ACE .

已于 2023-01-06 14:56:39 修改

阅读量352

点赞数

分类专栏：游戏文章标签： javascript 前端 html5 css

于 2023-01-06 14:50:37 首次发布

本文链接：https://blog.csdn.net/weixin_54036501/article/details/128578625

版权

结合 HTML、CSS，网页界面设计美观基于原生 JavaScript 或 jQuery 实现计算器，除基本计算功能外，（1）需实现进制转换、结果存储、取存计算的功能（2）时间计算功能（3）长度转换功能。下面代码只给出了html、css部分，js部分及源码查结合HTML、CSS，基于原生JavaScript实现计算器-HTML5文档类资源-CSDN文库

进制转换代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算器</title>
    <style>
        #calculator {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 25%;
            margin: 50px auto;
            font-family: sans-serif;
        }

        #display {
            width: 100%;
            height: 70px;
            background: #333;
            color: white;
            font-size: 2em;
            text-align: right;
            padding: 20px;
            box-sizing: border-box;
        }

        #buttons {
            width: 100%;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-gap: 5px;
            padding: 5px;
        }

        button {
            width: 100%;
            height: 60px;
            background: #eee;
            border: none;
            font-size: 2em;
            transition: background-color 0.3s;
        }

        button:hover {
            background: #ddd;
        }

        .double {
            grid-column: span 2;
        }

        .operator {
            background: #ccc;
        }
    </style>
</head>

<body>
    <div id="calculator">
        <div id="display">0</div>
        <div id="buttons">
            <button class="operator" value="clear">AC</button>
            <button class="operator" value="delete">Del</button>
            <button class="operator" value="percent">%</button>
            <button class="operator" value="/">/</button>
            <button value="7">7</button>
            <button value="8">8</button>
            <button value="9">9</button>
            <button class="operator" value="*">*</button>
            <button value="4">4</button>
            <button value="5">5<