JS を使用して簡単なコンピューターを生成する方法-jsチュートリアル-php.cn

JS を使用して簡単なコンピューターを生成する方法

零到壹度

リリース： 2018-04-13 14:53:30

オリジナル

3418 人が閲覧しました

この記事の内容は、JS を使用して簡単なコンピューターを生成する方法を共有することです。必要な友人はそれを参照できます

ステップ 1: 構造を HTML で記述します。

p 要素、table 要素、input 要素、button 要素を使用する

<!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>

ログイン後にコピー

ステップ 2: css スタイルを追加する外部スタイルリンクを使用する counter.css
れーれー

ステップ 3: コンピューターを操作するための js イベントを追加する

アイデア:

使用するナレッジポイント:

indexOf() メソッドは、指定された文字列値が文字列内で最初に出現する位置を返します。構文 stringObject .indexOf(substring,startpos)

join()メソッド

は、配列内のすべての要素を文字列に入れるために使用されます。

eval()

関数は文字列を計算し、

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

ログイン後にコピー

以上がJS を使用して簡単なコンピューターを生成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。