html+js实现简单的计算器代码(加减乘除) | WEB开发
html+js实现简单的计算器代码(加减乘除)
html+js实现简单的计算器代码(加减乘除)
&!DOCTYPE html&
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
&title&&/title&
&td&&input type="button" value="add"
onclick="setOp('+', 'add');"/&&/td&
&td&&input type="button" value="miner" onclick="setOp('-', 'miner');"/&&/td&
&td&&input type="button" value="times" onclick="setOp('*', 'times');"/&&/td&
&td&&input type="button" value="divide" onclick="setOp('/', 'divide');"/&&/td&
&table id="tb_calc" &
&td& &input id="x" type="text"
value="" name="x" /&&/td&
&td& &lable id="op" name="op"&&/lable& &/td&
&td& &input id="y" type="text"
value="" name="y" /& &/td&
&td& &input id="opTips" type="button" value="" onclick="calc();"/& &/td&
&td& &lable id="z" name="z"&&/lable& &/td&
&script type="application/javascript"&
function setOp(op, opTips)
var tb=document.getElementById("tb_calc");
tb.style.display = "none";
document.getElementById("x").value = "";
document.getElementById("y").value = "";
document.getElementById("z").innerText = "";
document.getElementById("op").innerText =
document.getElementById("opTips").value = opT
tb.style.display = "block";
function calc()
var x = parseInt(document.getElementById("x").value);
var y = parseInt(document.getElementById("y").value);
var op = document.getElementById("op").innerT
var z = "";
switch(op)
case '*': ;
case '/': ;
console.log(x, op, y, '=', z);
document.getElementById("z").innerText =
截图如下：
以上这篇html+js实现简单的计算器代码(加减乘除)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持源码天空。选择在海同培训：
jQuery如何实现简单计算器特效
摘要：本篇教程通过代码讲解了jQuery如何实现简单计算器特效，该jQuery计算器使用 Bootstrap 4进行布局，并结合math.js数学库，实现简单的加减乘除和平方，开方等数学计算。
简要教程这是一款jquery实现简单计算器代码。该jquery计算器使用 Bootstrap 4进行布局，并结合math.js数学库，实现简单的加减乘除和平方，开方等数学计算。&使用方法在页面中引入bootstrap 4，jquery和math.min.js文件。以及计算器的样式文件style.css和main.js文件。&link&href=&path/to/bootstrap-4.0.0-beta.min.css&&rel=&stylesheet&&&&&&&&&&&&&&&&&&&&&&&&&
&link&href=&path/to/font-awesome.min.css&&rel=&stylesheet&&&&&&&&&&&&&&&&&&&
&link&href=&path/to/style.css&&rel=&stylesheet&&
&script&src=&path/to/jquery.js&&&/script&
&script&src=&path/to/bootstrap-4.0.0-beta.min.js&&&/script&
&script&src=&path/to/math.min.js&&&/script&
&script&src=&path/to/main.js&&&/script&&& &HTML结构该jquery计算器的HTML结构如下：&div&class=&container&&
&&&&&!--&Rounded&switch&--&
&&&&&label&class=&switch&&
&&&&&&&&&input&type=&checkbox&&
&&&&&&&&&span&class=&slider&&&/span&
&&&&&/label&
&&&&&form&
&&&&&&&&&input&readonly&id=&display1&&type=&text&&class=&form-control-lg&text-right&&
&&&&&&&&&input&readonly&id=&display2&&type=&text&&class=&form-control-lg&text-right&&
&&&&&/form&
&&&&&div&class=&d-flex&justify-content-between&button-row&&
&&&&&&&&&button&id=&left-parenthesis&&type=&button&&class=&operator-group&&(&/button&
&&&&&&&&&button&id=&right-parenthesis&&type=&button&&class=&operator-group&&)&/button&
&&&&&&&&&button&id=&square-root&&type=&button&&class=&operator-group&&√&/button&
&&&&&&&&&button&id=&square&&type=&button&&class=&operator-group&&x?&/button&
&&&&&/div&
&&&&&div&class=&d-flex&justify-content-between&button-row&&
&&&&&&&&&button&id=&clear&&type=&button&&C&/button&
&&&&&&&&&button&id=&backspace&&type=&button&&?&/button&
&&&&&&&&&button&id=&ans&&type=&button&&class=&operand-group&&Ans&/button&
&&&&&&&&&button&id=&divide&&type=&button&&class=&operator-group&&÷&/button&
&&&&&/div&
&&&&&div&class=&d-flex&justify-content-between&button-row&&
&&&&&&&&&button&id=&seven&&type=&button&&class=&operand-group&&7&/button&
&&&&&&&&&button&id=&eight&&type=&button&&class=&operand-group&&8&/button&
&&&&&&&&&button&id=&nine&&type=&button&&class=&operand-group&&9&/button&
&&&&&&&&&button&id=&multiply&&type=&button&&class=&operator-group&&×&/button&
&&&&&/div&
&&&&&div&class=&d-flex&justify-content-between&button-row&&
&&&&&&&&&button&id=&four&&type=&button&&class=&operand-group&&4&/button&
&&&&&&&&&button&id=&five&&type=&button&&class=&operand-group&&5&/button&
&&&&&&&&&button&id=&six&&type=&button&&class=&operand-group&&6&/button&
&&&&&&&&&button&id=&subtract&&type=&button&&class=&operator-group&&-&/button&
&&&&&/div&
&&&&&div&class=&d-flex&justify-content-between&button-row&&
&&&&&&&&&button&id=&one&&type=&button&&class=&operand-group&&1&/button&
&&&&&&&&&button&id=&two&&type=&button&&class=&operand-group&&2&/button&
&&&&&&&&&button&id=&three&&type=&button&&class=&operand-group&&3&/button&
&&&&&&&&&button&id=&add&&type=&button&&class=&operator-group&&+&/button&
&&&&&/div&
&&&&&div&class=&d-flex&justify-content-between&button-row&&
&&&&&&&&&button&id=&percentage&&type=&button&&class=&operand-group&&%&/button&
&&&&&&&&&button&id=&zero&&type=&button&&class=&operand-group&&0&/button&
&&&&&&&&&button&id=&decimal&&type=&button&&class=&operand-group&&.&/button&
&&&&&&&&&button&id=&equal&&type=&button&&=&/button&
&&&&&/div&
&/div&& &本文由职坐标整理发布，欢迎关注职坐标WEB前端jQuery频道，获取更多jQuery知识！
本文由 @沉沙 发布于职坐标。未经许可，禁止转载。
不喜欢&| 0
看完这篇文章有何感觉？已经有0人表态，0%的人喜欢
快给朋友分享吧~
后参与评论
加入IT交流圈
JAVA工程师交流群
大数据架构师交流群
人工智能Python交流群
WEB/H5前端交流群
WEB前端直通车
海同名师推荐
热门就业培训班
jQuery30天热搜词
免费获取海同IT培训资料
验证码手机号，获得海同独家IT培训资料
获取验证码纯HTML+CSS+JS编写的计算器应用
【技术沙龙】AI开发者实战营-7分钟打造1个定制技能。7月22号，我们等你一起！
一道笔试题
之前偶然看到一个公司的笔试题，题目如下：
用HTML5、CSS3、JavaScript，做一个网页，实现如下图形式计算器
具体要求：
有且只有一个文件：index.html。不允许再有其他文件，不允许再有单独的CSS、JS、PNG、JPG文件。
运行环境为 Google Chrome。
必须支持标准的四则运算。例如：1+2*3=7。
请在收到邮件的48小时内独立完成本测试，并回复本邮件。
一道笔试题引发的一个练手项目
花了一点时间写好的第一版，符合了笔试题的要求。后来左看右看觉得还可以改进做的更好，于是给它不断的改进，加新功能等，这样下来没完没了，利用业余时间一点一点的写，从刚开始的网页版，到后来做响应式的移动版，再到现在的移动App，短短续续大概写了3个月吧。
最终版的计算器，项目地址和预览图片在 GitHub：https://github.com/dunizb/sCalc。
最终版的功能如下：
界面布局采用CSS3 的 Flex box布局
内置两套主题可切换
计算历史记录显示
左滑右滑可以切换单手模式(App)
当输入手机号码后长按等于号可以拨打手机号码(App)
版本更新检查(App)
由于这个项目只是练手,所以采用了HTML5个CSS3技术，也不打算兼容IE等低版本浏览器，所以直接使用CSS3提供的Flexbox布局方式。并且使用rem单位来进行自动计算尺寸。
计算计算历史记录显示功能，使用HTML5提供的本地存储功能之Local Storage，为了方便使用Local
Storage，对它进行了简单的封装(见js/common.js文件)使之key值按一定规律生产，方便管理。
key由appName+id组成，id是自动增长不重复的，可以按id和appName删除一条记录，输入*则全部删除。
移动Web版计算器写完后，又想把他做成APP在手机上运行，由于本人没用过混合APP诸如ionic之类的框架，所以参考了一下，选择了Hbuild来进行开发和APP的打包，非常方便。(HBuild).
左滑右滑可以切换单手模式，这就需要移动端的touch事件了，使用如下代码判断是左滑还是右滑：
/**&单手模式&*/&&function&singleModel(){&&&&&&var&calc&=&document.getElementById(&calc&);&&&&&&var&startX&=&0,moveX&=&0,distanceX&=&0;&&&&&&var&distance&=&100;&&&&&&&&var&width&=&calc.offsetW&&&&&&//滑动事件&&&&&&calc.addEventListener(&touchstart&,function(e){&&&&&&&&&&startX&=&e.touches[0].clientX;&&&&&&});&&&&&&calc.addEventListener(&touchmove&,function(e){&&&&&&&&&&moveX&=&e.touches[0].clientX;&&&&&&&&&&distanceX&=&moveX&-&startX;&&&&&&&&&&isMove&=&&&&&&&});&&&&&&window.addEventListener(&touchend&,function(e){&&&&&&&&&&if(Math.abs(distanceX)&&&width/3&&&&isMove){&&&&&&&&&&&&&&if(&distanceX&&&0&){&&&&&&&&&&&&&&&&&&positionFun(&right&);&&&&&&&&//右滑&&&&&&&&&&&&&&}else{&&&&&&&&&&&&&&&&&&positionFun(&left&);&&&&&&&&&&//左滑&&&&&&&&&&&&&&}&&&&&&&&&&}&&&&&&&&&&startY&=&moveY&=&0;&&&&&&&&&&isMove&=&&&&&&&});&&&&}&&
如果是左滑，就position:left:0,bottom:0，再把最外层DIV缩小到80%，这样就实现了左滑计算器缩小移动到左下角。右滑道理一样。
电话拨打功能
当输入手机号码后长按等于号可以拨打手机号码。这个功能没什么神奇，在移动Web上会对那些看起来像是电话号码的数字处理为电话链接，比如：
7位数字，形如：1234567
带括号及加号的数字，形如：(+86)
双连接线的数字，形如：00-00-00111
11位数字，形如：
可能还有其他类型的数字也会被识别。我们可以通过如下的meta来开启电话号码的自动识别：
&meta&name=&format-detection&&content=&telephone=yes&&/&&
开启电话功能
&a&href=&tel:3456&/a&&
开启短信功能：
&a&href=&sms:3456&/a&&
但是，在Android系统上，只能调用系统的拨号界面，在iOS上则能调过这一步直接把电话拨打出去。
版本更新检查
在关于页面，有一个版本更新检查按钮，就能检查是否有新版本，这个功能的原理是发送一个JSOPN请求去检查服务器上的JSON文件，比对版本号，如果服务器上的版本比APP的版本高则会提示有新版本可以下载。
客户端JavaScript代码：
function&updateApp(){&&&&&&//检查新版本&&&&&&var&updateApp&=&document.getElementById(&updateApp&);&&&&&&updateApp.onclick&=&function(){&&&&&&&&&&var&_this&=&&&&&&&&&&&$.ajax({&&&&&&&&&&&&&&type:'get',&&&&&&&&&&&&&&url:'http://duni.sinaapp.com/demo/app.php?jsoncallback=?',&&&&&&&&&&&&&&dataType:'jsonp',&&&&&&&&&&&&&&beforeSend&:&function(){&&&&&&&&&&&&&&&&&&_this.innerHTML&=&;&&&&&&&&&&&&&&},&&&&&&&&&&&&&&success:function(data){&&&&&&&&&&&&&&&&&&var&newVer&=&data[0].&&&&&&&&&&&&&&&&&&if(newVer&&&appConfig.version){&&&&&&&&&&&&&&&&&&&&&&var&log&=&data[0].&&&&&&&&&&&&&&&&&&&&&&var&downloadUrl&=&data[0].downloadU&&&&&&&&&&&&&&&&&&&&&&if(confirm(&检查到新版本【&+newVer+&】，是否立即下载？
&更新日志：
&&&+&log)){&&&&&&&&&&&&&&&&&&&&&&&&&&var&a&=&document.getElementById(&telPhone&);&&&&&&&&&&&&&&&&&&&&&&&&&&a.href&=&downloadU&&&&&&&&&&&&&&&&&&&&&&&&&&a.target&=&&_blank&;&&&&&&&&&&&&&&&&&&&&&&&&&&a.click();&&&&&&&&&&&&&&&&&&&&&&}&&&&&&&&&&&&&&&&&&}else{&&&&&&&&&&&&&&&&&&&&&&alert(&你很潮哦，当前已经是最新版本！&);&&&&&&&&&&&&&&&&&&}&&&&&&&&&&&&&&&&&&_this.innerHTML&=&;&&&&&&&&&&&&&&},&&&&&&&&&&&&&&error:function(msg){&&&&&&&&&&&&&&&&&&_this.innerHTML&=&;&&&&&&&&&&&&&&&&&&alert(&检查失败：&+msg.message);&&&&&&&&&&&&&&}&&&&&&&&&&});&&&&&&}&&}&
服务端JSON：
[&&&&&&{&&&&&&&&&&&version&:&3.1.0&,&&&&&&&&&&&downloadUrl&:&http://dunizb.b0.upaiyun.com/demo/app/myCalc-3.1.0.apk&,&&&&&&&&&&&hashCode&:&16&,&&&&&&&&&&&log&:&1.新增切换主题功能&
&2.新增单手切换模式功能&
&3.调整UI&&&&&&&&}&&]&
下个版本计划
当前3.1.0版本还存在一些问题：
由于JS本身存在计算浮点数精度丢失问题，所以这个问题在项目中同意存在，需要自己去处理这个问题
由于使用了第三方的天气接口，用了jquery.Ajax方法，所以违背了使用纯原生写的初衷。
所以下个版本的开发计划为：
解决浮点数计算精度问题
把获取天气信息的jquery.Ajax方法替换为原生JavaScript代码，自己封装JSONP请求函数
使用面向对象方式重构APP&
官方微博/微信
每日头条、业界资讯、热点资讯、八卦爆料，全天跟踪微博播报。各种爆料、内幕、花边、资讯一网打尽。百万互联网粉丝互动参与，TechWeb官方微博期待您的关注。
↑扫描二维码
想在手机上看科技资讯和科技八卦吗？想第一时间看独家爆料和深度报道吗？请关注TechWeb官方微信公众帐号：1.用手机扫左侧二维码；2.在添加朋友里，搜索关注TechWeb。
Copyright (C)
All rights reserved. 京ICP证060517号/京ICP备号 京公网安备76号
TechWeb公众号
机情秀公众号用JS做一个简单的计算器【javascript吧】_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：163,743贴子：
用JS做一个简单的计算器收藏
JS代码怎么设置在按下=后显示计算结果并且下次按数字键清空原来的数字，显示当前的数字
//成员变量flag =//构造函数中flag =//&=&的响应函数中//数字响应函数中if(flag == false){
清空显示框...
flag =}else{
登录百度帐号这个是在闲暇之余，写出玩的一个小东西，没有复杂的算法，没有特别厉害的逻辑。只是方便有人需要的话直接用。也希望有大神可以帮我设计设计。下面是代码：
&!doctype html&&html&&head&&meta charset="utf-8"&&title&无标题文档&/title&&link rel="stylesheet" type="text/css" href="untitled.css"&&/head&&script type="text/javascript"&
var result="";
function jisuan(num){
if(num=="="){
document.form1.text.value=eval(result);
result=result+
document.form1.text.value=
}&/script&&body&&div class="box"&&form action="" class="form1" name="form1"&
&div class="header"&
&input type="text" id="text" name="text" class="text"/&
&div class="nav"&
&table class="table"&
&input id="1" style="height:55 width:55" type="button" value="1" onClick="jisuan(this.id)"/& &/td&
&input id="2" style="height:55 width:55" type="button" value="2" onClick="jisuan(this.id)"/& &/td&
&input id="3" style="height:55 width:55" type="button" value="3" onClick="jisuan(this.id)"/& &/td&
&input id="+" style="height:55 width:55" type="button" value="+" onClick="jisuan(this.id)"/& &/td&
&input id="4" style="height:55 width:55" type="button" value="4" onClick="jisuan(this.id)"/& &/td&
&input id="5" style="height:55 width:55" type="button" value="5" onClick="jisuan(this.id)"/& &/td&
&input id="6" style="height:55 width:55" type="button" value="6" onClick="jisuan(this.id)"/& &/td&
&input id="-" style="height:55 width:55" type="button" value="-" onClick="jisuan(this.id)"/& &/td&
&input id="7" style="height:55 width:55" type="button" value="7" onClick="jisuan(this.id)"/& &/td&
&input id="8" style="height:55 width:55" type="button" value="8" onClick="jisuan(this.id)"/& &/td&
&input id="9" style="height:55 width:55" type="button" value="9" onClick="jisuan(this.id)"/& &/td&
&input id="*" style="height:55 width:55" type="button" value="*" onClick="jisuan(this.id)"/& &/td&
&input id="/" style="height:55 width:55" type="button" value="/" onClick="jisuan(this.id)"/& &/td&
&input id="0" style="height:55 width:55" type="button" value="0" onClick="jisuan(this.id)"/& &/td&
&input id="." style="height:55 width:55" type="button" value="." onClick="jisuan(this.id)"/&&/td&
&input id="=" style="height:55 width:55" type="button" value="=" onClick="jisuan(this.id)"/& &/td&
&/form& &/div&&/body&&/html&
用js写一个计算器
&!DOCTYPE html&
&meta charset=&qu...
简单javascript计算器
预览地址:预览
Author:jom_ch
E-mail:phpoop#Gmail.com
blog:blogch.cn
功能有待完善,仅供参考
一节前端课：html+css+js做个计算器
QQ突然弹出来一个前端公开课的提示，由于一直想学前段的知识，点进去了，收获了一些东西，做个记录。题目：计算器的实现技术：html+css+js1 . body里放俩div，一个大的包一个小的，小的放键...
用HTML、CSS、JavaScript 实现一个简单的计算器
用HTML CSS
HTML实现的计算器WEB界面
包含&em&HTML&/em&、CSS、JS文件,实现基础的加减乘除功能的&em&计算器&/em&。... 包含&em&HTML&/em&、CSS、JS文件,实现基础的加减乘除功能的&em&计算器&/em&。综合评分:0 收藏评论举报 所需: 1积分/C币...
谷歌浏览器做了&em&html&/em&5页面做了兼容,ie9以上没问题但因为加了转换汇率的API跟书号isbn查询页面有点不好看,火狐呢,因为我调试浏览器就是火狐
网页版计算器的实现(js实现计算功能)
今天带大家做一个网页版的计算器,页面使用js完成计算,界面的效果如下:
HTML实现简单计算器
https://www.cnblogs.com/lifescolor/p/3874130.html
如何使用JS编写一个简单的计算器
使用js实现一个简单地计算器，解决js计算精度问题
没有更多推荐了，