JavaScript 개발 계산기 JS 코드

HTML은 앞서 소개되었으나 이제는 JS 코드 작성 방법에 대해 주로 설명합니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no" />
    <title>计算器</title>
     <script type="text/javascript" src=""></script>
     <script>
 
  //点击按钮执行操作
  var resultDom = document.getElementById("result");   //var 是定义变量，
  var operate = true;                                 //定义一个变量，防止运算符的连续操作
  var xop = true;                                     //定义一个变量，防止小数点可以连续输出
  function command(num){                            //function 是封装command
    if(needclear==1){
      needclear=0;
      resultDom.value='';
    }
    var str = resultDom.value;                          
    str =(str =="0"?"":str);
    resultDom.value = str+num;
    operate = true;
    play(num);
  }
  
  //清空
  function clearzero(m){
      resultDom.value = 0;
 play(m)
  }
  
  //计算等号
  var needclear=0;
  function equal(m){
    needclear=1;
    var result = resultDom.value.toString();
    var r = eval(result);
    resultDom.value =r;
    play(m);
  }
  
  //小数点
  function dot(m){
  if(xop){                                             //对变量进行判断输出
  var num = resultDom.value.toString();
  num +=".";
  resultDom.value = num;
  xop = ture;
  }
  play(m);
  }
  
  
  //点击操作符
  function tools(op,m){
  if(operate){                                       //对运算符进行判断输出
  var num = resultDom.value;
  num = (num =="0"?"":num);
  resultDom.value = num+op;
  operate = false;
  }
  play(m);
  }
  
  //按键声音
  function play(num){
      var audioDom = document.getElementById("audio");
      audioDom.innerHTML = "<embed src='wav/"+num+".wav' width='0' height='0'></embed>"  //wav是声音素材的文件夹名称。
  }
  
  </script>
</body>
</html>

각 함수에는 주석이 있습니다. 음성자료는 업로드가 불가능하므로 작성법만 알면 음성자료를 온라인으로 다운받아 직접 해볼 수 있습니다.

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="format-detection" content="telephone=no" /> <title>计算器</title> <script type="text/javascript" src=""></script> <script> //点击按钮执行操作 var resultDom = document.getElementById("result"); //var 是定义变量， var operate = true; var xop = true; function command(num){ if(needclear==1){ needclear=0; resultDom.value=''; } var str = resultDom.value; str =(str =="0"?"":str); resultDom.value = str+num; operate = true; play(num); } //清空 function clearzero(m){ resultDom.value = 0; play(m) } //计算等号 var needclear=0; function equal(m){ needclear=1; var result = resultDom.value.toString(); var r = eval(result); resultDom.value =r; play(m); } //小数点 function dot(m){ if(xop){ var num = resultDom.value.toString(); num +="."; resultDom.value = num; xop = ture; } play(m); } //点击操作符 function tools(op,m){ if(operate){ var num = resultDom.value; num = (num =="0"?"":num); resultDom.value = num+op; operate = false; } play(m); } //按键声音 function play(num){ var audioDom = document.getElementById("audio"); audioDom.innerHTML = "<embed src='wav/"+num+".wav' width='0' height='0'></embed>" } </script> </body> </html>

제출하다 코드 재설정

자동운전