Maison > Article > interface Web > Exemple Javascript montrant comment implémenter l'opérateur arithmétique le plus basique
Exemple Javascript montrant comment implémenter l'opérateur arithmétique le plus basique
- 黄舟original
- 2017-07-17 11:44:121146parcourir
Cet article présente principalement le code pertinent de Javascript pour implémenter en détail les opérateurs de base. Il a une certaine valeur de référence. Les amis intéressés peuvent se référer à
Utiliser Javascript Implémenter une calculatrice de base, le. le contenu spécifique est le suivant
Utiliser la disposition du tableau, ajouter des événements avec JS
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>计算器</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
table{
width:400px;
height: 600px;
border-collapse: collapse;
margin: auto;
}
.trr{
width: 400px;
height: 100px;
}
.trr1{
width: 400px;
height: 50px;
}
.tdd{ width: 100px;
height: 100px;
border: 1px solid silver;
text-align: center;
line-height: 100px;
}
.btn{
width: 100%;
height: 100%;
font-size: 2.5em;
}
.btn1{
width: 100%;
height: 100%;
font-size: 2.5em;
}
.tdd1{
width: 100px;
height: 50px;
}
.text{
height: 100%;
font-size: 2.5em;
text-align: right;
}
</style>
<body>
<table>
<tr class="trr text1">
<td class="tdd" colspan="4"><input class="text" type="text" disabled value="0" /></td>
</tr>
<tr class="trr1">
<td class="tdd1" colspan="2"><input class="btn1 btn" type="button" value="c"/></td>
<td class="tdd1" colspan="2"><input class="btn1 btn" type="button" value="d"/></td>
</tr>
<tr class="trr">
<td class="tdd"><input class="btn" type="button" value="7"/></td>
<td class="tdd"><input class="btn" type="button" value="8"/></td>
<td class="tdd"><input class="btn" type="button" value="9"/></td>
<td class="tdd"><input class="btn" type="button" value="/"/></td>
</tr>
<tr class="trr">
<td class="tdd"><input class="btn" type="button" value="4"/></td>
<td class="tdd"><input class="btn" type="button" value="5"/></td>
<td class="tdd"><input class="btn" type="button" value="6"/></td>
<td class="tdd"><input class="btn" type="button" value="*"/></td>
</tr>
<tr class="trr">
<td class="tdd"><input class="btn" type="button" value="1"/></td>
<td class="tdd"><input class="btn" type="button" value="2"/></td>
<td class="tdd"><input class="btn" type="button" value="3"/></td>
<td class="tdd"><input class="btn" type="button" value="-"/></td>
</tr>
<tr class="trr">
<td class="tdd"><input class="btn" type="button" value="0"/></td>
<td class="tdd"><input class="btn" type="button" value="."/></td>
<td class="tdd"><input class="btn" type="button" value="+"/></td>
<td class="tdd"><input class="btn" type="button" value="="/></td>
</tr>
</table>
<script>
var obtn=document.getElementsByClassName("btn");
var otext=document.getElementsByClassName("text")[0];
var arr=[];//定义一个数组，向其中存入数字和运算符。
for(var i=0;i<obtn.length;i++){
obtn[i].onclick= function () {
if(!isNaN(this.value)||this.value=="."){ //this:代表鼠标点击的obtn
if(otext.value.indexOf(".")==-1){ //消除重复"."的BUG
if(otext.value.length==0){
if(this.value!="0"){ //----------------------
otext.value+=this.value; //|
} //|
} //|
else if(otext.value.length==1&&otext.value=="0"){//|
otext.value=this.value; //|
} //|
else if(otext.value.length==1&&otext.value!="0"){//初始状态时，若计算器屏幕为"0",
otext.value+=this.value; //实现输入一个非零数字的时候，计算器
} //上的数值替换为输入的非零值
else if(otext.value.length>1){ //|
otext.value+=this.value; //|
} //--------------------
}
else
{
if(this.value!="."){ //消除重复"."的BUG
if(otext.value.length==0){
if(obtn[i].value!="0"){
otext.value+=this.value;
}
}
if(otext.value.length>=1){
otext.value+=this.value;
}
}
}
}
if(this.value=="/"||this.value=="*"||this.value=="+"||this.value=="-"){
if(otext.value!="0"&&otext.value!=""&&otext.value!="-"){
//消除输入重复运算符的BUG，
arr[arr.length]=otext.value; //当输入一个运算符的时候，otext内的value值
arr[arr.length]=this.value; //为""(空)，所以判断条件为若otext内的value值不为空
otext.value=""; //则向数字中传值。
} //此时出现无法输入负数值运算的BUG
else if(otext.value==""&&this.value=="-"){ //消除无法输入负数值运算的BUG
otext.value=this.value; //当点击运算符后otext的value值为空，
} //此时判断若this的值为"-",就替换进去。
else if(otext.value=="0"&&this.value=="-"){//此时出现无法执行类似"3--3"的双减法运算BUG，
otext.value=this.value; //因为eval()无法识别有双减的字符串值。
} //若初始时，otext值为"0"，并且this的值为
} //"-",则用"-"替换otext中的值。
if(this.value=="="){
if(otext.value.length>=1){ //--------------------
var string=""; //|
if(arr[arr.length-1]=="-"&&otext.value<0){ //→消除无法执行类似"3--3"的双减法运算的BUG
arr[arr.length-1]="+"; //→当输入负数值的时候，判断arr数组中的
otext.value=Math.abs(otext.value); //→末尾值是否为"-"，若为"-"则把其改为"+",
} //→并且让otext.value值取绝对值。
arr[arr.length]=otext.value; //|
for(var i=0;i<arr.length;i++){ //|
string+=arr[i]; //|
} //|把存入数组中的数字和运算符遍历存储到一个字符串中，
otext.value=eval(string); //|直接使用eval()方法就可以识别一个的字符串，执行
arr=[]; //|该字符串中的运算
} //|
} //---------------------
if(this.value=="c"){
otext.value="0";
arr=[];
}
if(this.value=="d"){
otext.value=otext.value.substr(0,otext.value.length-1);//每一次删除otext中的末尾值
if(otext.value==""){ //当把otext中的值删除完后，给
otext.value="0"; //otext复值"0".
}
}
}
}
</script>
</body>
</html>
La fonction "c" de la calculatrice est un écran clair" ; La fonction d" est de supprimer un numéro ;
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Déclaration：
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
Article précédent：Comment utiliser JavaScript pour compléter la boîte publicitaire de mouvement du tampon de défilement suivante ?Article suivant：Comment utiliser JavaScript pour compléter la boîte publicitaire de mouvement du tampon de défilement suivante ?
Articles Liés
Voir plus- Une analyse approfondie du composant de groupe de liste Bootstrap
- Explication détaillée du currying de la fonction JavaScript
- Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
- Angularjs intègre l'interface utilisateur WeChat (weui)
- Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript