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 相关文章推荐
ExtJs 3.1 XmlTreeLoader Example Error
Feb 09 Javascript
jQuery的实现原理的模拟代码 -1 核心部分
Aug 01 Javascript
jquery随机展示头像代码
Dec 21 Javascript
标题过长使用javascript按字节截取字符串
Apr 24 Javascript
ECMAScript 6即将带给我们新的数组操作方法前瞻
Jan 06 Javascript
JS实现仿QQ面板的手风琴效果折叠菜单代码
Sep 11 Javascript
JavaScript基础语法之js表达式
Jun 07 Javascript
从零学习node.js之简易的网络爬虫(四)
Feb 22 Javascript
vue系列之动态路由详解【原创】
Sep 10 Javascript
Vue filter介绍及详细使用
Apr 04 Javascript
基于vue v-for 多层循环嵌套获取行数的方法
Sep 26 Javascript
从0到1搭建Element的后台框架的方法步骤
Apr 10 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
Ajax+PHP 边学边练 之二 实例
2009/11/24 PHP
第4章 数据处理-php字符串的处理-郑阿奇(续)
2011/07/04 PHP
PHP使用Nginx实现反向代理
2017/09/20 PHP
网上应用的一个不错common.js脚本
2007/08/08 Javascript
求数组最大最小值方法适用于任何数组
2013/08/16 Javascript
js 对小数加法精度处理示例说明
2013/12/27 Javascript
JavaScript中的数学运算介绍
2014/12/29 Javascript
jQuery使用toggleClass方法动态添加删除Class样式的方法
2015/03/26 Javascript
js实现带缓冲效果的仿QQ面板折叠菜单代码
2015/09/06 Javascript
jquery实现界面无刷新加载登陆注册
2016/07/30 Javascript
JavaScript的new date等日期函数在safari中遇到的坑
2016/10/24 Javascript
JS正则匹配中文的方法示例
2017/01/06 Javascript
Vue实现点击后文字变色切换方法
2018/02/11 Javascript
vue.js前后端数据交互之提交数据操作详解
2018/04/24 Javascript
详解如何使用webpack打包JS
2018/06/21 Javascript
vue+express 构建后台管理系统的示例代码
2018/07/19 Javascript
JavaScript 中 JSON.parse 函数 和 JSON.stringify 函数
2018/12/05 Javascript
vue-router beforeEach跳转路由验证用户登录状态
2018/12/26 Javascript
javascript验证form表单数据的案例详解
2019/03/25 Javascript
JQuery绑定事件四种实现方法解析
2020/12/02 jQuery
利用JavaScript为句子加标题的3种方法示例
2021/01/05 Javascript
详细讲解Python中的文件I/O操作
2015/05/24 Python
浅析python中SQLAlchemy排序的一个坑
2017/02/24 Python
Python实现的手机号归属地相关信息查询功能示例
2017/06/08 Python
python+selenium+autoit实现文件上传功能
2017/08/23 Python
对python 通过ssh访问数据库的实例详解
2019/02/19 Python
解决Python找不到ssl模块问题 No module named _ssl的方法
2019/04/29 Python
详解Python list和numpy array的存储和读取方法
2019/11/06 Python
django前端页面下拉选择框默认值设置方式
2020/08/09 Python
纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式)
2015/04/24 HTML / CSS
周生生珠宝香港官网:Chow Sang Sang(香港及海外配送)
2019/09/05 全球购物
毕业生求职简历的自我评价
2013/10/07 职场文书
英文版餐饮业求职信
2013/10/18 职场文书
论文答谢词
2015/01/20 职场文书
大学生受助感言
2015/08/01 职场文书
MySQL into_Mysql中replace与replace into用法案例详解
2021/09/14 MySQL