HTML制作简易计算机（一开始错了不知道哪里错的，看了很久才发现全都是小错误，注意细节。错误在最后）

最新推荐文章于 2022-09-04 18:40:57 发布
最新推荐文章于 2022-09-04 18:40:57 发布
阅读量227 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dbjzsl/article/details/119545908
版权

HTML JavaScript 计算 用户交互 前端开发
关键词由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <table>
            <tr>
                <td><img src="" /></td>
                <td colspan="3">购物简易计算器</td>
            </tr>
            <tr>
                <td>第一个数</td>
                <td colSpan="3">
                    <input type="test" id="num1" />
                </td>
            </tr>
            <tr>
                <td>第二个数</td>
                <td colSpan="3">
                    <input type="test" id ="num2" />
                </td>
            </tr>
            <tr>
                <td>
                    <input type="button" value=" + " οnclick="cal('+')"/>
                </td>    
                <td>
                    <input type="button" value=" - " οnclick="cal('-')"/>    
                </td>
                <td>
                    <input type="button" value=" * "  οnclick="cal('*')"/>    
                </td>
                <td>
                    <input type="button" value=" / "  οnclick="cal('/')"/>    
                </td>
            </tr>
            <tr>
                <td>计算结果</td>
                <td colspan="3">
                    <input type="test" id="resultId" />
                </td>
            </tr>
        </table>
            <script type="text/javascript">
                function cal(type){
                    var inputObj1 = document.getElementById('num1')
                    var inputObj2 = document.getElementById('num2')
                    var result;
                    switch(type){
                        case '+':
                          result = parseInt(inputObj1.value) + parseInt(inputObj2.value);
                        break;
                        case '-':
                          result = parseInt(inputObj1.value) - parseInt(inputObj2.value);
                        break;
                        case '*':
                          result = parseInt(inputObj1.value) * parseInt(inputObj2.value);
                        break;
                        case '/':
                          result = parseInt(inputObj1.value) / parseInt(inputObj2.value);
                        break;
                    }
                    console.log(result);
                    var resultObj = document.getElementById('resultId');
                    resultObj.value = result;    
                }
            </script>
            <!-- 错误点
            1、中英文括号
            2、单词拼写
            3、<td> 斜杠不对应
            4、case-break不对应
            5、inputObj未分1，2
            6、table框架-->
    </body>
</html>

