Maison > Article > interface Web > Comment utiliser JS pour générer un ordinateur simple

Comment utiliser JS pour générer un ordinateur simple

零到壹度original: 2018-04-13 14:53:303460parcourir

Le contenu de cet article est de partager avec vous comment utiliser JS pour générer un ordinateur simple. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer

Première étape : Écrire la structure HTML

Utiliser élément p, élément table, élément d'entrée , élément de bouton

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js简单计算器</title>
    <link rel="stylesheet" href="counter.css">
</head>
<body>
<p>
        <table>
            <tr>
                <td colspan="4"><input type="text" id="input" value="0"></td>
            </tr>
            <tr>
                <td colspan="2"><button class="click" id="reset">C</button></td>
                <td colspan="2"><button class="click" id="reset1">D</button></td>
            </tr>
            <tr>
                <td><button class="click">7</button></td>
                <td><button class="click">8</button></td>
                <td><button class="click">9</button></td>
                <td><button class="click">+</button></td>
            </tr>
            <tr>
                <td><button class="click">4</button></td>
                <td><button class="click">5</button></td>
                <td><button class="click">6</button></td>
                <td><button class="click">-</button></td>
            </tr>
            <tr>
                <td><button class="click">1</button></td>
                <td><button class="click">2</button></td>
                <td><button class="click">3</button></td>
                <td><button class="click">*</button></td>
            </tr>
            <tr>
                <td><button class="click">.</button></td>
                <td><button class="click">0</button></td>
                <td><button class="click">=</button></td>
                <td><button class="click">/</button></td>
            </tr>
        </table>
</p>
<script type="text/javascript" src="counter.js"></script>
</body>
</html>

Étape 2 : css ajouter un style à l'aide de style externe link counter.css

*{
    margin: 0;
    padding: 0;
}
p{
    width: 290px;
    height: 338px;
    margin: 20px auto;
    border: 1px solid black;
}
#input,#reset,.click{
    text-align: center;
    font-size: 16px;
    font-weight: 700;
}
#input{
    width: 282px;
    height: 50px;
    text-align: right;
}
#reset{
    width: 142px;
    height: 50px;
}
#reset1{
    width: 142px;
    height: 50px;
}
.click{
    display: inline-block;
    width: 70px;
    height: 55px;
}

Étape 3 : Ajouter des événements js pour faire fonctionner l'ordinateur

Pensée :

Points de connaissances utilisés :

méthode indexOf() renvoie une chaîne spécifiée La position où la valeur est en premier apparaît dans la chaîne

Syntaxe stringObject.indexOf(sous-chaîne) ,startpos)

join() La méthode est utilisé pour mettre tous les éléments du tableau dans une chaîne.

eval() La fonction peut calculer une chaîne et exécuter le code JavaScript

;

语法：eval(string)

substr()方法从字符串中提取从startPos位置开始的指定数目的字符串；

语法：stringObject.substr(startPos,length)

代码：

/*获取操作对象*/
var key=false;
var res=[];
var text=document.getElementById("input");
var btn=document.getElementsByClassName("click");

for(var i=0;i<btn.length;i++){

    btn[i].onclick=function(){
        var txt=this.innerHTML;
        /*按键情况分类*/
        if(!isNaN(txt)||txt==".")
        {
            key=false;
            if(text.value==0 && txt!=".")
            {
                text.value=txt;
            }
            else/*(text.value==0&&txt==".")*/
            {
                if(text.value.indexOf(".")!=-1)//indexOf()检索的字符串值没有出现，则该方法返回 -1；
                {
                    if(txt!=".")
                    {
                        text.value+=txt;
                    }
                }
                else
                {
                    text.value+=txt;
                }

            }
        }
        else if(txt==&#39;+&#39;||txt==&#39;-&#39;||txt==&#39;*&#39;||txt==&#39;/&#39;)
        {
            if(key) {
                if (isNaN(res[res.length-1])&&res.length>0)
                {
                    res[res.length-1]=txt;
                    return;
                }

            }
            key=true;
            res[res.length]=text.value;
            res[res.length]=txt;
            text.value=0;
        }
        else if(txt==&#39;C&#39;)
        {
            res=[];
            text.value=0;
        }
        else if(txt==&#39;D&#39;)
        {
            text.value=text.value.substr(0,text.value.length-1);
        }
        else if(txt==&#39;=&#39;)
        {
            res[res.length]=text.value;
            //text.value=eval(res.split(" ",res.length-1));
            console.log(res);//输出分割后的数组
            text.value=eval(res.join(""));//join("")字符串用空格分割，eval()字符串转化为数值，用数值运算赋给文本框
            res=[];
        }
    }
}

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：Résumé du plug-in JS de formulaire Web étendu très utileArticle suivant：Résumé du plug-in JS de formulaire Web étendu très utile

Articles Liés

Voir plus