javascript - 如何将 JavaScript 元素转换为 Web 应用程序或 API？

Question

我制作了这个计算器 -> https://codepen.io/dc2212/pen/EyyaNO

var nmbr = document.querySelectorAll(".number");
var sgn = document.querySelectorAll(".sign");
var brckt = document.querySelectorAll(".bracket");
var screenText = document.getElementById("screentext");	
for(var i = 0 ; i < nmbr.length ; i++) {
  nmbr[i].addEventListener("click", function() {
    var txt = screenText.textContent;
    if(txt[txt.length-1] != ")") {
      screenText.textContent += this.textContent;
    }	
  });
}
for(var i = 0 ; i < sgn.length ; i++) {
  sgn[i].addEventListener("click", function() {
    var txt = screenText.textContent;
    if(txt !== "" && txt[txt.length-1] !== " " && txt[txt.length-1] !== "(") {
      screenText.textContent += " " + this.textContent + " ";
    }
  });
}
brckt[0].addEventListener("click", function() {
  var txt = screenText.textContent;
  if(txt[txt.length-1] === " " || txt[txt.length-1] === "(") {
    screenText.textContent += this.textContent;
  }
});
brckt[1].addEventListener("click", function() {
  var txt = screenText.textContent;
  if(txt[txt.length-1] !== " ") {
    screenText.textContent += this.textContent;
  }
});
var stringSolver = function(problem) {
  //breaking the string into numbers and signs
  var numbers = [];
  var signs = ["+"];
  var temp = 0;
  var probLength = problem.length;
  for(var i = 0 ; i < probLength ; i++) {
    var flag;
    if(!isNaN(parseInt(problem[i]))) {
      temp = 10 * temp + parseInt(problem[i]);
      flag = true;
    }
    else {
      if(flag === true) {
        numbers.push(temp);
        temp = 0;
        flag = false;
      }
      if(problem[i] === "+" || problem[i] === "-" || problem[i] === "*" || problem[i] === "/") {
        signs.push(problem[i]);
      }
    }
  }
  numbers.push(temp);
  //solving the question using the numbers array and signs array
  var answer = 0;
  var length = numbers.length;
  for (var i = 0 ; i < length ; i++) {
    if(signs[i]==="/") {
      numbers[i-1] /= numbers[i];
      numbers.splice(i,1);
      signs.splice(i,1);
      length--;
      i--;
    }
  }
  for (var i = 0 ; i < length ; i++) {
    if(signs[i]==="*") {
      numbers[i-1] *= numbers[i];
      numbers.splice(i,1);
      signs.splice(i,1);
      length--;
      i--;  	
    }
  }
  for (var i = 0 ; i < length ; i++) {
    if(signs[i]==="+") {
      answer += numbers[i];
    }
    else {
      answer -= numbers[i];
    }
  }
  return answer;
}
var bracketSeperator = function(question) {
  var len = question.length;
  var numOfBrackets = 0;
  for(var i = 0 ; i < len ; i++) {
    if(question[i] === "(") {
      numOfBrackets++;
    }
  }
  var bracketsClosed = 0;
  for(var i = 0 ; i < len ; i++) {
    if(question[i] === ")") {
      bracketsClosed++;
    }
  }
  if(numOfBrackets === 0) {
    screenText.textContent = stringSolver(question);
  }
  else if (numOfBrackets !== bracketsClosed) {
    screenText.textContent = "Wrong Expression";
  }
  else {
    for(var i = 0 ; i < numOfBrackets ; i++) {
      var length = question.length;
      var bracketOpen = [];
      var bracketClose = [];
      for(var j = 0 ; j < length ; j++) {
        if(question[j] === "(") {
          bracketOpen.push(j);
        }
        if(question[j] === ")") {
          bracketClose.push(j);
        }
      }
      for(var j = 0 ; bracketOpen[j] < bracketClose[0] ; j++);
      j--;
      var temp = question.slice(bracketOpen[j]+1,bracketClose[0]);
      var part = stringSolver(temp);
      var left = question.substring(0, bracketOpen[j]-1);
      var right = question.substring(bracketClose[0]+1);
      question = left + " " + part + right;
      screenText.textContent = stringSolver(question);
    }
  }
}
document.getElementById("equal").addEventListener("click", function() {bracketSeperator(screenText.textContent);});
var clearOne = function() {
  var txt = screenText.textContent;
  if(txt[txt.length-1] === " ") {
    txt = txt.substring(0, txt.length-3);
    screenText.textContent = txt;
  }
  else {
    txt = txt.substring(0, txt.length-1);
    screenText.textContent = txt;
  }
}
var clearAll = function() {
  screenText.textContent = "";
}
document.getElementById("clearone").addEventListener("click", clearOne);
document.getElementById("clearall").addEventListener("click", clearAll);

