菜鸡源码,专注精品下载!
当前位置:首页 > 建站教程 > 建站知识

JavaScript代码实现科学计算器

发布时间:2024-01-05  栏目:建站知识   浏览:   分类:js教程 js代码 计算器 js计算

科学计算器JavaScript代码主要包括HTML、CSS和JavaScript三部分。HTML用于构建计算器的界面,CSS用于美化界面,JavaScript用于实现计算器的功能。在JavaScript中,我们需要定义各种数学运算函数,如加、减、乘、除等,并监听用户输入的数字和操作符,根据用户的操作调用相应的函数进行计算,并将结果显示在界面上。此外,还需要处理一些特殊情况,如括号、小数点等。通过这些步骤,我们可以实现一个简单的科学计算器。

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

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

<!DOCTYPEhtml><html><head><title>科学计算器</title><style>.container{width:300px;margin:0auto;padding:20px;border:1pxsolid#ccc;}.result{margin-bottom:10px;}.button{width:50px;height:50px;margin:5px;font-size:20px;}.history{margin-top:20px;}</style></head><body><divclass="container"><divclass="result"><inputtype="text"id="result"readonly></div><div><buttonclass="button">C</button><buttonclass="button">&#9003;</button><buttonclass="button">=</button><buttonclass="button">/</button></div><div><buttonclass="button">7</button><buttonclass="button">8</button><buttonclass="button">9</button><buttonclass="button">*</button></div><div><buttonclass="button">4</button><buttonclass="button">5</button><buttonclass="button">6</button><buttonclass="button">-</button></div><div><buttonclass="button">1</button><buttonclass="button">2</button><buttonclass="button">3</button><buttonclass="button">+</button></div><div><buttonclass="button">0</button><buttonclass="button">.</button><buttonclass="button">(</button><buttonclass="button">)</button></div><div><buttonclass="button">sin</button><buttonclass="button">cos</button><buttonclass="button">tan</button><buttonclass="button">√</button></div><div><buttonclass="button">log</button><buttonclass="button">^</button><buttonclass="button">abs</button><buttonclass="button">π</button></div><divclass="history"><h3>计算历史</h3><ulid="historyList"></ul></div></div><scriptsrc="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/mathjs/10.1.1/math.min.js"type="application/javascript"></script><script>functionappendToResult(value){document.getElementById('result').value+=value;}functionclearResult(){document.getElementById('result').value='';}functiondeleteLastChar(){varresult=document.getElementById('result').value;document.getElementById('result').value=result.slice(0,-1);}functioncalculate(){varresult=document.getElementById('result').value;try{varcalculatedResult=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;}}functionsaveToHistory(expression,result){varhistoryItem=document.createElement('li');historyItem.textContent=expression+'='+result;document.getElementById('historyList').appendChild(historyItem);}functionloadHistory(){varhistory=JSON.parse(localStorage.getItem('calculatorHistory'))||[];varhistoryList=document.getElementById('historyList');historyList.innerHTML='';history.forEach(function(item){varhistoryItem=document.createElement('li');historyItem.textContent=item.expression+'='+item.result;historyList.appendChild(historyItem);});}functionsaveHistory(){varexpression=document.getElementById('result').value;varresult=document.getElementById('result').value;varhistory=JSON.parse(localStorage.getItem('calculatorHistory'))||[];history.push({expression:expression,result:result});localStorage.setItem('calculatorHistory',JSON.stringify(history));}loadHistory();//添加键盘按钮事件document.addEventListener('keydown',function(event){varkey=event.key;if(key==='Enter'){calculate();}elseif(key==='Backspace'){deleteLastChar();}elseif(key==='Escape'){clearResult();}elseif(key==='c'||key==='C'){if(event.ctrlKey||event.metaKey){clearResult();}}elseif(key.match(/[0-9\.\+\-\*\/\(\)\^]/)){appendToResult(key);}});</script></body></html>


相关文章

    无相关信息
评论
建站知识
建站知识
使用技巧
调试安装
运营推广