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 miscellanea -display data real time, using window.status
Jan 09 Javascript
javascript获取form里的表单元素的示例代码
Feb 14 Javascript
简单对比分析JavaScript中的apply,call与this的使用
Dec 04 Javascript
基于JavaScript实现移除(删除)数组中指定元素
Jan 04 Javascript
JavaScript类型检测之typeof 和 instanceof 的缺陷与优化
Jan 13 Javascript
js仿小米官网图片轮播特效
Sep 29 Javascript
Bootstrap字体图标无法正常显示的解决方法
Oct 08 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)
Dec 02 Javascript
Node.js如何实现注册邮箱激活功能 (常见)
Jul 23 Javascript
js实现点赞效果
Mar 16 Javascript
Express 配置HTML页面访问的实现
Nov 01 Javascript
js 实现Material UI点击涟漪效果示例
Sep 23 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 ob_flush,flush在ie中缓冲无效的解决方法
2010/05/09 PHP
ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法
2014/10/29 PHP
php实现CSV文件导入和导出
2015/10/24 PHP
CI框架数据库查询之join用法分析
2016/05/18 PHP
PHP页面跳转实现延时跳转的方法
2016/12/10 PHP
PHP new static 和 new self详解
2017/02/19 PHP
关于ThinkPhp 框架表单验证及ajax验证问题
2017/07/19 PHP
通过PHP实现获取访问用户IP
2020/05/09 PHP
获得所有表单值的JQuery实现代码[IE暂不支持]
2012/05/24 Javascript
让新消息在网页标题闪烁提示的jQuery代码
2013/11/04 Javascript
jquery.form.js用法之清空form的方法
2014/03/07 Javascript
jquery实现倒计时代码分享
2014/06/13 Javascript
jQuery获得指定元素坐标的方法
2015/04/14 Javascript
js实现类bootstrap模态框动画
2017/02/07 Javascript
ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!
2017/03/14 Javascript
jQuery remove()过滤被删除的元素(推荐)
2017/07/18 jQuery
JS组件系列之Gojs组件 前端图形化插件之利器
2017/11/29 Javascript
vue addRoutes实现动态权限路由菜单的示例
2018/05/15 Javascript
NodeJS搭建HTTP服务器的实现步骤
2018/10/12 NodeJs
JS前端基于canvas给图片添加水印
2020/11/11 Javascript
原生js实现放大镜组件
2021/01/22 Javascript
Vue SPA 首屏优化方案
2021/02/26 Vue.js
Python中比较特别的除法运算和幂运算介绍
2015/04/05 Python
python结合opencv实现人脸检测与跟踪
2015/06/08 Python
python实现文件路径和url相互转换的方法
2015/07/06 Python
将Django框架和遗留的Web应用集成的方法
2015/07/24 Python
OpenCV+Python--RGB转HSI的实现
2019/11/27 Python
Python如何用filter函数筛选数据
2020/03/05 Python
关于jupyter打开之后不能直接跳转到浏览器的解决方式
2020/04/13 Python
浅谈Python中threading join和setDaemon用法及区别说明
2020/05/02 Python
世界上最好的儿童品牌:AlexandAlexa
2018/01/27 全球购物
领先的英国注册在线药房 :Simply Meds Online
2019/03/28 全球购物
新东方旗下远程教育网站:新东方在线
2020/03/19 全球购物
医生自荐信
2013/10/11 职场文书
师德师风整改措施
2014/10/24 职场文书
先进个人事迹材料(2016推荐版)
2016/03/01 职场文书