js计算器

简介: js计算器
+关注继续查看

以下是一个简单的JavaScript计算器实现,支持加、减、乘、除四种基本运算:

<!DOCTYPE html>
<html>
<head>
    <title>JS计算器</title>
    <style>
        .calculator {
            width: 200px;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        input[type="text"] {
            width: 100%;
            height: 40px;
            margin-bottom: 10px;
            text-align: right;
            border: none;
            outline: none;
        }

        button {
            font-size: 24px;
            padding: 5px 10px;
            border: none;
            outline: none;
            cursor: pointer;
        }

        .operator {
            background-color: #f2f2f2;
        }

        .equal {
            background-color: #4caf50;
        }

        .clear {
            background-color: #f44336;
        }
    </style>
</head>
<body>
    <div class="calculator">
        <input type="text" id="display" disabled>
        <div class="buttons">
            <button onclick="add()">+</button>
            <button onclick="subtract()">-</button>
            <button onclick="multiply()">×</button>
            <button onclick="divide()">÷</button>
            <button onclick="clearDisplay()">C</button>
        </div>
    </div>

    <script>
        let display = document.getElementById('display');

        function add() {
            let value = parseFloat(display.value);
            display.value = value + parseFloat(prompt('请输入第一个数字'));
        }

        function subtract() {
            let value = parseFloat(display.value);
            display.value = value - parseFloat(prompt('请输入第一个数字'));
        }

        function multiply() {
            let value = parseFloat(display.value);
            display.value = value * parseFloat(prompt('请输入第一个数字'));
        }

        function divide() {
            let value = parseFloat(display.value);
            if (value === 0) {
                alert('除数不能为0');
            } else {
                display.value = value / parseFloat(prompt('请输入第二个数字'));
            }
        }

        function clearDisplay() {
            display.value = '';
        }
    </script>
</body>
</html>

运行结果:

请在文本框中输入第一个数字:5
请在文本框中输入第二个数字:3
8.000000000000001
相关文章
|
2月前
|
存储 搜索推荐 数据可视化
基于html5+javascript技术开发的房贷利率计算器,买房的码农们戳进来
房贷计算器是一款专为购房者设计的实用工具应用,其主要功能是帮助用户详细计算房贷的还款金额、利息以及还款计划等。通过这款软件,用户可以更加便捷地了解到自己的还款情况和计划,从而更好地规划自己的财务。下面将对房贷计算器进行详细的介绍。
15 0
|
3月前
|
JavaScript Android开发
js日期控件 (补助计算器页面)
js日期控件 (补助计算器页面)
20 0
|
11月前
|
JavaScript 前端开发
史上最好看的利用javascript制作计算器
利用javascript制作计算器 前面我们讲到如何用js模拟计算器的基本运算,现在咱们来讲一下如何使用HTML+CSS+javascript制作一个功能齐全,切外观大气的计算器。功能效果如下图所示: 在这里插入图片描述 HTML代码: &lt;table&gt; &lt;tr&gt; &lt;td colspan=&quot;5&quot;&gt; &lt;input type=&quot;text&quot; id=&quot;text&quot;&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;&lt;button value=&quot;7
史上最好看的利用javascript制作计算器
|
11月前
|
JavaScript 前端开发 Serverless
最简单的用js模拟计算器进行计算(初级)
用js模拟计算器进行计算 今天我们来讲一下怎么使用js来模拟计算器的加减乘除基本运算。代码如下: HTML代码: &lt;h1&gt;计算器&lt;/h1&gt; &lt;input type=&quot;number&quot; name=&quot;&quot; id=&quot;num1&quot;&gt; &lt;br&gt; &lt;input type=&quot;number&quot; name=&quot;&quot; id=&quot;num2&quot;&gt; &lt;br&gt; &lt;button onclick=&quot;func(&#39;+&#39;)&quot;&gt;+&lt;/button&gt; &lt;button onclick=&quot;func(&#39;-&#39;)&quot;&gt;-&lt;/button&gt; &lt;button onclick=&quot;func(&#39;*&#39;)&quot;
|
前端开发 JavaScript
【前端】【JavaScript】简单的加减乘除计算器
【前端】【JavaScript】简单的加减乘除计算器
121 0
|
JSON 前端开发 JavaScript
js逐步教你实现原生汇率计算器系统(html逻辑 css逻辑 js逻辑)
js逐步教你实现原生汇率计算器系统(html逻辑 css逻辑 js逻辑)
js逐步教你实现原生汇率计算器系统(html逻辑 css逻辑  js逻辑)
|
前端开发 JavaScript
前端 JavaScript 实现一个简易计算器
前端使用 JavaScript 实现一个简易计算器,没有难度,但是里面有些小知识还是需要注意的,算是一次基础知识回顾吧。
179 0
前端 JavaScript 实现一个简易计算器
|
JavaScript 前端开发 小程序