最近闲来无事, 想着开发一个小插件, 看了网上的一个样例, 根据他的代码做了下小的改动, 可以直接引入该 JS 文件即可使用, 具体 JS 代码如下:
- Windows.onload = function(){
- // 创建渲染 DOM 结构
- function creatDom(){
- var str = `<input type="text" value=""id="showResult"><br />
- <input type="button" value="0">
- <input type="button" value="1">
- <input type="button" value="2">
- <input type="button" value="3"><br />
- <input type="button" value="4">
- <input type="button" value="5">
- <input type="button" value="6">
- <input type="button" value="7"><br />
- <input type="button" value="8">
- <input type="button" value="9">
- <input type="button" value="+">
- <input type="button" value="-"><br />
- <input type="button" value="*">
- <input type="button" value="/">
- <input type="button" value="CE">
- <input type="button" value="=">
- <input type="button" value="重置">`;
- document.getElementById('calculator').innerhtml = str;
- }
- creatDom();
- let setEqual = false;// 若按了'='就设置为 true
- getAllButtons();
- function getAllButtons(){
- let buttons = document.querySelectorAll('#calculator input[type="button"]');
- for (var i = 0;i<buttons.length;i++) {
- buttons[i].onclick = function(){
- let value = document.getElementById('showResult').value;
- let item = this.value;
- // 重置按钮清空数据
- if(item==='重置'){
- setEqual = false;
- document.getElementById('showResult').value = '';
- return;
- }
- // 计算了结果 (按了'=') 再点击数字则重新赋值
- if(setEqual){
- document.getElementById('showResult').value = item;
- setEqual = false;
- return;
- }
- // 最后一位为计算符号, 且输入计算符号, 删除上一个符号;
- // 首位是 */ 删除再重新输入(可输入正负)
- if (/[\-\+\*\/]$/.test(item) && /[\-\+\*\/]$/.test(value) || /^[\*\/]$/.test(value)) {
- value = value.substring(0, value.length - 1);
- }
- // 首位为 0 且输入数字, 删除 0, 再输入
- if (value === '0' && /\d/.test(item)) {
- value = value.substring(0, value.length - 1);
- }
- if(item==='='){
- if (setEqual) {
- document.getElementById('data').value = '';
- return false;
- }
- setEqual = true;
- let value = document.getElementById('showResult').value;
- try {
- if(value!=""){
- //eval 计算某个字符串, 并执行其中的的 JavaScript 代码
- document.getElementById('showResult').value = value + item + eval(value);
- }else{
- alert('请输入数字!');
- }
- } catch (e) {
- alert('输入有误!'+e);
- document.getElementById('showResult').value = '';
- }
- }else{// 没有按'='时
- document.getElementById('showResult').value = value + item;
- }
- // 按 CE 按钮清空数据
- if(item==='CE'){
- if(!setEqual){// 若未计算过结果, 就点击一次从末尾减少一个字符的清除
- document.getElementById('showResult').value = value.substring(0,value.length-1);
- }else{// 若已计算过结果(按'='了), 则重置(一次性全部清除字符)
- document.getElementById('showResult').value = '';
- setEqual = false;
- }
- return;
- }
- }
- }
- }
- }
最终效果可以运行下面代码查看:
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- </title>
- <script src="https://dev.tencent.com/u/zhongxiaoyou/p/Calculator/git/raw/master/calculator.js">
- </script>
- </head>
- <body>
- <div id="calculator">
- </div>
- </body>
- </HTML>
来源: http://www.qdfuns.com/article/48922/817d2adcd630686be097c2b04f95f0fc.html