@font-face {
  font-family: digital;
  src: url(digital-7.ttf);
}
#calcbody {
  width: 400px;
  height: 600px;
  border: 2px solid black;
  background-color: black;
  position: relative;
  border-radius: 20px;
}
div {
  text-align: center;
}
#screen {
  font-family: digital;
  font-size: 25px;
  width: 92%;
  height: 15%;
  box-sizing: border-box;
  border: 5px solid white;
  margin: 5% 4% 4%;
  border-radius: 10px;
  text-align: right;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: pre;
  background-color: #cde6c5;
}
#screentext {
  margin-top: 24px;
  margin-right: 5px;
  line-height: 22px;
}
.sqr, .rect {
  float: left;
  width: 20%;
  height: 13%;
  box-sizing: border-box;
  margin-left: 4%;
  margin-bottom: 2%;
  position: relative;
  position: relative;
}
.button {
  position: absolute;
  top: 5px;
  left: 0;
  width: 100%;
  height: 80%;
  background-color: rgb(238, 238, 238);
  box-sizing: border-box;
  border: 1px solid rgb(225,225,225);
  box-shadow: 0 10px 2px rgb(187,187,187);
  transition: top 0.05s linear, box-shadow 0.05s linear;
}
.button h1 {
  margin: 0;
  padding-top: 13px;
}
.sqr:hover, .rect:hover {
  cursor: pointer;
}
.sqr:active .button, .rect:active .button {
  top: 15px;
  box-shadow: 0 0 0 rgb(240,240,240);
}
.rect {
  width: 44%;
}
#clearone p, #clearall p {
  margin: 0;
  padding-top: 13px;
  font-weight: bold;
}
#copyright {
  position: absolute;
  top: 94%;
  left: 32%;
  color: white;
  font-weight: bold;
  font-size: 20px;
}

<html>
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div id="calcbody">
      <div id="screen"><h1 id="screentext"></h1></div>
      <div id="num1" class="sqr number"><div class="button"><h1>1</h1></div></div>
      <div id="num2" class="sqr number"><div class="button"><h1>2</h1></div></div>
      <div id="num3" class="sqr number"><div class="button"><h1>3</h1></div></div>
      <div id="num4" class="sqr number"><div class="button"><h1>4</h1></div></div>
      <div id="num5" class="sqr number"><div class="button"><h1>5</h1></div></div>
      <div id="num6" class="sqr number"><div class="button"><h1>6</h1></div></div>
      <div id="num7" class="sqr number"><div class="button"><h1>7</h1></div></div>
      <div id="num8" class="sqr number"><div class="button"><h1>8</h1></div></div>
      <div id="num9" class="sqr number"><div class="button"><h1>9</h1></div></div>
      <div id="num0" class="sqr number"><div class="button"><h1>0</h1></div></div>
      <div id="plus" class="sqr sign"><div class="button"><h1>+</h1></div></div>
      <div id="minus" class="sqr sign"><div class="button"><h1>-</h1></div></div>
      <div id="multiply" class="sqr sign"><div class="button"><h1>*</h1></div></div>
      <div id="divide" class="sqr sign"><div class="button"><h1>/</h1></div></div>
      <div id="open" class="sqr bracket"><div class="button"><h1>(</h1></div></div>
      <div id="close" class="sqr bracket"><div class="button"><h1>)</h1></div></div>
      <div id="equal" class="rect"><div class="button"><h1>=</h1></div></div>
      <div id="clearone" class="sqr"><div class="button"><p>CLEAR ONE</p></div></div>
      <div id="clearall" class="sqr"><div class="button"><p>CLEAR ALL</p></div></div>
      <div id="copyright">&copy Dhruv Chadha</div>
    </div>
  </body>
  <script src="script.js"></script>
</html>

我想知道-

1) 我如何将其转换为网络应用程序，比如 chrome 应用程序。

2) 我如何将它转换成类似谷歌地图的东西(比如我们可以将它添加到我们的网页，我相信它被称为 api)？

Answer 1

1. 您可以引用官方链接来创建 Chrome 应用程序。 https://developer.chrome.com/apps/first_app
2. 将您的计算器托管在服务器上的某个位置，并通过 iframe 提供，以便其他人可以嵌入。 < iframe src='urltoyourcalculator' width='' height =''>