用JavaScript制作一个简易计算器

最新推荐文章于 2024-04-04 00:13:16 发布
最新推荐文章于 2024-04-04 00:13:16 发布
阅读量2k 收藏 12
点赞数 3
文章标签： javascript ViewUI
原文链接：https://my.oschina.net/u/3841968/blog/1940516
版权

制作出来是一个五行三列的表格，第一行是标题简易计算器，第二行是第一个数，第三行是第二个数，第四行是计算机结果，第五行是说明步骤，第三列是加减乘除四种运算方法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简易计算器</title>
    <style type="text/css">
     table{
         border:1px solid #10c6c4;
         margin:0 auto;
         width:450px;
         height:180px;
     }
     tr{
         border:1px solid #10c6c4;
     }
     td{
         border:1px solid #10c6c4;
     }
     th{
         border:1px solid #10c6c4;
         text-align:center;
         height:35px;
     }
     input[type=button]{
         width:33px;
         height: 33px;
         margin:5px;
         background: #11fffc;
         border:1px solid #08d0ce;
     }
     input[type=text]{
         width:210px;
         height:25px;
         margin-left:5px;
         padding-left:5px;
     }
    </style>
    <script type="text/javascript">
       function yunsuan(op){
           var n1=document.getElementById('num1').value;
           var n2=document.getElementById('num2').value;
           var jieguo=document.getElementById('jieguo').value;
           n1=Number(n1);
           n2=Number(n2);
           switch(op){
               case '+':
                  jieguo=n1+n2;
                  break;
               case '-':
                  jieguo=n1-n2;
                  break;
               case '*':
                  jieguo=n1*n2;
                  break;
               case '/':
                  jieguo=n1/n2;
                  break;
           }
           document.getElementById('jieguo').value=jieguo;
       }

    </script>
</head>
<body>
    <table>
        <tr>
            <th colspan="3">简易计算器</th>
        </tr>
        <tr>
            <td>第一个数</td>
            <td><input type="text" id="num1"></td>
            <td rowspan="4">
                <input type="button" value="+" οnclick="yunsuan('+')"><br>
                <input type="button" value="-" οnclick="yunsuan('-')"><br>
                <input type="button" value="*" οnclick="yunsuan('*')"><br>
                <input type="button" value="/" οnclick="yunsuan('/')"><br>
            </td>
        </tr>
        <tr>
            <td>第二个数</td>
            <td><input type="text" id="num2"></td>
        </tr>
        <tr>
            <td>结果</td>
            <td><input type="text" id="jieguo"></td>
        </tr>
        <tr>
            <td colspan="2">运算方法：输两个数，再选算法</td>
        </tr>
    </table>
</body>
</html>

转载于:https://my.oschina.net/u/3841968/blog/1940516

