简易计算机网页

今天我们来讲一个关于制作一个简单的计算机网页的方法,来完成我们网页中简易的运算。注释用红色和蓝色表示,红色为较重要的地方,值得注意

<html lang="en">

<head>

<meta charset="UTF-8">

 <!--记得写上标题,以方便我们更清楚-->

 <title>计算器</title>

<!--建一个js文件夹-->

<script type="text/javascript">

<!--定义一个函数-->

     function show(my){

<!--读num1字符值-->

       var n1=document.getElementById('num1').value;

<!--将num1转化为数值型,以方便计算使用这一步尤为重要-->

        n1=parseInt(n1);
       var n2=document.getElementById('num2').value;
        n2=parseInt(n2);
       var answer='';

        answer=parseInt('answer');

<!--建立一个条件语句,对函数读取的符号值进行判断,以便计算 -->

        switch(my){
        case '+':
        answer=n1+n2;
        break;
        case '-':
        answer=n1-n2;
        break;
        case '*':
        answer=n1*n2;
        break;
        case '/':
        answer=n1/n2;
        break;

        }

<!--输出计算的数-->

        document.getElementById('deshu').value=answer;
     }

</script>

<!--对计算机外部样式进行设置-->

<style type="text/css">
    table{
    width: 400px;
    height: 200px;
    border:1px solid #e1e1e1;
    margin: 10px auto;
    border-collapse: collapse;
    }
    th,td{
    height: 37px;
    border:1px solid #e1e1e1;
    }
    input[type="text"]{
    width: 176px;
    height: 19px;
    border:1px solid #bfbfbf;
    }
    input[type="button"]{
    width: 30px;
    height: 30px;
    background-color: #3fbe5b;
    margin-top: 5px;
        border:0;
        margin-left: 5px;
        text-align: center;
    }


</style>
</head>
<body>
<table>
   <tr>
    <th colspan="3">简易计算器</th>
   </tr>
<tr>
<td>第一个数字</td>

<td>

                               <!--输入第一个,并建立id进行函数读取-->

<input type="text" value="" id="num1" >
</td>

<td rowspan="4">

                              <!--设置运算符号,并读取-->

<input type="button" value="+" onclick="show('+')"><br>
<input type="button" value="-" onclick="show('-')"><br>
<input type="button" value="*" onclick="show('*')"><br>
<input type="button" value="/" onclick="show('/')"><br>
</td>
</tr>
<tr>
<td>第二个数字</td>

<td>

                             <!--输入第二个数,并进行设置-->

   <input type="text" value="" id="num2">
</td>
</tr>
<tr>

<td>得数</td>

                        <!--输出得数-->

<td><input type="text" id="deshu" value=""></td>
</tr>
<tr>
<td colspan="2">提示信息</td>
</tr>
</table>
</body>
</html>
阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页