HTML计算器

最新推荐文章于 2024-07-03 11:26:31 发布
最新推荐文章于 2024-07-03 11:26:31 发布
阅读量1.1k 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xunannan0624/article/details/52908998
版权
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>计算器</title>
    </head>
    <style>
*{ font-size:18px;}
    #t{ width:210px; height:40px;}
.shaw{ width:70px; height:40px;}
.equal{ width:70px; height:80px;}
    </style>
<script>
var flag=true; //设置标志，用于没有输入时显示0，以及有显示时清空
        function func(str){
var t=document.getElementById("t");
if(flag){
t.value=""; //清除没有输入时的0
}
flag=false; //改变状态，不再清空内容
t.value=t.value+str;//将之前的内容和输入的内容相加，重新显示

}
function backspace(){//回退一个数，相当于撤销
var t=document.getElementById("t");
t.value=t.value.substr(0,t.value.length-1);//字符串的截取，从0到字符串的长度-1
}
        function AC(){//清空显示内容
var t=document.getElementById("t");
t.value="0";//显示0
flag=true;//让下次输入可以清空0
}
function equals(){//计算结果
var t=document.getElementById("t");
t.value=eval(t.value);//将字符串转换为逻辑运算
}
        </script>
<body>


<!--    内边距               外边距           边框              居中-->
<table cellpadding="0" cellspacing="0" border="1" align="center">
    <caption><h3>计算器</h3></caption>


    <tr>
        <td colspan="3"><input type="text" value="0" id="t"/></td>
           
            <td><input type="button" class="shaw" value="回退" onClick="backspace()"/></td>
            <td><input type="button" class="shaw" value="清除" onClick="AC()"/></td>
        </tr>
        <tr>
             <td><input type="button" class="shaw" value="7" onClick="func('7')"/></td>
             <td><input type="button" class="shaw" value="8" onClick="func('8')"/></td>
             <td><input type="button" class="shaw" value="9" onClick="func('9')"/></td>
             <td><input type="button" class="shaw" value="/" onClick="func('/')"/></td>
             <td><input type="button" class="shaw" value="(" onClick="func('(')"/></td>
        </tr>
         <tr>
                <td><input type="button" class="shaw" value="4" onClick="func('4')"/></td>
                <td><input type="button" class="shaw" value="5" onClick="func('5')"/></td>
                <td><input type="button" class="shaw" value="6" onClick="func('6')"/></td>
                <td><input type="button" class="shaw" value="*" onClick="func('*')"/></td>
                <td><input type="button" class="shaw" value=")" onClick="func(')')"/></td>
        </tr>
          <tr>
                <td><input type="button" class="shaw" value="1" onClick="func('1')"/></td>
                <td><input type="button" class="shaw" value="2" onClick="func('2')"/></td>
                <td><input type="button" class="shaw" value="3" onClick="func('3')"/></td>
                <td><input type="button" class="shaw" value="-" onClick="func('-')"/></td>
                <td rowspan="2"><input type="button" value="=" class="equal" onClick="equals()"/></td>
        </tr>
          <tr>
                <td><input type="button" class="shaw" value="0" onClick="func('0')"/></td>
                <td><input type="button" class="shaw" value="." onClick="func('.')"/></td>
                <td><input type="button" class="shaw" value="00" onClick="func('00')"/></td>
                <td><input type="button" class="shaw" value="+" onClick="func('+')"/></td>
        </tr>
          
     
    </table>
                                                                   
</body>
</html>
牛奶爱上了咖啡
关注
html计算器
10-27
html网页版计算器calc，纯JavaScript编写，双击即可运行，不需其他环境。页面较为美观，模仿电脑自带calc，具有仿九宫格类似的样式。
html——计算器
最新发布
2401_86506743的博客
08-12 605
简单的html知识应用，在浏览器上实现一个计算器小页面
html实现计算器
zmk0820的博客
03-24 4839
html实现计算器
HTML实现计算器
m0_62727420的博客
07-03 1万+
HTML实现计算器
HTML计算器_html记算器_html计算器_
10-03
HTML计算器是一种基于网页的简单计算工具，它利用HTML、CSS和JavaScript这三种核心技术来构建。HTML（HyperText Markup Language）负责页面的结构，CSS（Cascading Style Sheets）用于美化和布局，而JavaScript则...
用HTML做计算器
2401_82944012的博客
07-03 1396
用HTML做计算器前言开肝创建基础框架构思修饰全部代码最后 前言 由于上节课我们学习了html,今天我们就来练习一下。 开肝 创建基础框架 首先，我们先创建一个新文本文档，并把后缀名改为.html。 右键，打开方式，选择vscode编辑器。 vscode界面出现，按下英文问号，一个基础的框架出现了。 构思 按照上节课的构思方法，开始构思。 我画了张图简单的标了一下一个小框架就出现了，我们要开始搭了。 按下回车。调整一下 把符号文字加一下，把class也加上。 这是我后来改的class虽然很乱，但是先
html5计算器
11-19
谷歌浏览器做了html5页面做了兼容，ie9以上没问题但因为加了转换汇率的API跟书号isbn查询页面有点不好看，火狐呢，因为我调试浏览器就是火狐
计算器.html
06-06
计算器.html HTML5实现的计算器。
简易版html计算器
08-25
文本文档编写，改后缀直接运行，html前端开发实例，网页版简易计算器，内容附带注释，总之很方便就对了
HTML5实现网页计算器
08-18
这是个用html5 + css3 + js写的网页计算器，支持括号运算，支持键盘输入、删除键删除输入，按键盘时计算器按键发亮
html计算器_简易计算器
weixin_39731782的博客
12-01 159
JavaScript和jQuery也是第一次接触到，对于它的应用还有操作还有很多不是很理解的东西，所以js部分的代码不是很简洁，日后还是需要一定的学习来熟悉。对于网页的大致框架布局我是没有太大问题，整个计算器的bug点在于jQuery。按照老师在简易计算器的课程中的用法应该用到$('table').find('td').click(function(){})点击单元格内的内容，获取它放入相应的位置...
简单计算器
MeiLi_chenai的博客
12-17 450
var numresult; var str; //用于输入的方法 function shuru(nums){ str = document.getElementById("disPlay"); str.value = str.value + nums; } //清空界面 function qingKong(){ do
用HTML实现简易版计算器
热门推荐
lkllkl123123的博客
08-13 1万+
计算器功能：实现了加减乘除、清零、回退、四则运算等等 HTML部分：用表格添加按键，用div块显示内容 CSS部分：将显示的内容定位到div块右下角 JavaScript部分：通过innerTHML属性添加 / 获取所需计算的内容，再调用eval方法将获取到的内容转换为js代码进行计算........................
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值