choucai3595
关注
  • 3
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS网页计算器，仿iPhone超漂亮
05-12
摘要:脚本资源,Ajax/JavaScript,JS计算器,网页计算器,仿iPhone　　超级漂亮的仿iPhone手机界面的JS网页计算器，用在网页上舒服好看，用到了Cookies技术，除了四则运算，还可以累计计算，还有积存、取存、清存、退格、清屏等功能，实用性强，制作精良。
JS原生——编写简易计算器
m0_64954687的博客
12-06 8930
计算器
JavaScript制作简易版计算器——求任意两个数的和差积商取余
最新发布
ghfgjfg679的博客
04-04 305
1·2 JavaScript的输入输出语句alert（msg）：浏览器弹出警示框console.log(msg)：浏览器控制台打印输出信息prompt（info）：浏览器弹出输入框，用户可以输入1·3 变量。
利用原生javascript制作简易计算器
PILIpilipala的博客
08-08 1775
第一步：利用html构建好计算器的大概形状样式 <table> <tr> <td colspan="4" ><input id="text" type="text" value="0" /></td> </tr> <tr> <td colspan="2"><button class="btn">del</button></t
javascript 之简单计算器案例
jpmoney的博客
10-14 280
javascript 简单计算机案例
JavaScript 用三种方法做一个简易计算器
m0_62496369的博客
10-21 7299
new关键字执行过程 // 1.new构造函可以在内存中创建了一个空的对象 // 2.this就会指向刚才创建的空对象 // 3.执行构造函数里面的代码 给这个空对象添加属性和方法 // 4.返回这个新对象(所以构造函数里面不需要return)
如何实现简单计算器（附代码）
qq_45750154的博客
06-10 3924
本篇文章给大家详细介绍一下javascript实现简单计算器的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。 JS实现简单计算器 页面布局设计（HTML+CSS) 由于在之前的博客中有对html和css进行详细的讲解，再次就不多叙述，直接上代码。因为js中用到了JQuery选择器所以在html中使用<script></script>标签引入了JQuery，在html中为每个按钮单击绑定计算器事件cal()并传入当前点击对象this。 .html文件：
用 JavaScript 和 HTML 制作一个计算器
pydby01的博客
12-17 4139
引言 这是一篇很棒的文章，在这里你可以学习如何从零做出一款计算器。我们希望你使用 JavaScript 开发并且思考怎么构建一款计算器, 如何编写代码，以及最后，如何整理自己的代码。 在这篇文章结束，你会得到一款和 iPhone 计算器功能一样的计算器（除了 +/- 和百分比功能外）。 前置条件 在你开始本节课程前，请确保你对 JavaScript 有一个不错的了解。最起码，你需要知道以下事情： If/else 分支 For 循环 JavaScript 函数 箭头函数 &am...
JavaScript，HTML制作简易图形化界面计算器
06-23
利用HTML，JavaScript，CSS技术制作一个图形化界面的计算器，实现简单的加减乘除四则运算，以及正负数的运算
JavaScript实现一个简易的计算器实例代码
10-18
主要介绍了JavaScript实现一个简易的计算器实例代码，具有很好的参考价值，希望对大家有所帮助，一起跟随小编过来看看吧
JavaScript简易计算器制作
12-28
本文实例为大家分享了JavaScript实现简易计算器的具体代码，供大家参考，具体内容如下 成品图 这个简易的计算器只能实现 + – * /的运算 在动手之前，我们要先理清思路，看图，若想实现这样一个简易的计算器，我们...
javascript制作简易计算器
10-09
用javascript编程语言编写的简易计算器，仅包含+-*/运算
用JavaScript实现一个简单的网页版计算器
run_bear的博客
08-05 9230
背景 实现效果 最终展现的页面如下图 用到的技术 实现思路 具体实现代码
JavaScript实现简单计算器
热门推荐
weixin_47261870的博客
07-02 3万+
JavaScript和HTML实现简单计算器功能
js制作一个简易计算器,使用js制作简易计算器
chatgpt001的博客
10-28 864
大家好，给大家分享一下js制作简易计算器代码怎么写，很多人还不知道这一点。下面详细解释一下。现在让我们来看看！
JavaScript实现计算器
wangshiyi13的博客
07-18 5108
使用JavaScript编写了一个简易的计算器，基本与手机计算器一致。
JS：做个计算器
weixin_50517811的博客
06-26 1202
JS实现计算器功能
用js做一个简单的计算器
TISRNW的博客
10-29 1736
实现并不困难 1，我们首先把样式写出来 2，写出来之后我们用js获取我们每次点击的数值，将其运算等等并将其填充到我们写的显示屏上。 3，对于清零，取反，取百分数代码中有详细说明。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title&g...
使用JS完成一个简单的计算器功能
chuisiqin5881的博客
05-08 2472
<!DOCTYPEhtml> <html> <head> <title>事件</title> <scripttype="text/javascript"> functioncount(){ ...
javascript制作一个简易的计算器
03-11
以下是一个简单的 JavaScript 计算器的代码示例： ```html <!DOCTYPE html> 简易计算器 简易计算器 输入第一个数字"> <option value="+">+ <option value="-">- *">* <option value="/">/...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值