Calculatrice simple écrite en javascript
J'ai récemment écrit une calculatrice simple en javascript. Je l'ai testée moi-même et elle m'a semblé bien. Laissez-moi d'abord vous montrer l'interface :
L'interface est comme ça, mais qu'en est-il des fonctions ?
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 se produit lorsque le dividende est divisé par zéro, une invite sera donnée ci-dessous, comme celle-ci :
Je ne sais pas comment l'écrire, mais pour les novices , c'est définitivement un grand repas, avec beaucoup de choses avec lesquelles vous pouvez entrer en contact et apprendre. Si des experts y voient des omissions ou des erreurs, j'espère qu'ils vous donneront des conseils et des orientations.
Collez le code ci-dessous, j'espère qu'il contient suffisamment de commentaires.
partie js :
var num=0,result=0,numshow="0";
var operate=0; //判断输入状态的标志
var calcul=0; //判断计算状态的标志
var quit=0; //防止重复按键的标志
function command(num){
var str=String(document.calculator.numScreen.value); //获得当前显示数据
str=(str!="0") ? ((operate==0) ? str : "") : ""; //如果当前值不是"0"，且状态为0，则返回当前值，否则返回空值;
str=str + String(num); //给当前值追加字符
document.calculator.numScreen.value=str; //刷新显示
operate=0; //重置输入状态
quit=0; //重置防止重复按键的标志
}
function dzero(){
var str=String(document.calculator.numScreen.value);
str=(str!="0") ? ((operate==0) ? str + "00" : "0") : "0"; //如果当前值不是"0"，且状态为0，则返回当str+"00"，否则返回"0";
document.calculator.numScreen.value=str;
operate=0;
}
function dot(){
var str=String(document.calculator.numScreen.value);
str=(str!="0") ? ((operate==0) ? str : "0") : "0"; //如果当前值不是"0"，且状态为0，则返回当前值，否则返回"0";
for(i=0; i<=str.length;i++){ //判断是否已经有一个点号
if(str.substr(i,1)==".") return false; //如果有则不再插入
}
str=str + ".";
document.calculator.numScreen.value=str;
operate=0;
}
function del(){ //退格
var str=String(document.calculator.numScreen.value);
str=(str!="0") ? str : "";
str=str.substr(0,str.length-1);
str=(str!="") ? str : "0";
document.calculator.numScreen.value=str;
}
function clearscreen(){ //清除数据
num=0;
result=0;
numshow="0";
document.calculator.numScreen.value="0";
}
function plus(){ //加法
calculate(); //调用计算函数
operate=1; //更改输入状态
calcul=1; //更改计算状态为加
}
function minus(){ //减法
calculate();
operate=1;
calcul=2;
}
function times(){ //乘法
calculate();
operate=1;
calcul=3;
}
function divide(){ //除法
calculate();
operate=1;
calcul=4;
}
function persent(){ //求余
calculate();
operate=1;
calcul=5;
}
function equal(){
calculate(); //等于
operate=1;
num=0;
result=0;
numshow="0";
}
//
function calculate(){
numshow=Number(document.calculator.numScreen.value);
if(num!=0 && quit!=1){ //判断前一个运算数是否为零以及防重复按键的状态
switch(calcul){ //判断要输入状态
case 1:result=num+numshow;break; //计算"+"
case 2:result=num-numshow;break; //计算"-"
case 3:result=num*numshow;break;
case 4:if(numshow!=0){result=num/numshow;}else{document.getElementById("note").innerHTML="被除数不能为零！"; setTimeout(clearnote,4000)} break;
case 5:result=num%numshow;break;
}
quit=1; //避免重复按键
}
else{
result=numshow;
}
numshow=String(result);
document.calculator.numScreen.value=numshow;
num=result; //存储当前值
}
function clearnote(){ //清空提示
document.getElementById("note").innerHTML="";
}partie html :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>写给新手：js表单操作（四） 简单计算器（二）</title>
<style type="text/css">
body {
font-size:12px;
font-family:Arial, Georgia, "Times New Roman", Times, serif;
color:#555;
text-align:center;
background-color:#e2e2e2;
}
h6{
margin:0;
font-size:12px;
}
#calculator {
width:240px;
height:auto;
overflow:hidden;
margin:10px auto;
border:#fff 1px solid;
padding-bottom:10px;
background-color:#f2f2f2;
}
#calculator div {
clear:both;
}
#calculator ul{
padding:0;
margin:5px 14px;
border:#fff 1px solid;
height:auto;
overflow:hidden
}
#calculator li{
list-style:none;
float:left;
width:32px;
height:32px;
margin:5px;
display:inline;
line-height:32px;
font-size:14px;
background-color:#eaeaea;
}
#calculator li.tool{
background-color:#e2e2e2;
}
#calculator li:hover{
background-color:#f9f9f9;
cursor:pointer;
}
#calculator li:active{
background-color:#fc0;
cursor:pointer;
}
#calculator li.tool:active{
background-color:#d8e8ff;
cursor:pointer;
}
#calcu-head {
text-align:left;
padding:10px 15px 5px;
}
span.imyeah {
float:right;
color:#ccc;
}
span.imyeah a{
color:#ccc;
}
.screen{
width:200px;
height:24px;
line-height:24px;
padding:4px;
border:#e6e6e6 1px solid;
border-bottom:#f2f2f2 1px solid;
border-right:#f2f2f2 1px solid;
margin:10px auto;
direction:ltr;
text-align:right;
font-size:16px;
color:#999;
}
#calcu-foot{
text-align:left;
padding:10px 15px 5px;
height:auto;
overflow:hidden;
}
span#note{
float:left;
width:210px;
height:auto;
overflow:hidden;
color:red;
}
span.welcome{
clear:both;
color:#999;
}
span.welcome a{
float:right;
color:#999;
}
</style>
<script language="javascript">
//此处插入上面的js代码
</script>
</head>
<body>
<div id="calculator">
<div id="calcu-head"><span class="imyeah">© <a href="http://www.cnblogs.com/imyeah/" target="_blank">I'm Yeah!</a></span><h6 id="简单的计算器">简单的计算器</h6></div>
<form name="calculator" action="" method="get">
<div id="calcu-screen">
<!--配置显示窗口，使用onfocus="this.blur();"避免键盘输入-->
<input type="text" name="numScreen" class="screen" value="0" onfocus="this.blur();" />
</div>
<div id="calcu-btn">
<ul> <!--配置按钮-->
<li onclick="command(7)">7</li>
<li onclick="command(8)">8</li>
<li onclick="command(9)">9</li>
<li class="tool" onclick="del()">←</li>
<li class="tool" onclick="clearscreen()">C</li>
<li onclick="command(4)">4</li>
<li onclick="command(5)">5</li>
<li onclick="command(6)">6</li>
<li class="tool" onclick="times()">×</li>
<li class="tool" onclick="divide()">÷</li>
<li onclick="command(1)">1</li>
<li onclick="command(2)">2</li>
<li onclick="command(3)">3</li>
<li class="tool" onclick="plus()">+</li>
<li class="tool" onclick="minus()">-</li>
<li onclick="command(0)">0</li>
<li onclick="dzero()">00</li>
<li onclick="dot()">.</li>
<li class="tool" onclick="persent()">%</li>
<li class="tool" onclick="equal()">=</li>
</ul>
</div>
<div id="calcu-foot">
<span id="note"></span>
<span class="welcome">欢迎使用javascript计算器！<a href="http://www.cnblogs.com/imyeah" target="_blank">反馈</a></span>
</div>
</form>
</div>
</body>
</html>Pour plus d'articles liés aux calculatrices simples écrites en javascript, veuillez faire attention au site Web PHP chinois !
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Quelle touche est ac sur la calculatrice ?
Feb 24, 2023 am 10:19 AM
Le ac sur la calculatrice est la touche « all clear ». Le nom anglais complet de ac est « All Clear », ce qui signifie « all clear key » ; appuyer sur la touche ac signifie effacer les valeurs dans tous les registres ; , la première pression sur la touche ac effacera toutes les valeurs sauf le contenu de la mémoire.
Qu'est-ce que e dans la calculatrice
Oct 19, 2022 am 11:23 AM
Le e dans la calculatrice représente la puissance de 10, c'est-à-dire l'exposant de base 10. Par exemple, 1,99714E13 est égal à 19971400000000, exprimant un nombre sous la forme d'un multiplié par la nième puissance de 10. : Lorsque nous voulons marquer ou faire fonctionner quelque chose de plus grand ou de plus petit avec un grand nombre de chiffres, nous pouvons utiliser la notation scientifique pour éviter de perdre beaucoup d'espace et de temps.
Apprenez à ouvrir la calculatrice Win10
Jul 12, 2023 pm 11:21 PM
Le système Win10 possède de nombreuses fonctions puissantes, qui incitent de nombreux internautes à le télécharger, à l'installer et à l'utiliser. Il existe également de nombreux gadgets pratiques, tels que l'outil de calcul Win10. Certains internautes ne savent toujours pas comment ouvrir la calculatrice Win10. Laissez-moi vous apprendre à ouvrir la calculatrice Win10. Méthode 1 : Rechercher dans le menu Démarrer 1. Sur le bureau du système Windows 10, cliquez sur l'élément de menu « Démarrer/Calculatrice ». 2. Vous pouvez ouvrir la fenêtre de la calculatrice de Windows 10. Méthode 2 : ouvrir Cortana Search 1. Sur le bureau Windows 10, cliquez sur l'icône « Cortana Search » dans le coin inférieur gauche de la barre des tâches. 2. Entrez le mot-clé « calculatrice » dans le menu contextuel pour effectuer la recherche, puis cliquez sur l'élément de menu calculatrice dans les résultats de la recherche.
Qu'est-ce qu'une calculatrice sans fonction de stockage ?
Dec 29, 2020 am 10:59 AM
La calculatrice sans fonction de stockage fait référence à la calculatrice scientifique ; la calculatrice scientifique est un type de calculatrice électronique qui peut effectuer des opérations telles que l'exponentiation, la racine carrée, l'exposant, le logarithme, la fonction trigonométrique, les statistiques, etc., également connue sous le nom de calculatrice de fonction. d'une calculatrice, d'un contrôleur, d'une mémoire, d'un clavier, d'un écran, d'une alimentation et de certains périphériques et accessoires électroniques en option.
Un calculateur de séquence de Fibonacci efficace écrit en PHP
Mar 21, 2024 am 10:06 AM
Calculateur de séquence de Fibonacci efficace : l'implémentation PHP de la séquence de Fibonacci est un problème mathématique très classique. La règle est que chaque nombre est égal à la somme des deux nombres précédents, c'est-à-dire F(n)=F(n -1)+F. (n-2), où F(0)=0 et F(1)=1. Lors du calcul de la séquence de Fibonacci, elle peut être implémentée de manière récursive, mais des problèmes de performances surviendront à mesure que la valeur augmente. Par conséquent, cet article présentera comment écrire un Fibonacci efficace en utilisant PHP
Comment implémenter une fonction de calculatrice simple en utilisant JavaScript ?
Oct 27, 2023 pm 02:51 PM
Comment implémenter une fonction de calculatrice simple en utilisant JavaScript ? La calculatrice est l’un des outils couramment utilisés dans notre vie quotidienne. Elle peut être utilisée pour effectuer des opérations mathématiques simples. Aujourd'hui, nous utiliserons JavaScript pour implémenter une fonction de calculatrice simple. Dans cet article, je vais vous montrer comment écrire du code en JavaScript pour implémenter des opérations mathématiques de base et des interfaces de calculatrice. Tout d’abord, nous devons créer un fichier HTML contenant un texte permettant d’afficher les résultats de l’opération.
Comment convertir une devise sur la calculatrice système Mac - Comment convertir une devise sur la calculatrice système Mac
Mar 18, 2024 pm 03:58 PM
Mes amis, savez-vous comment convertir des devises sur une calculatrice système Mac ? Aujourd'hui, je vais vous expliquer comment convertir des devises sur une calculatrice système Mac. Si vous êtes intéressé, venez jeter un œil avec moi, j'espère que cela pourra vous aider. Étape 1 : Ouvrez la calculatrice du système Mac, cliquez sur Convertir dans la barre de menu. Étape 2 : Dans le menu Conversion, cliquez sur Devise. Étape 3 : Après avoir sélectionné la devise à convertir, cliquez sur le bouton Convertir.
Quelle touche est ac sur la calculatrice ?
Aug 18, 2023 am 09:48 AM
La touche « AC » sur la calculatrice signifie « All Clear ». Appuyer sur la touche AC effacera toutes les entrées et opérations de la calculatrice et réinitialisera la calculatrice à son état initial, ce qui équivaut à redémarrer un calcul.
