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
相关文章
|
8月前
|
JavaScript
JS实现计算器功能
JS实现计算器功能
57 2
|
8月前
|
前端开发 JavaScript
百度搜索:蓝易云【用JavaScript和HTML实现一个精美的计算器网页】
该计算器网页使用HTML定义了页面结构,CSS样式使其具有精美的外观,而JavaScript脚本实现了计算器的逻辑。用户可以通过按钮输入数字和操作符,并通过“=”按钮来进行计算,计算结果会显示在文本框中。
84 6
|
2月前
|
JavaScript
js实现简洁实用的网页计算器功能源码
这是一款使用js实现简洁实用的网页计算器功能源码。可实现比较基本的加减乘除四则运算功能,界面简洁实用,是一款比较基本的js运算功能源码。该源码可兼容目前最新的各类主流浏览器。
28 2
|
7月前
|
JavaScript 前端开发 算法
详细解读24点计算器的Javascript实现
详细解读24点计算器的Javascript实现
71 0
|
7月前
|
前端开发 JavaScript 算法
JavaScript制作简版计算器,提供加减乘除功能
JavaScript制作简版计算器,提供加减乘除功能
330 0
|
8月前
|
JavaScript 前端开发
JavaScript编写一个简易计算器
JavaScript编写一个简易计算器
42 0
|
8月前
|
前端开发 JavaScript
使用html+css+javaScript 完成计算器
使用html+css+javaScript 完成计算器
|
8月前
|
移动开发 JavaScript 前端开发
原生JavaScript+CSS实现计算器(简单的介绍一下eval函数)
原生JavaScript+CSS实现计算器(简单的介绍一下eval函数)
74 0
|
8月前
|
前端开发
好看的前端计算器代码分享(html+css+js制作计算器)
好看的前端计算器代码分享(html+css+js制作计算器)
172 0
|
8月前
|
前端开发 JavaScript
使用HTML、CSS和JavaScript实现一个简单的计算器
使用HTML、CSS和JavaScript实现一个简单的计算器