Home > Article > Web Front-end > How to use JS to generate a simple computer

How to use JS to generate a simple computer

零到壹度Original: 2018-04-13 14:53:303456browse

The content of this article is to share with you how to use JS to generate a simple computer. It has a certain reference value. Friends in need can refer to it

##Step one: Write the structure of html

Use p element, table element, input element , button element

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

Step 2:css Add style Use external style 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;
}

Step 3: Add js events to operate the computer

Thoughts:

#Knowledge points used:

indexOf() method

Returns a specified string value in the string The first occurrence of

#Syntax stringObject.indexOf( substring,startpos)

#join() method

is used to put all elements in the array into a string.

#eval()

The function can calculate a string and execute the

JavaScript code ;

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

The above is the detailed content of How to use JS to generate a simple computer. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Summary of very useful extended web form JS plug-inNext article：Summary of very useful extended web form JS plug-in

See more

How to use JS to generate a simple computer

Related articles