js +css完成网页计算器小作业

最新推荐文章于 2024-08-11 01:47:13 发布

anullllun

最新推荐文章于 2024-08-11 01:47:13 发布

阅读量541

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/anullllun/article/details/106925571

版权

本文介绍如何使用JavaScript和CSS实现一个简单的网页计算器。主要步骤包括：对按钮分类、获取按钮、定义运算方法、为运算符按钮分配功能以及设置等号按钮的事件处理。附带了HTML、CSS和JavaScript的代码示例以及最终效果展示。

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

html 网页计算器小作业

整体思路如下

1.对按钮的分类
2. 分别获取每个分类的按钮
3. 数字类的无需过多调整
4. 定义每种运算方法的函数
5. 对运算符的按钮进行遍历并打上标签通过switch判断要使用哪种运算方法并且将方法赋值给Fun
6. 获取等于号按钮调用每次被赋值的Fun；
代码如下
html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js&html计算器</title>
    <link rel="stylesheet" href="index.css">
    <script src="index.js"></script>
</head>
<body>
    <div class="outer">
        <div class="by"></div>
       <div class="resultbox">
           <p id="topvalue">0</p>
           <p id="result"></p>
       </div>
        <div class="numid">
            <a id="delete" href="javascript:;">c</a>
            <a class="mark" href="javascript:;">%</a>
            <a class="mark" href="javascript:;">/</a>
            <a class="mark" href="javascript:;">*</a>
            <a class="number" href="javascript:;">7</a>
            <a class="number" href="javascript:;">8</a>
            <a class="number" href="javascript:;">9</a>
            <a class="mark" href="javascript:;">-</a>
            <a class="number" href="