简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > js tutoriel > le corps du texte

Programme de code de calculatrice simple écrit avec les compétences js_javascript

WBOY
Libérer： 2016-05-16 15:47:19
original
1340 Les gens l'ont consulté

Je vais vous montrer un programme de code de calculatrice simple que j'ai écrit récemment

Partagez le code comme suit

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title> 
<style type="text/css">
 #box{width: 295px; margin: 0 auto; text-align: justify; border: 1px solid #ddd; padding: 15px;}
 .d_num{display: inline-block; margin: 10px; width: 33px; height: 30px; border: 1px solid #ddd; text-align: center; line-height: 30px; cursor: pointer;}
 .sum{margin: 0 10px 10px; line-height: 30px; font-size: 20px;}
 #sum{width: 205px; height: 30px; padding: 0 5px; margin-left: 5px; font-size: 20px;}
 #process{width: 255px; height: 30px; padding: 0 5px; margin-left: 5px; font-size: 20px;}
</style>
</head> 
<body> 
 <div id="box">
 <div class="sum">
  <input type="text" name="process" id="process" value="0" />
 </div>
 <div class="sum">
  SUM:<input type="text" name="sum" id="sum" value="0" />
 </div>
 <div>
  <span data-num="1" class="d_num">1</span>
  <span data-num="2" class="d_num">2</span>
  <span data-num="3" class="d_num">3</span>
  <span data-num="<-" class="d_num"><-</span>
  <span data-num="C" class="d_num">C</span>
 </div>
 <div>
  <span data-num="4" class="d_num">4</span>
  <span data-num="5" class="d_num">5</span>
  <span data-num="6" class="d_num">6</span>
  <span data-num="*" class="d_num">*</span>
  <span data-num="/" class="d_num">/</span>
 </div>
 <div>
  <span data-num="7" class="d_num">7</span>
  <span data-num="8" class="d_num">8</span>
  <span data-num="9" class="d_num">9</span>
  <span data-num="+" class="d_num">+</span>
  <span data-num="-" class="d_num">-</span>
 </div>
 <div>
  <span data-num="0" class="d_num">0</span>
  <span data-num="00" class="d_num">00</span>
  <span data-num="." class="d_num">.</span>
  <span data-num="%" class="d_num">%</span>
  <span data-num="=" class="d_num">=</span>
 </div>
 </div>
 <script type="text/javascript">
 var $box = document.getElementById('box');
 var $sum = document.getElementById('sum');
 var $process = document.getElementById('process');
 var sum = 0, process = '', num1 = '', num2 = '', temp = '', statu = false;
 $box.onclick = function(e){
 var event = window.event || e;
 var ele = event.srcElement || event.target;
 var _className = ele.className;
 if(_className == 'd_num'){
  var num = ele.getAttribute('data-num');//点击的按钮对应的值
  var NotNum = isNaN(num);
  if(!NotNum || num == '.'){ //点击了数字
  if(!statu){ //还没点击过符号
   if(num1 == '0'){
   num1 = '';
   }
   num1 += num;
   process = num1;
  }else{ //已经点击过符号
   if(num2 == '0'){
   num2 = '';
   }
   num2 += num;
   process = num1 + temp + num2;
  }
  $process.value = process;
  }
  else{ //点击了符号
  if(num1 == ''){//非法操作
   return false;
  }
  if(num == 'C'){//归零
   num1 = '';
   num2 = '';
   process = '';
   temp = '';
   sum = '';
   $process.value = '0';
   $sum.value = '0';
   statu = false;
   return false;
  }
  if(num == '<-'){//退档
   if(sum != ''){
   return false;
   }
   if(num2 == ''){
;   num1 = num1.substring(0,num1.length-1);
   if(num1 == ''){
    num1 = '0';
   }
   process = num1;
   $process.value = process;
   }else{
   num2 = num2.substring(0,num2.length-1);
   if(num2 == ''){
    num2 = '0';
   }
   process = num1 + temp + num2;
   $process.value = process;
   }
   return false;
  }
  if(num2 != ''){//a&b
   if(num == '='){//元操作到此结束
   $process.value = process;
   }else{
   $process.value = process + num;
   }
   switch(temp){//元操作继续
   case '+' : sum = parseFloat(num1) + parseFloat(num2); $sum.value = sum; $process.value = process; num1 = sum + ''; num2 = ''; break;
   case '-' : sum = parseFloat(num1) - parseFloat(num2); $sum.value = sum; $process.value = process; num1 = sum + ''; num2 = ''; break;
   case '*' : sum = parseFloat(num1) * parseFloat(num2); $sum.value = sum; $process.value = process; num1 = sum + ''; num2 = ''; break;
   case '/' : sum = parseFloat(num1) / parseFloat(num2); $sum.value = sum; $process.value = process; num1 = sum + ''; num2 = ''; break;
   case '%' : sum = parseFloat(num1) % parseFloat(num2); $sum.value = sum; $process.value = process; num1 = sum + ''; num2 = ''; break;
   }
  }else{//a&？
   if(num == '='){
   return false;
   }
   $process.value = process + num;
   process = '';
  }
  if(num == '='){
   sum = '';
   statu = false;
   return false;
  }
  temp = num;//记录操作符
  statu = true;//已经触发操作状态
  }
 }
 };
 </script>
</div> 
</body> 
</html>
Copier après la connexion

Il ne s'agit désormais que d'une simple calculatrice standard capable d'effectuer des opérations continues d'addition, de soustraction, de multiplication et de division, ainsi que des opérations de reste. Si une erreur de dividende nul se produit, une invite sera affichée ci-dessous, comme celle-ci :

C'est un petit programme que j'ai conçu. Il y a encore de nombreuses améliorations, comme l'embellissement de l'interface, et je vais continuer à travailler dur.

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.

Étiquettes associées：
js编写计算器 js计算器代码
source：php.cn
Article précédent：Exemple de code pour voter basé sur les compétences js_javascript Article suivant：Résumé des exemples d'opérations de nœud et de liste JavaScript_compétences Javascript
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Comment configurer Apache pour charger index.html et index.php ? Voici mon doute, j'ai la structure suivante : root/index.html root/api/index.php J'ai codé...
Depuis 2024-04-05 09:27:53
0
1
3505
Utiliser des bibliothèques installées localement dans les pages du site Web Est-il possible d'utiliser des bibliothèques (.dll, .ocx) écrites pour les systèmes d'expl...
Depuis 2024-04-05 00:15:49
0
1
3563
Calculez le prix total à différents pourcentages pour chaque incrément J'essaie d'écrire une calculatrice pour l'estimation du prix comme celle-ci : 1 000 MTU, l...
Depuis 2024-04-03 00:13:22
0
1
327
L'activation du bouton provoque un dysfonctionnement de l'effet de survol J'ai essayé d'apprendre les bases du développement Web (HTML, CSS et JS), j'ai donc essayé...
Depuis 2024-04-01 21:51:26
0
1
396
Déployer Django en utilisant la base de données MySQL sur un serveur personnel J'essaie de déployer mon projet Django sur Linode. La base de données MySQL que j'utilise ...
Depuis 2024-03-31 14:44:26
0
1
371
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！