基于html+css+js实现简易计算器代码实例


Posted in Javascript onFebruary 28, 2020

使用html+css+js实现简易计算器,

效果图如下:

基于html+css+js实现简易计算器代码实例

html代码如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>calculator</title>
  <link rel="stylesheet" type="text/css" href="style.css" rel="external nofollow" >
  <script type="text/javascript" src="contain.js"></script>
  <title>Document</title>
</head>
<body>
  <div class="calculator">
  <form name="calculator">
    <input type="text" id="display" value="">
      <br>
    <input type="button" class="btn number txt" value="TYNAM">
    <input type="button" id="clear" class="btn number" value="AC" onclick="cleardisplay();">
    <input type="button" class="btn number" value="<-" onclick="del();">
    <input type="button" class="btn operator" value="/" onclick="get(this.value);">
      <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 number" value="." onclick="get(this.value);">
    <input type="button" class="btn operator equal" value="=" onclick="calculates();">
  </form>
  </div> 
</body>
</html>

CSS代码如下:

* {
  border: none;
  font-family: 'Open Sans', sans-serif;
  margin: 0;
  padding: 0;
}

.calculator {
  background-color: #fff;
  height: 600px;
  margin: 50px auto;
  width: 600px;
}

form {
  background-color: rgb(75, 70, 71);
  padding: 5px 1px auto;  
  width: 245px;
}
.btn {
  outline: none;
  cursor: pointer;
  font-size: 20px;
  height: 45px;
  margin: 5px 0 5px 10px;
  width: 45px;
  
}
.btn:first-child {
  margin: 5px 0 5px 10px;
}

#display {
  outline: none;
  background-color: #dededc;
  color: rgb(75, 70, 71);
  font-size: 40px;
  height: 47px;
  text-align: right;
  width: 224px;
  margin: 10px 10px auto;
}
.number {
  background-color: rgb(143, 140, 140);
  color: #dededc;
}

.operator {
  background-color: rgb(239, 141, 49);
  color: #ffffff;
}

.equal{
  width: 105px;
}

.txt{
  font-size:12px;
  background: none;
}

JS代码如下:

/* display clear */ 
function cleardisplay() {
  document.getElementById("display").value = "";
}

/* del */
function del() {
  var numb = "";
  numb = document.getElementById("display").value;
  for(i=0;i<numb.length;i++)
  {
    document.getElementById("display").value = numb.substring(0,numb.length-1);
    if(numb == '')
    {
      document.getElementById("display").value = '';
    }
  }
} 

/* recebe os valores */
function get(value) {
  document.getElementById("display").value += value; 
} 

/* calcula */
function calculates() {
  var result = 0;
  result = document.getElementById("display").value;
  document.getElementById("display").value = "";
  document.getElementById("display").value = eval(result);
};

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

Javascript 相关文章推荐
js chrome浏览器判断代码
Mar 28 Javascript
23个Javascript弹出窗口特效整理
Feb 25 Javascript
如何确保JavaScript的执行顺序 之jQuery.html并非万能钥匙
Mar 03 Javascript
js日期时间补零的小例子
Mar 05 Javascript
利用原生JavaScript获取元素样式只是获取而已
Oct 08 Javascript
javascript格式化日期时间方法汇总
Jun 19 Javascript
简单实现异步编程promise模式
Jul 31 Javascript
Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3)
Aug 15 Javascript
javascript实现仿百度图片的瀑布流加载效果
Apr 20 Javascript
jQuery实现的点击标题文字切换字体效果示例【测试可用】
Apr 26 jQuery
微信小程序实现时间戳格式转换
Jul 20 Javascript
vue 数据操作相关总结
Dec 17 Vue.js
JsonServer安装及启动过程图解
Feb 28 #Javascript
Vue自定义组件的四种方式示例详解
Feb 28 #Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
Feb 28 #Javascript
使用vue-cli3+typescript的项目模板创建工程的教程
Feb 28 #Javascript
基于vue-cli3+typescript的tsx开发模板搭建过程分享
Feb 28 #Javascript
vue 中的 render 函数作用详解
Feb 28 #Javascript
微信小程序动态添加和删除组件的现实
Feb 28 #Javascript
You might like
Zend Guard使用指南及问题处理
2015/01/07 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
javascript实现动态增加删除表格行(兼容IE/FF)
2007/04/02 Javascript
js整数字符串转换为金额类型数据(示例代码)
2013/12/26 Javascript
教你用jquery实现iframe自适应高度
2014/06/11 Javascript
JavaScript使用replace函数替换字符串的方法
2015/04/06 Javascript
AngularJS实现ajax请求的方法
2016/11/22 Javascript
JavaScript运动框架 解决速度正负取整问题(一)
2017/05/17 Javascript
vue 粒子特效的示例代码
2017/09/19 Javascript
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
2019/10/11 Javascript
解决Nuxt使用axios跨域问题
2020/07/06 Javascript
vue-cli3配置favicon.ico和title的流程
2020/10/27 Javascript
vant picker+popup 自定义三级联动案例
2020/11/04 Javascript
python self,cls,decorator的理解
2009/07/13 Python
在Python中操作时间之tzset()方法的使用教程
2015/05/22 Python
Python编程中用close()方法关闭文件的教程
2015/05/24 Python
Python的包管理器pip更换软件源的方法详解
2016/06/20 Python
总结用Pdb库调试Python的方式及常用的命令
2016/08/18 Python
Python中max函数用于二维列表的实例
2018/04/03 Python
pycharm编写spark程序,导入pyspark包的3中实现方法
2019/08/02 Python
Python之——生成动态路由轨迹图的实例
2019/11/22 Python
python golang中grpc 使用示例代码详解
2020/06/03 Python
Python读写锁实现实现代码解析
2020/11/28 Python
想学画画?python满足你!
2020/12/24 Python
5个HTML5的常用本地存储方式详解与介绍
2021/03/27 HTML / CSS
高一军训的心得体会
2014/09/01 职场文书
党员学习中共十八大报告思想汇报
2014/09/15 职场文书
区长工作作风个人整改措施
2014/10/01 职场文书
2014年组织部工作总结
2014/11/14 职场文书
十七岁的单车观后感
2015/06/12 职场文书
教师工作证明范本
2015/06/12 职场文书
2016年学校“3.12”植树节活动总结
2016/03/16 职场文书
导游词之千岛湖
2019/09/23 职场文书
MySQL如何使用使用Xtrabackup进行备份和恢复
2021/06/21 MySQL
MySQL学习之基础操作总结
2022/03/19 MySQL
MongoDB支持的索引类型
2022/04/11 MongoDB