communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français

Code complet pour développer une calculatrice audio en utilisant javascript

<!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>
<style type="text/css">
     *{margin:0;padding:0;}
    body{ 
         background:#ffffcc;
         font-size:12px;
         font-family:"微软雅黑";
         color:#666;
        }
ul,ol{list-style:none;}
    .cac{
        width:410px;
        background:#399;
        margin:0 auto;
        }
   
    .cac .c_title{
        font-size:16px;
        color:#000;
        padding:10px 0 10px 10px;
        cursor:move;   
        }
    .cac .c_show .c_txt{
        width:390px;
        height:42px;
        font-size:34px;
        color:#999;
border:none;
outline:none;
text-align:right;
padding-right:20px;
line-height:25px;
        }
.cac .c_key ul{
    border:1px solid #fff
}
.cac .c_key ul li{
 border:1px solid #fff;
 width:69px;
 height:50px;
 font-size:25px;
 margin:5px;
 float:left;
 background:#cccc33;
 line-height:50px;
 cursor:pointer;
 text-align:center;
}
.cac .c_key .c_tool{
background:#3399cc;
}
.clear{clear:both;}
</style>
</head>
<body>
  <div>
     <div>计算器</div>
 
     <div>
  <input type="text" value="0" onfocus="this.blur();" id="result"/>
  </div>
  <div>
       <ul>
  <li onclick="command(7);">7</li>
  <li onclick="command(8);">8</li>
  <li onclick="command(9);">9</li>
  <li><-</li>
  <li onclick="clearzero('j');">C</li>
  <li onclick="command(4);">4</li>
  <li onclick="command(5);">5</li>
  <li onclick="command(6);">6</li>
  <li onclick="tools('*','g');">×</li>
  <li onclick="tools('/','g');">÷</li>
  <li onclick="command(1);">1</li>
  <li onclick="command(2);">2</li>
  <li onclick="command(3);">3</li>
  <li onclick="tools('+','g');">+</li>
  <li onclick="tools('-','g');">-</li>
  <li onclick="command(0);">0</li>
  <li onclick="command(00);">00</li>
  <li onclick="dot('g');">.</li>
  <li onclick="tools('%','g');">%</li>
  <li onclick="equal('j');">=</li>
  <div></div>
  </ul>
  </div>
  </div>
  <script type="text/javascript" src=""></script>
  <script>
  /*
  1.数字显示，数字拼接
  2.点击操作符
  3.点击数字
  4.获取结果
  5.不能连续输入
  
  */
  //点击按钮执行操作
  var resultDom = document.getElementById("result");
  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>

Le code a été expliqué dans les chapitres précédents, et maintenant je vais le connecter ensemble pour vous montrer l'effet réel.

Formation continue
||
<!DOCTYPE html> <html lang="en"> <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> <style type="text/css"> *{margin:0;padding:0;} body{ background:#ffffcc; font-size:12px; font-family:"微软雅黑"; color:#666; } ul,ol{list-style:none;} .cac{ width:410px; background:#399; margin:0 auto; } .cac .c_title{ font-size:16px; color:#000; padding:10px 0 10px 10px; cursor:move; } .cac .c_show .c_txt{ width:390px; height:42px; font-size:34px; color:#999; border:none; outline:none; text-align:right; padding-right:20px; line-height:25px; } .cac .c_key ul{ border:1px solid #fff } .cac .c_key ul li{ border:1px solid #fff; width:69px; height:50px; font-size:25px; margin:5px; float:left; background:#cccc33; line-height:50px; cursor:pointer; text-align:center; } .cac .c_key .c_tool{ background:#3399cc; } .clear{clear:both;} </style> </head> <body> <div class="cac"> <div class="c_title">计算器</div> <div class="c_show"> <input type="text" class="c_txt" value="0" onfocus="this.blur();" id="result"/> </div> <div class="c_key"> <ul> <li onclick="command(7);">7</li> <li onclick="command(8);">8</li> <li onclick="command(9);">9</li> <li class="c_tool"><-</li> <li class="c_tool" onclick="clearzero('j');">C</li> <li onclick="command(4);">4</li> <li onclick="command(5);">5</li> <li onclick="command(6);">6</li> <li class="c_tool" onclick="tools('*','g');">×</li> <li class="c_tool" onclick="tools('/','g');">÷</li> <li onclick="command(1);">1</li> <li onclick="command(2);">2</li> <li onclick="command(3);">3</li> <li class="c_tool" onclick="tools('+','g');">+</li> <li class="c_tool" onclick="tools('-','g');">-</li> <li onclick="command(0);">0</li> <li onclick="command(00);">00</li> <li onclick="dot('g');">.</li> <li class="c_tool" onclick="tools('%','g');">%</li> <li class="c_equ" onclick="equal('j');">=</li> <div class="clear"></div> </ul> </div> </div> <script type="text/javascript" src=""></script> <script> /* 1.数字显示，数字拼接 2.点击操作符 3.点击数字 4.获取结果 5.不能连续输入 */ //点击按钮执行操作 var resultDom = document.getElementById("result"); 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>
soumettreRéinitialiser le code
Section précédente Aucun
Liste des didacticiels
obtenir de l'aide
  • Recommandations de cours
  • Téléchargement du didacticiel
Le didacticiel n'est pas disponible au téléchargement pour le moment. Le staff est actuellement en train de l'organiser. Veuillez prêter plus d'attention à ce cours à l'avenir ~

Les étudiants qui ont regardé ce cours apprennent également

Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)  492416 joue