html+css+js實現科學計算器

時間 2019-11-18

標籤 html+css+js html css 實現科學計算器欄目 HTML 简体版

原文原文鏈接

代碼地址以下：
http://www.demodashi.com/demo/13751.htmlcss

項目描述

純html+css+js實現一個科學計算器，支持平方開方指數對數等基本函數，支持鍵盤輸入，有簡單和高級兩種模式html

文件結構

純html+css+js實現，文件結構很是簡單，就三個文件。express

演示效果

實驗設計

將按鈕的value設置爲按鈕顯示的字符，當點擊按鈕的時候，輸入框增長的字符爲按鈕的value，其中函數的按鈕增長的字符爲最後一個x所在的位置前面的字符，即到左括號。

<div id="advanced">
        <input type="button" value="log(x)" title="以e爲底的對數">
        <input type="button" value="sqrt(x)" title="x的平方根">
        <input type="button" value="pow(x,y)" title="x的y次冪">
        <input type="button" value="abs(x)" title="x的絕對值">
        <input type="button" value="ceil(x)" title="向上取整">
        <input type="button" value="log10(x)" title="以10爲底的對數">
        <input type="button" value="cbrt(x)" title="x的立方根">
        <input type="button" value="exp(x)" title="e的x次冪">
        <input type="button" value="round(x)" title="四捨五入">
        <input type="button" value="floor(x)" title="向下取整">
        </div>

        <div id="simple">
        <input type="button" value="(">
        <input type="button" value=")">
        <input type="button" value="%" title="求餘數">
        <input type="button" value="/" title="除法">
        <input type="button" value="↑" title="上一條表達式">
        <input type="button" value="7">
        <input type="button" value="8">
        <input type="button" value="9">
        <input type="button" value="*" title="乘法">
        <input type="button" value="←" title="刪除最後一個字符">
        <input type="button" value="4">
        <input type="button" value="5">
        <input type="button" value="6">
        <input type="button" value="-" title="減法">
        <input id="CE" type="button" value="CE" title="清除表達式">
        <input type="button" value="1">
        <input type="button" value="2">
        <input type="button" value="3">
        <input type="button" value="+" title="加法">
        <input id="calc" type="button" value="=" title="計算結果">
        <input id="zero" type="button" value="0">
        <input type="button" value="00">
        <input type="button" value=".">
</div>

var sPos = exp.selectionStart;
var cursorPos = sPos;
var s = exp.value;
var btn = this.value.substr(0,this.value.lastIndexOf('x'));
exp.value = s.substring(0, sPos) + btn + s.substring(sPos, s.length);

支持鍵盤輸入，因此非法輸入英文和中文時，都對輸入進行屏蔽

// exp 爲輸入框
var len = exp.value.length;
var lastch = exp.value[len - 1];
while (lastch >= 'a' && lastch <= 'z' || lastch >= 'A' && lastch <= 'Z' || escape(exp.value).indexOf("%u") >= 0) {
      exp.value = exp.value.substring(0, len - 1);
      len = exp.value.length;
      lastch = exp.value[len - 1]; 
}

計算時使用eval函數進行求值，若是表達式中含有//或者/**/時，eval會將其當成註釋，因此要處理這種狀況。求值時須要將每一個函數名，如xxx替換成Math.xxx，才能被eval識別。

var reg = new RegExp("[a-z]{2,}", "g");
var res = exp.value.match(reg); //regular expression to find function name
if (exp.value.indexOf("//") >= 0 || exp.value.indexOf("*/") >= 0)
    throw "Invalid"; //If use eval, // and /**/ will be comment
    if (res != null) {  // replace function name xxx with Math.xxx
      res.sort();
      while (res.length) {
          reg = RegExp(res[0], "g");
          exp.value = exp.value.replace(reg, "Math." + res[0]);
          res.splice(0, res.lastIndexOf(res[0]) + 1);
      }
}