JavaScript实现简单的计算器


Posted in Javascript onJanuary 16, 2020

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

整个计算器实现由html文件、js文件和css样式表三部分组成
整体效果:body里放俩div,一个大的包一个小的,小的放键盘,键盘div里放键盘。

JavaScript实现简单的计算器

html:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>计算器</title>
 <link rel="stylesheet" href="css/jsq_css.css">
</head>
 
<body>
 <div class="bor">
 <input type="text" class="s_text" οnfοcus="this.blur();" value="0" id="result">
 <div class="main">
  <li οnclick="command(7);">7</li>
  <li οnclick="command(8);">8</li>
  <li οnclick="command(9);">9</li>
  <li id="j_div" οnclick="tools('/','g')">÷</li>
  <li οnclick="command(4);">4</li>
  <li οnclick="command(5);">5</li>
  <li οnclick="command(6);">6</li>
  <li id="j_mul" οnclick="tools('*','g')">×</li>
  <li οnclick="command(1);">1</li>
  <li οnclick="command(2);">2</li>
  <li οnclick="command(3);">3</li>
  <li id="j_sub" οnclick="tools('-','g');">-</li>
  <li οnclick="command(0)";>0</li>
  <li id="j_c"οnclick="clearzero('j')">c</li>
  <li id="j_dy"οnclick="equal('j');">=</li>
  <li id="j_add" οnclick="tools('+','g')";>+</li>
 
  </ul>
 </div>
 </div>
</body>
</html>

css:

*{margin: 0;padding: 0}
li{list-style: none}
 
.bor{margin: 0 auto;width: 400px;height: 520px;border: 2px solid #000;
margin-top: 50px;overflow: hidden;text-align: center;}
.s_text{margin: 0 auto;width: 330px;height: 80px;margin-top: 15px;
border: 2px solid #000000;font-size: 30px;padding-left: 20px;}
.main{margin: 0 auto;width: 350px;height: 400px;margin-top: 15px;}
.main ul{display: flex;height: 100%;justify-content: space-between;flex-wrap: wrap;}
.main ul li{width: 80px;height: 80px;border: 1px solid #000000;
text-align: center; line-height:80px;font-size: 36px;cursor: pointer ;}
.main ul li:hover{background: #eeeeee;}

js:(将这段代码写在body最下面) 

<script type="text/javascript">
 var resultDom = document.getElementById("result");
 var operate = true; //操作符加锁
 var afequ = true;
 //点击计算器执行函数(点数字的时候)
 function command(num){
  //点击等号之后要进行一次清空
  if(!afequ) {
  clearzero();
  }
  //获取输入框中value的值
  var str = resultDom.value;//在这里加一个判断, 如果第一位是0, 就用""填充
  str = (str == "0" ? "":str);//条件操作符 str在判断无输入或者0的时候 都算作是0
  str += num; //拼接数字, 然后赋值给文本框
  resultDom.value = str;//.value获取文本框中的值
  operate = true; //锁住操作符
 }
 //四则运算
 function tools(p,m){
  if(operate){
  var num = resultDom.value;
  num = (num == "0" ? "":num);
  resultDom.value = num + p;
  operate = false;
  }
 }
 //得出最后的结果
 function equal(m){
  var result = resultDom.value;
  var r = eval(result); //eval() 函数计算 JavaScript 字符串,并把它作为脚本代码来执行
  resultDom.value =r;
 }
 //c归零的
 function clearzero(){
  resultDom.value=0;
 }
 
</script>

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

Javascript 相关文章推荐
javascript的trim,ltrim,rtrim自定义函数
Sep 21 Javascript
自己动手制作jquery插件之自动添加删除行功能介绍
Oct 14 Javascript
jquery自定义滚动条插件示例分享
Feb 21 Javascript
JavaScript获取Url里的参数
Dec 18 Javascript
JavaScript中获取HTML元素值的三种方法
Jun 20 Javascript
angularJS Provider、factory、service详解及实例代码
Sep 21 Javascript
AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】
Jan 19 Javascript
12条写出高质量JS代码的方法
Jan 07 Javascript
微信小程序实现文字无限轮播效果
Dec 28 Javascript
微信小程序常用赋值方法小结
Apr 30 Javascript
Node.js系列之安装配置与基本使用(1)
Aug 30 Javascript
Vue实现跑马灯样式文字横向滚动
Nov 23 Vue.js
js面向对象之实现淘宝放大镜
Jan 15 #Javascript
js实现简单的打印表格
Jan 15 #Javascript
js实现图片实时时钟
Jan 15 #Javascript
js实现中文实时时钟
Jan 15 #Javascript
JS实现音量控制拖动
Jan 15 #Javascript
基于vue.js实现购物车
Jan 15 #Javascript
原生js+css调节音量滑块
Jan 15 #Javascript
You might like
php实现查看邮件是否已被阅读的方法
2013/12/03 PHP
smarty模板中使用get、post、request、cookies、session变量的方法
2014/04/24 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
php连接MSsql server的五种方法总结
2018/03/04 PHP
兼容FireFox 的 js 日历 支持时间的获取
2009/03/04 Javascript
select标记美化--JS式插件、后期加载
2013/04/01 Javascript
javascript动态添加样式(行内式/嵌入式/外链式等规则)
2013/06/24 Javascript
js控制input输入字符解析
2013/12/27 Javascript
Javascript控制div属性动态变化实例分析
2015/10/08 Javascript
javascript类型系统 Window对象学习笔记
2016/01/07 Javascript
实例讲解jquery中mouseleave和mouseout的区别
2016/02/17 Javascript
KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定
2016/10/11 Javascript
NodeJS和BootStrap分页效果的实现代码
2016/11/07 NodeJs
详解基于webpack和vue.js搭建开发环境
2017/04/05 Javascript
node.js 抓取代理ip实例代码
2017/04/30 Javascript
BootStrap TreeView使用实例详解
2017/11/01 Javascript
Bootstrap modal只加载一次数据的解决办法(推荐)
2017/11/24 Javascript
解决vue单页面修改样式无法覆盖问题
2019/08/05 Javascript
js模拟实现烟花特效
2020/03/10 Javascript
Python实现控制台输入密码的方法
2015/05/29 Python
Python向日志输出中添加上下文信息
2017/05/24 Python
windows下Virtualenvwrapper安装教程
2017/12/13 Python
Python中的TCP socket写法示例
2018/05/11 Python
Python合并多个Excel数据的方法
2018/07/16 Python
详解Python 函数如何重载?
2019/04/23 Python
Django接收自定义http header过程详解
2019/08/23 Python
python模块hashlib(加密服务)知识点讲解
2019/11/25 Python
浅谈pytorch torch.backends.cudnn设置作用
2020/02/20 Python
python用opencv 图像傅里叶变换
2021/01/04 Python
纪念一二九运动演讲稿
2014/09/16 职场文书
公司放假通知范文
2015/04/14 职场文书
政府会议通知范文
2015/04/15 职场文书
合同范本之电脑出租
2019/08/13 职场文书
导游词范文之颐和园/重庆/云台山
2019/09/10 职场文书
nginx配置限速限流基于内置模块
2022/05/02 Servers
CSS 左边固定宽右边自适应的6种方法
2022/05/15 HTML / CSS