Comment utiliser JS pour générer un ordinateur simple-js tutoriel-php.cn

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

零到壹度

Libérer： 2018-04-13 14:53:30

original

3463 Les gens l'ont consulté

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>

Copier après la connexion

É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;
}

Copier après la connexion

É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=[];
        }
    }
}

Copier après la connexion

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!