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 相关文章推荐
代码精简的可以实现元素圆角的js函数
Jul 21 Javascript
Jquery css函数用法(判断标签是否拥有某属性)
May 28 Javascript
js动态在form上插入enctype=multipart/form-data的问题
May 24 Javascript
兼容FF和IE的动态table示例自写
Oct 21 Javascript
使用js判断数组中是否包含某一元素(类似于php中的in_array())
Dec 12 Javascript
微信小程序教程系列之设置标题栏和导航栏(7)
Jun 29 Javascript
使用Vue组件实现一个简单弹窗效果
Apr 23 Javascript
基于vue框架手写一个notify插件实现通知功能的方法
Mar 31 Javascript
pm2启动ssr失败的解决方法
Jun 29 Javascript
原生JS 实现的input输入时表格过滤操作示例
Aug 03 Javascript
js中apply和call的理解与使用方法
Nov 27 Javascript
three.js显示中文字体与tween应用详析
Jan 04 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
php session 预定义数组
2009/03/16 PHP
Windows下XDebug 手工配置与使用说明
2010/07/11 PHP
PHP file_get_contents设置超时处理方法
2013/09/30 PHP
ThinkPHP V2.2说明文档没有说明的那些事实例小结
2015/07/01 PHP
ThinkPHP5.0多个文件上传后找不到临时文件的修改方法
2018/07/30 PHP
php对象工厂类完整示例
2018/08/09 PHP
lyhucSelect基于Jquery的Select数据联动插件
2011/03/29 Javascript
jQuery 快速结束当前正在执行的动画
2013/11/20 Javascript
JavaScript onkeypress事件入门实例(按下或按住一个键盘按键)
2014/10/17 Javascript
再分享70+免费的jquery 图片滑块效果插件和教程
2014/12/15 Javascript
编写高性能Javascript代码的N条建议
2015/10/12 Javascript
AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
2016/11/02 Javascript
基于Bootstrap仿淘宝分页控件实现代码
2016/11/07 Javascript
JavaScript中splice与slice的区别
2017/05/09 Javascript
详解axios 全攻略之基本介绍与使用(GET 与 POST)
2017/09/15 Javascript
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
2017/12/12 Javascript
解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题
2019/09/27 Javascript
vue swipeCell滑动单元格(仿微信)的实现示例
2020/09/14 Javascript
[42:20]2014 DOTA2华西杯精英邀请赛5 24 DK VS NewBee
2014/05/25 DOTA
[01:58]DOTA2上海特级锦标赛现场采访:RTZ这个ID到底好不好
2016/03/25 DOTA
python实现在字符串中查找子字符串的方法
2015/07/11 Python
Python中functools模块的常用函数解析
2016/06/30 Python
Python操作MongoDB数据库的方法示例
2018/01/04 Python
详解python如何在django中为用户模型添加自定义权限
2018/10/15 Python
django中使用Celery 布式任务队列过程详解
2019/07/29 Python
Python使用Slider组件实现调整曲线参数功能示例
2019/09/06 Python
python实现按关键字筛选日志文件
2019/12/24 Python
Python devel安装失败问题解决方案
2020/06/09 Python
Python3读取和写入excel表格数据的示例代码
2020/06/09 Python
Python使用struct处理二进制(pack和unpack用法)
2020/11/12 Python
可能这些是你想要的H5软键盘兼容方案(小结)
2019/04/23 HTML / CSS
意大利奢侈品网站:Italist
2016/08/23 全球购物
加拿大快时尚零售商:Ardene
2018/02/14 全球购物
开学第一周总结
2015/07/16 职场文书
法制教育主题班会
2015/08/13 职场文书
Elasticsearch 批量操作
2022/04/19 Python