js教程

科学计算器JavaScript代码

我的站长站 2023-08-16 人阅读

科学计算器JavaScript代码分享,新手必经之路,纯js打造,使用开源的math.js框架,支持科学计算;支持计算历史记录,使用的localStorage记录在本地。

复制以下代码, 保存到.html文件就能运行。

<!DOCTYPE html>
<html>
<head>
    <title>科学计算器</title>
    <style>
        .container {
            width: 300px;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #ccc;
        }
 
        .result {
            margin-bottom: 10px;
        }
 
        .button {
            width: 50px;
            height: 50px;
            margin: 5px;
            font-size: 20px;
        }
 
        .history {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="result">
            <input type="text" id="result" readonly>
        </div>
        <div>
            <button class="button">C</button>
            <button class="button">&#9003;</button>
            <button class="button">=</button>
            <button class="button">/</button>
        </div>
        <div>
            <button class="button">7</button>
            <button class="button">8</button>
            <button class="button">9</button>
            <button class="button">*</button>
        </div>
        <div>
            <button class="button">4</button>
            <button class="button">5</button>
            <button class="button">6</button>
            <button class="button">-</button>
        </div>
        <div>
            <button class="button">1</button>
            <button class="button">2</button>
            <button class="button">3</button>
            <button class="button">+</button>
        </div>
        <div>
            <button class="button">0</button>
            <button class="button">.</button>
            <button class="button">(</button>
            <button class="button">)</button>
        </div>
        <div>
            <button class="button">sin</button>
            <button class="button">cos</button>
            <button class="button">tan</button>
            <button class="button">√</button>
        </div>
        <div>
            <button class="button">log</button>
            <button class="button">^</button>
            <button class="button">abs</button>
            <button class="button">π</button>
        </div>
        <div class="history">
            <h3>计算历史</h3>
            <ul id="historyList"></ul>
        </div>
    </div>
 
   <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/mathjs/10.1.1/math.min.js" type="application/javascript"></script>
    <script>
        function appendToResult(value) {
            document.getElementById('result').value += value;
        }
 
        function clearResult() {
            document.getElementById('result').value = '';
        }
 
        function deleteLastChar() {
            var result = document.getElementById('result').value;
            document.getElementById('result').value = result.slice(0, -1);
        }
 
        function calculate() {
            var result = document.getElementById('result').value;
            try {
                var calculatedResult = math.evaluate(result);
                document.getElementById('result').value = calculatedResult;
                saveToHistory(result, calculatedResult);
            } catch (error) {
                document.getElementById('result').value = 'Error';
                // 清空错误信息
                setTimeout(function() {
                    document.getElementById('result').value = '';
                }, 2000);
                return;
            }
        }
 
        function saveToHistory(expression, result) {
            var historyItem = document.createElement('li');
            historyItem.textContent = expression + ' = ' + result;
            document.getElementById('historyList').appendChild(historyItem);
        }
 
        function loadHistory() {
            var history = JSON.parse(localStorage.getItem('calculatorHistory')) || [];
            var historyList = document.getElementById('historyList');
            historyList.innerHTML = '';
            history.forEach(function (item) {
                var historyItem = document.createElement('li');
                historyItem.textContent = item.expression + ' = ' + item.result;
                historyList.appendChild(historyItem);
            });
        }
 
        function saveHistory() {
            var expression = document.getElementById('result').value;
            var result = document.getElementById('result').value;
            var history = JSON.parse(localStorage.getItem('calculatorHistory')) || [];
            history.push({ expression: expression, result: result });
            localStorage.setItem('calculatorHistory', JSON.stringify(history));
        }
 
        loadHistory();
 
        // 添加键盘按钮事件
        document.addEventListener('keydown', function (event) {
            var key = event.key;
            if (key === 'Enter') {
                calculate();
            } else if (key === 'Backspace') {
                deleteLastChar();
            } else if (key === 'Escape') {
                clearResult();
            } else if (key === 'c' || key === 'C') {
                if (event.ctrlKey || event.metaKey) {
                    clearResult();
                }
            } else if (key.match(/[0-9\.\+\-\*\/\(\)\^]/)) {
                appendToResult(key);
            }
        });
    </script>
</body>
</html>


相关推荐
  • js代码
  • 计算器
  • js计算
  • js指定时间定时自动执行代码分享

    示例代码用的`setTimeout()`函数,在指定的时间后执行。代码非常的简单,获取当前时间和设定一个指定时间,指定时间减去当前时间就是定时的时间,如果定时器到期时等于0,就代表时间到了,就运行executeAtTime函数的方法。function executeAtTime() { console....

    js教程 85 11个月前
  • JS代码解除网页右键限制

    JS解除右键限制方法一javascript:(function () {function R(a) {ona = "on" + a;if (window.addEventListener){window.addEventListener(a, function (e) {for (var n = e.originalTarget; n; n = n.parentNode){n[ona] = null;}}, true);}window[o...

    js教程 195 4年前
  • 淘宝买家秀API+ajax代码

    淘宝买家秀API+ajax代码,用的是这个API,https://api.66mz8.com/api/rand.tbimg.php?format=jsonJSON返回格式,测试依旧可用。$(function(){ $.get('https://api.66mz8.com/api/rand.tbimg.php?format=json',function(data){ document.getElementB...

    js教程 745 4年前
  • Python开发一个极其简单的计算器

    # 创建一个简单的计算器小程序# 从tkinter模块里导入所有内容 这样做的好处就是直接通过函数创建控件 而不需要通过模块名.函数名()的这种形式创建# 举个例子说明一下 创建主窗口以前是tkinter.Tk() 现在直接Tk()就可以创建from tkinter import * wi...

    python教程 55 1年前
  • 小清新房贷计算器小程序源码
    小清新房贷计算器小程序源码

    源码介绍这款房贷计算器小程序带有房产估价及房贷计算功能的小程序源代码,里面的安装目录有1、vender 插件目录2、wxapp-client-sdk 客户端sdk3、 assets 小程序公共素材包4、pages 小程序界面5、...

    小程序源码 544 5年前
  • 亲戚关系称谓计算器小程序源码
    亲戚关系称谓计算器小程序源码

    源码介绍亲戚关系称谓计算器小程序源码,用户只需输入关系,自动算出亲戚的称谓,避免见到亲戚后不知道该如何称呼的尴尬情况。源码截图源码安装说明该小程序为云开发,不需要服务器和域名即可搭建,下载源...

    小程序源码 77 2年前
  • JavaScript计算当前时间离某天还有多长时间方法

    JavaScript计算当前时间离某天还有多长时间方法,JS自动计算当天时间离一个日期还有多长时间,比如当前2021/9/15离2021/10/01还有16天。//获取当前时间为const today = new Date();//设立某天时间const targetDate = new Date(&#39;2021/10/01&#39;);//...

    js教程 85 1年前
  • JavaScript计算两个日期之间相隔多少天

    JavaScript计算两个日期之间相隔多少天,比如2021/09/01和2021/09/15隔了15天,用JS如何自动计算结果了,分享下方法。// 两个日期const date1 = new Date(&#39;2021/09/01&#39;);const date2 = new Date(&#39;2021/09/15&#39;);// 计算相隔多少天const di...

    js教程 25 1年前
  • 科学计算器JavaScript代码

    科学计算器JavaScript代码分享,新手必经之路,纯js打造,使用开源的math.js框架,支持科学计算;支持计算历史记录,使用的localStorage记录在本地。复制以下代码, 保存到.html文件就能运行。<!DOCTYPE html><html><head> <title>科学计算器</title> <styl...

    js教程 11 1年前
最新更新