基于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验证(图片/文件的扩展名)
Apr 25 Javascript
JS函数this的用法实例分析
Feb 05 Javascript
JavaScript中的原型prototype属性使用详解
Jun 05 Javascript
前端面试题及答案整理(二)
Aug 26 Javascript
Bootstrap栅格系统学习笔记
Nov 25 Javascript
Angular中$state.go页面跳转并传递参数的方法
May 09 Javascript
深入理解Webpack 中路径的配置
Jun 17 Javascript
vue完成项目后,打包成静态文件的方法
Sep 03 Javascript
浅谈一种让小程序支持JSX语法的新思路
Jun 16 Javascript
微信小程序按顺序同步执行的两种方式
Dec 20 Javascript
小程序自定义弹框效果
Nov 16 Javascript
JS canvas实现画板和签字板功能
Feb 23 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
压力如何影响浓缩咖啡品质
2021/03/03 咖啡文化
php下的权限算法的实现
2007/04/28 PHP
Laravel框架表单验证详解
2014/09/04 PHP
WordPress的文章自动添加关键词及关键词的SEO优化
2016/03/01 PHP
ThinkPHP实现简单登陆功能
2017/04/28 PHP
一个高效的JavaScript压缩工具下载集合
2007/03/06 Javascript
JS按位非(~)运算符与~~运算符的理解分析
2011/07/31 Javascript
js简单实现根据身份证号码识别性别年龄生日
2013/11/29 Javascript
jQuery中复合属性选择器用法实例
2014/12/31 Javascript
javascript中$(function() {});写与不写有哪些区别
2015/08/10 Javascript
Nodejs实现图片上传、压缩预览、定时删除功能
2019/10/25 NodeJs
js+h5 canvas实现图片验证码
2020/10/11 Javascript
详解Typescript里的This的使用方法
2021/01/08 Javascript
Python连接DB2数据库
2016/08/27 Python
Python入门Anaconda和Pycharm的安装和配置详解
2019/07/16 Python
Python读取实时数据流示例
2019/12/02 Python
Python使用指定字符长度切分数据示例
2019/12/05 Python
python每5分钟从kafka中提取数据的例子
2019/12/23 Python
html5 input输入实时检测以及延时优化
2018/07/18 HTML / CSS
html5拖拽应用记录及注意点
2020/05/27 HTML / CSS
Artist Guitars新西兰:乐器在线商店
2017/09/17 全球购物
毕业生个人求职的自我评价
2013/10/28 职场文书
仓库理货员岗位职责
2013/12/18 职场文书
餐饮业的创业计划书范文
2013/12/26 职场文书
《难忘的泼水节》教学反思
2014/02/27 职场文书
中学生学雷锋演讲稿
2014/04/26 职场文书
大学生村官座谈会发言材料
2014/05/25 职场文书
公司合作意向书范文
2014/07/30 职场文书
机关作风建设自查报告
2014/10/22 职场文书
检讨书格式
2015/01/23 职场文书
幽灵公主观后感
2015/06/09 职场文书
2017年大学生寒假社会实践活动总结
2016/04/06 职场文书
2019年入党思想汇报
2019/03/25 职场文书
redis 查看所有的key方式
2021/05/07 Redis
MongoDB数据库的安装步骤
2021/06/18 MongoDB
Python基本的内置数据类型及使用方法
2022/04/13 Python