基于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 相关文章推荐
dojo 之基础篇(二)之从服务器读取数据
Mar 24 Javascript
jquery ui dialog ie8出现滚动条的解决方法
Dec 06 Javascript
javascript之典型高阶函数应用介绍
Jan 10 Javascript
javascript实现checkBox的全选,反选与赋值
Mar 12 Javascript
pace.js页面加载进度条插件
Sep 29 Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
Feb 13 Javascript
Bootstrap表单使用方法详解
Feb 17 Javascript
react router 4.0以上的路由应用详解
Sep 21 Javascript
Dropify.js图片宽高自适应的方法
Nov 27 Javascript
Node.js 实现简单的无侵入式缓存框架的方法
Jul 21 Javascript
VUE.CLI4.0配置多页面入口的实现
Nov 25 Javascript
vue props 单项数据流实例分享
Feb 16 Javascript
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
支持oicq头像的留言簿(一)
2006/10/09 PHP
php flv视频时间获取函数
2010/06/29 PHP
浅析PHP安装扩展mcrypt以及相关依赖项(PHP安装PECL扩展的方法)
2013/07/05 PHP
js判断上传文件类型判断FileUpload文件类型代码
2014/05/20 Javascript
Nodejs学习笔记之测试驱动
2015/04/16 NodeJs
跟我学习javascript的call(),apply(),bind()与回调
2015/11/16 Javascript
javascript实现一个简单的弹出窗
2016/02/22 Javascript
BootStrap框架中的data-[ ]自定义属性理解(推荐)
2017/02/14 Javascript
js实现多行文本框统计剩余字数功能
2017/03/28 Javascript
Angular2关于@angular/cli默认端口号配置的问题
2017/07/15 Javascript
通过命令行创建vue项目的方法
2017/07/20 Javascript
Express使用html模板的详细代码
2017/09/18 Javascript
jQuery使用bind函数实现绑定多个事件的方法
2017/10/11 jQuery
Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
2018/03/27 Javascript
详解react-refetch的使用小例子
2019/02/15 Javascript
微信小程序new Date()方法失效问题解决方法
2019/07/29 Javascript
vue实例的选项总结
2020/06/09 Javascript
Python(Tornado)模拟登录小米抢手机
2013/11/12 Python
Python中实现远程调用(RPC、RMI)简单例子
2014/04/28 Python
零基础学Python(一)Python环境安装
2014/08/20 Python
python list元素为tuple时的排序方法
2018/04/18 Python
Python面向对象类继承和组合实例分析
2018/05/28 Python
python3.7 sys模块的具体使用
2019/07/22 Python
Python+Pyqt实现简单GUI电子时钟
2021/02/22 Python
python创建与遍历List二维列表的方法
2019/08/16 Python
python 使用paramiko模块进行封装,远程操作linux主机的示例代码
2020/12/03 Python
详解Java中一维、二维数组在内存中的结构
2021/02/11 Python
发现两个有趣的CSS3动画效果
2013/08/14 HTML / CSS
HTML5教程之html 5 本地数据库(Web Sql Database)
2014/04/03 HTML / CSS
运动鞋中的劳斯莱斯:索康尼(SAUCONY)
2017/08/09 全球购物
单位实习证明怎么写
2014/01/17 职场文书
楼面经理岗位职责范本
2014/02/18 职场文书
《悯农》教学反思
2014/04/28 职场文书
2016年度继续教育学习心得体会
2016/01/19 职场文书
python人工智能human learn绘图可创建机器学习模型
2021/11/23 Python
JS高级程序设计之class继承重点详解
2022/07/07 Javascript