简易计算机网页

原创 2018年04月15日 15:42:08

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

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

HTML5和CSS3开发网页

会使用html5和css3完成前端开发任务
  • 2017年10月09日 22:01

Java简易计算机

为了完成Java作业,随便写了个计算器(只能简单加减乘除) 先上图 import java.awt.*; import java.awt.event.ActionEvent; import java....
  • m0_37381034
  • m0_37381034
  • 2017-11-29 15:53:04
  • 256

一个简单的网页制作作业

  • 2015年06月05日 22:43
  • 293KB
  • 下载

一个基于JavaScript的简单网页计算器

一个基于JavaScript的简单网页计算器,真的很简单。 效果如下: A simple Calculator .number{ ...
  • Youyou_0826
  • Youyou_0826
  • 2017-04-20 14:26:47
  • 1813

htmlhe和script结合制作简易计算器

用到了if else语句和switch  case语句 下面来看两种方式的代码: switch语句: 简易计算器 var a; var b; var c; a=prompt("...
  • qq_20461915
  • qq_20461915
  • 2016-06-30 10:21:10
  • 663

简易计算机系统综合设计--前言

前言:     楼主是计算机系大二的一名学生,这次的CPU设计是课程《逻辑与计算机基础》的一个课题任务,由于之前没有学习使用过Quartus ||,故实验的过程中还是遇到了相当多的困难的。并且当去查...
  • xbb224007
  • xbb224007
  • 2018-01-07 17:12:52
  • 42

简易计算机

确定需求: 简洁的四则运算计算器 前期准备 设置文本框样式 数字按钮布局 修改按钮样式 实例化控件 实现业务逻辑 初始化按钮 Button btn_0; Button bt...
  • a461389522
  • a461389522
  • 2016-08-25 22:22:48
  • 83

大学课程设计 网页作业 简易大学课程设计 网页作业 简易

  • 2009年04月10日 08:24
  • 5.73MB
  • 下载

简单计算机c++代码

/* 今天的小题目 空闲时间的c++简单练习 */ /* 内容: 输入两个数值(均不为零)及一个算术运算符,输出其运算的结果(保留两位小数)。 输入说明: 一行,2个数字,一字符(+,-...
  • youshenxuzuo
  • youshenxuzuo
  • 2013-01-31 22:50:12
  • 1139

Android 简易计算器 源码

  • 2013年04月05日 11:32
  • 629KB
  • 下载
收藏助手
不良信息举报
您举报文章:简易计算机网页
举报原因:
原因补充:

(最多只允许输入30个字)