dbjzsl
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【HTML】简易计算器
Sunny的博客
03-05 5388
设计一个简易计算器，在“操作数”标签右侧的两个文本框中输入操作数，当单击“+，-，*，/”按钮时，对两个操作数进行运算并将结果填入到“结果”标签右侧的文本框中。
html项目实例——简易计算器
m0_58822398的博客
06-10 1253
<!doctypehtml> <html> <head> <metacharset="utf-8"> <title>Calculator</title> </head> <style> *{font-size:36px;} #t{ width:480px; hei...
简易版html计算器
08-25
文本文档编写，改后缀直接运行，html前端开发实例，网页版简易计算器，内容附带注释，总之很方便就对了
html制作简易计算机,用JavaScript制作一个简易计算器
weixin_29150247的博客
06-07 1553
制作出来是一个五行三列的表格，第一行是标题简易计算器，第二行是第一个数，第三行是第二个数，第四行是计算机结果，第五行是说明步骤，第三列是加减乘除四种运算方法。 简易计算器table{border:1px solid #10c6c4;margin:0 auto;width:450px;height:180px;}tr{border:1px solid #10c6c4;}td{border:1px s...
HTML实现简单计算器
Qian_Qian_IT的博客
03-25 1万+
简单计算器 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>简易计算器</title> <style type="text/css"> *{ margin: auto; padding: 0px; t...
使用HTML制作一个简单的个人主页
热门推荐
indulgexiaomei的博客
10-09 20万+
此网页我对html有了一个简单，初步的认识后制作的一个网页，主要目的是练习html的一些简单操作，由于时间关系，有很多做的不好，细节处理不到位的地方。 废话不多说，先来看效果 1、首页 这一个网页就是进行了网页背景、背景音乐、段落的处理、水平线以及超链接的简单练习。 2、我的相册 这一页主要是对大量图片进行一个排版的练习 3、我的计划 这一页主要是对文本有序无序以及表格内部的背景颜色等等的练习 4、我的家乡 这一部分是对段落、还有文本与图片结合的练习 5、我的故事 这个是对表格进阶版的练习，文字
用HTML5制作一个简易计算器
weixin_45568859的博客
12-11 1万+
用H5制作一个简易计算器 最近刚学JavaScript，之后紧接着做了一个简易的计算器，能够实现数字的加减乘除运算。 首先，先用HTML5搭建好计算器大体框架。我这里用了两个表格，一个充当显示器，另一个表格就做成计算器按键部分。 <body> <!-- 这里是充当显示器的第一个表格 --> <table border="5px" align="center"&...
用html制作一个音乐排行榜,用html制作音乐贴(一）
weixin_36201981的博客
06-03 9337
简单的HTML代码制作法准备工作：(了解最起码的html语法)1......标志对是用来创建一个段落，在此标志对之间加入的文本将按照段落的格式显示在浏览器上。另外，标志还可以使用align属性，它用来说明对齐方式，语法是：align可以是Left(左对齐)、Center(居中)和Right(右对齐)三个值中的任何一个。表示位置2.是一个很简单的标志，它没有结束标志，因为它用来创建一个回车换行.3....
用html制作简易网页
Cc1735781705的博客
09-04 1万+
66
使用HTML写一个简易计算器
weixin_51369307的博客
08-09 8134
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <table> <tr> <td><img src=""width="50px"height="50px"/></td> <td colspan="3"&.
html+js简易计算器
11-01
html+javaScript实现简易计算器。。。。。。。。。。。
html简易计算器源码
07-11
html实现的一个简易计算器,使用了js、css，可用作学习之用。
HTML简易计算器
11-26
网页版的简易计算器
自己用Javascript和Html写的一个简单计算器
11-24
自己用Javascript和Html写的一个简单计算器，新手还望大家多多赐教。
用JS+HTML实现简单计算机源码
11-09
使用Js控制 实现简单计算机 主要用于获取表单元素的值
简易计算机html代码,计算机 - html代码库 - 云代码
weixin_34867001的博客
06-08 776
[html]代码库计算器body {text-align: center}alert('开始使用计算器吧')var num1 = prompt('请输入第1个数字：')// 字符串转换成数字num1 = parseInt(num1)var num2 = prompt('请输入第2个数字：')// 字符串转换成数字num2 = parseInt(num2)var ope = prompt('请输入要...
html5计算器设计思路,HTML实现简单计算器附详细思路
weixin_35606769的博客
06-09 596
原标题：HTML实现简单计算器附详细思路Calculatorvar numresult;var str;function onclicknum(nums) {str = document.getElementById("nummessege");str.value = str.value + nums;}function onclickclear() {str = document.getElem...
java计算器设计减法出错,JAVA菜鸟 自制 某惨不忍睹的计算器 总结
weixin_36150355的博客
03-16 279
本文由一个简单的计算器入手(类似Windows自带的)主要介绍会使用到的三种布局，以及监听器的实现。首先，从附件里掏出此其貌不扬的计算器。= = 最后会发现初学者连这个渣渣都完成不了 = = 罢了，进入正题首先对于这个面板我们要了解面板的布局，一．流式布局组件按从左到右而后从上到下的顺序依次排列，一行不能放完则折到下一行。构造函数：FlowLayout()建立一个默认为居中对齐,组件彼此有5单位的...
html+js实现的简单计算器(加减乘除)
静湖微风
04-13 6万+
function setOp(op, opTips) { var tb=document.getElementById("tb_calc"); tb.style.display = "none"; document.getElementById("x").value = ""; do
三极管自制简易循环小彩灯原理与制作
"简易循环小彩灯和触摸开关灯的制作" 简易循环小彩灯是一种简单的电子制作项目，适合初学者进行实践。这个设计利用三极管的特性来实现三只发光二极管（红黄绿）的循环点亮。电路的核心在于三只三极管（例如9014）...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值