js实现计算器功能


Posted in Javascript onAugust 10, 2020

本文实例为大家分享了js实现计算器功能的具体代码,供大家参考,具体内容如下

知识点

eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码。

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>js计算器</title>
 <link href="../css/计算器.css" rel="stylesheet">
</head>
<body>
<h1 class="h1">计算器</h1>
 <div class="box">
  <form name="calculator">
   <input type="button" id="clear" class="btn other" value="C">
   <input type="text" id="display">
   <br/>
   <input type="button" class="btn number" value="7" onclick="get(this.value);">
   <input type="button" class="btn number" value="8" onclick="get(this.value);">
   <input type="button" class="btn number" value="9" onclick="get(this.value);">
   <input type="button" class="btn operator" value="+" onclick="get(this.value);">
   <br/>
   <input type="button" class="btn number" value="4" onclick="get(this.value);">
   <input type="button" class="btn number" value="5" onclick="get(this.value);">
   <input type="button" class="btn number" value="6" onclick="get(this.value);">
   <input type="button" class="btn operator" value="*" onclick="get(this.value);">
   <br/>
   <input type="button" class="btn number" value="1" onclick="get(this.value);">
   <input type="button" class="btn number" value="2" onclick="get(this.value);">
   <input type="button" class="btn number" value="3" onclick="get(this.value);">
   <input type="button" class="btn operator" value="-" onclick="get(this.value);">
   <br/>
   <input type="button" class="btn number" value="0" onclick="get(this.value);">
   <input type="button" class="btn operator" value="." onclick="get(this.value);">
   <input type="button" class="btn operator" value="/" onclick="get(this.value);">
   <input type="button" class="btn other" value="=" onclick="calculates();">
  </form>
 <div>
<script src="../js/计算器.js">
</script>
</body>
</html>
.h1{
 position: relative;
 color:blueviolet;
 font-size:50px;
 text-align: center;
 top:50px;
}
.box{
 width:500px;
 position: relative;
 top: 100px;
 left:50%;
 margin-left: -250px;
 text-align: center;
 background: #495678;
 padding:80px 0;
 border-radius: 20px;
 box-shadow: 4px 4px #3d4a65;
}
.btn{
 background:rgba(255,192,203,0.8);
 border: 1px solid pink;
 cursor:pointer;
 outline:none;
 font-size:30px;
 margin:10px 15px;
 height: 70px;
 width: 70px;
 box-shadow: 0 5px #1a1313de;
}
.btn:active{
 transform: translateY(2px);
}
.btn:first-child{
 margin-left:-300px;
}
#display{
 overflow: hidden;
 box-sizing: border-box;
 padding-right:18px;
 text-align: right;
 outline: none;
 border:1px solid #4caf50;
 color:yellow;
 font-size: 30px;
 width:280px;
 position: absolute;
 height: 50px;
 top:95px;
 right:55px;
 background-color: #4caf50;
}
#display,.btn,.box{
 border-radius:35px;
}
.operator{
 background:orange;
}
.other{
 background:white;
}
//清空
  document.getElementById("clear").addEventListener("click",function(){
  document.getElementById("display").value="";
 });
//运算
 function get(value) {
  document.getElementById("display").value+=value;
 }
 //结果
 function calculates() {
  var result=0;
  result=document.getElementById("display").value;
  document.getElementById("display").value = eval(result);
 }

效果图

js实现计算器功能

js实现计算器功能

js实现计算器功能

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript页面添加到收藏夹的简单方法
Aug 07 Javascript
JQuery实现点击div以外的位置隐藏该div窗口
Sep 13 Javascript
jquery中checkbox使用方法简单实例演示
Nov 24 Javascript
5个最顶级jQuery图表类库插件【jquery插件库】
May 05 Javascript
JS实现table表格数据排序功能(可支持动态数据+分页效果)
May 26 Javascript
jQuery Mobile 触摸事件实例
Jun 04 Javascript
jQuery 插件封装的方法
Nov 16 Javascript
Bootstrap路径导航与分页学习使用
Feb 08 Javascript
bootstrap treeview 扩展addNode方法动态添加子节点的方法
Nov 21 Javascript
JS实现可针对算术表达式求值的计算器功能示例
Sep 04 Javascript
Vue 刷新当前路由的实现代码
Sep 26 Javascript
vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码
May 19 Javascript
js实现盒子拖拽动画效果
Aug 09 #Javascript
js实现盒子移动动画效果
Aug 09 #Javascript
js实现弹窗效果
Aug 09 #Javascript
js实现表格数据搜索
Aug 09 #Javascript
js实现微信聊天界面
Aug 09 #Javascript
js实现微信聊天效果
Aug 09 #Javascript
js实现盒子滚动动画效果
Aug 09 #Javascript
You might like
MySql 按时间段查询数据方法(实例说明)
2008/11/02 PHP
Ext.data.PagingMemoryProxy分页一次性读取数据的实现代码
2010/04/07 PHP
php设计模式 Observer(观察者模式)
2011/06/26 PHP
php中return的用法实例分析
2015/02/28 PHP
“不能执行已释放的Script代码”错误的原因及解决办法
2007/09/09 Javascript
HTML长文本截取含有HTML代码同样适用的两种方法
2013/07/31 Javascript
JS和jquery获取各种屏幕的宽度和高度的代码
2013/08/02 Javascript
js jquery获取当前元素的兄弟级 上一个 下一个元素
2015/09/01 Javascript
jQuery插件Validation快速完成表单验证的方式
2016/07/28 Javascript
D3.js实现直方图的方法详解
2016/09/25 Javascript
canvas实现手机端用来上传用户头像的代码
2016/10/20 Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
2017/08/14 jQuery
JS操作时间 - UNIX时间戳的简单介绍(必看篇)
2017/08/16 Javascript
d3绘制基本的柱形图的实现代码
2018/12/12 Javascript
微信小程序实现简易table表格
2020/06/19 Javascript
浅谈vue 锚点指令v-anchor的使用
2019/11/13 Javascript
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例
2019/11/19 Javascript
Python实现的中国剩余定理算法示例
2017/08/05 Python
Python中函数eval和ast.literal_eval的区别详解
2017/08/10 Python
python调用OpenCV实现人脸识别功能
2018/05/25 Python
python定时检测无响应进程并重启的实例代码
2019/04/22 Python
Python除法之传统除法、Floor除法及真除法实例详解
2019/05/23 Python
浅谈Python2之汉字编码为unicode的问题(即类似\xc3\xa4)
2019/08/12 Python
tensorflow 利用expand_dims和squeeze扩展和压缩tensor维度方式
2020/02/07 Python
python入门:argparse浅析 nargs='+'作用
2020/07/12 Python
Nike加拿大官网:Nike.com (CA)
2019/04/09 全球购物
英国时尚和家居用品零售商:Matalan
2021/02/28 全球购物
幼儿园教师奖惩制度
2014/02/01 职场文书
致共产党员倡议书
2014/04/16 职场文书
人大调研汇报材料
2014/08/14 职场文书
先进个人申报材料
2014/12/30 职场文书
财务人员个人工作总结
2015/02/27 职场文书
2015年学校安全工作总结
2015/04/22 职场文书
小学生反邪教心得体会
2016/01/15 职场文书
2019年图书室自查报告范本
2019/10/12 职场文书
python b站视频下载的五种版本
2021/05/27 Python