基于Js的简单科学计算器——JavaScript实例

19

预览图

源码内容

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简单科学计算器</title>
<script>
function calculate() {
    var result;
    try {
        // 获取用户输入的表达式
        var expression = document.getElementById('expression').value;
        // 计算结果,使用eval慎用,确保输入安全
        result = eval(expression);
    } catch (error) {
        result = '错误的输入';
    }
    document.getElementById('result').innerText = "结果: " + result;
}

function insert(value) {
    document.getElementById('expression').value += value;
}

function clearInput() {
    document.getElementById('expression').value = '';
    document.getElementById('result').innerText = '结果: ';
}
// 自动补全括号函数
function autoCompleteBracket() {
    var inputField = document.getElementById('expression');
    var functions = ['Math.sqrt', 'Math.log', 'Math.exp']; // 定义需要补全括号的函数列表

    functions.forEach(function(func) {
        if (inputField.value.includes(func + "(") && !inputField.value.includes(func + "()")) {
            inputField.value = inputField.value.replace(func + "(", func + "()");
            // 将光标移动到括号内
            var cursorPos = inputField.value.indexOf(func + "()") + func.length + 1;
            inputField.focus();
            inputField.setSelectionRange(cursorPos, cursorPos);
        }
    });
}
</script>
</head>
<body>
<h1>简单科学计算器</h1>
<input type="text" id="expression" placeholder="输入表达式" style="width: 300px;">
<div>
    <button onclick="insert('1')">1</button>
    <button onclick="insert('2')">2</button>
    <button onclick="insert('3')">3</button>
    <button onclick="insert('+')">+</button><br>
    <button onclick="insert('4')">4</button>
    <button onclick="insert('5')">5</button>
    <button onclick="insert('6')">6</button>
    <button onclick="insert('-')">-</button><br>
    <button onclick="insert('7')">7</button>
    <button onclick="insert('8')">8</button>
    <button onclick="insert('9')">9</button>
    <button onclick="insert('*')">*</button><br>
    <button onclick="insert('0')">0</button>
    <button onclick="insert('.')">.</button>
    <button onclick="insert('/')">/</button>
    <button onclick="insert('**')">^</button><br>
    <button onclick="insert('Math.sqrt(')">sqrt</button>
    <button onclick="insert('Math.log(')">ln</button>
    <button onclick="insert('Math.exp(')">exp</button>
    <button onclick="clearInput()">C</button>
</div>
<button onclick="calculate()" style="width: 300px; height: 50px;">计算</button>
<p id="result">结果: </p>
</body>
</html>