用前端实现计算器功能

前端实现计算器

Gao_雪

于 2024-08-16 10:00:00 发布

阅读量488

点赞数 10

CC 4.0 BY-SA版权

分类专栏：项目文章标签：前端

本文链接：https://blog.csdn.net/oageux/article/details/141195339

前端三剑客实现计算器功能

在这里插入图片描述

创建项目

在这里插入图片描述

index.html

<!DOCTYPE html>
<html>
<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>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="container">
        <div class="calculator dark">
            <div class="theme-toggler active">
                <i class="toggler-icon"></i>
            </div>
            <div class="display-screen">
                <div id="display"></div>
            </div>
            <div class="buttons">
                <table>
                    <tr>
                        <td><button class="btn-operator" id="clear">C</button></td>
                        <td><button class="btn-operator" id="/">&divide;</button></td>
                        <td><button class="btn-operator" id="*">&times;</button></td>
                        <td><but