基于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 相关文章推荐
jQuery 借助插件Lavalamp实现导航条动态美化效果
Sep 27 Javascript
文本域中换行符的替换示例
Mar 04 Javascript
浅谈javascript构造函数与实例化对象
Jun 22 Javascript
javascript实现根据iphone屏幕方向调用不同样式表的方法
Jul 13 Javascript
JQuery Mobile 弹出式登录框的实现方法
May 28 Javascript
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
Apr 18 Javascript
JavaScript判断浏览器和hack滚动条的写法
Jul 23 Javascript
JS抛物线动画实例制作
Feb 24 Javascript
微信小程序保存多张图片的实现方法
Mar 05 Javascript
vue2路由方式--嵌套路由实现方法分析
Mar 06 Javascript
js实现九宫格布局效果
May 28 Javascript
JavaScript实现简单图片切换
Apr 29 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
php在线生成ico文件的代码
2007/10/09 PHP
PHP写的资源下载防盗链类分享
2014/05/12 PHP
PHP实现清除MySQL死连接的方法
2016/07/23 PHP
php 微信公众平台开发模式实现多客服的实例代码
2016/11/07 PHP
js关闭子窗体刷新父窗体实现方法
2012/12/04 Javascript
两种方法实现文本框输入内容提示消失
2013/03/17 Javascript
JS 各种网页尺寸判断实例方法
2013/04/18 Javascript
使用javascript实现简单的选项卡切换
2015/01/09 Javascript
js分页工具实例
2015/01/28 Javascript
七夕情人节丘比特射箭小游戏
2015/08/20 Javascript
微信小程序开发之数据存储 参数传递 数据缓存
2017/04/13 Javascript
详解ES6之用let声明变量以及let loop机制
2017/07/15 Javascript
详解在express站点中使用ejs模板引擎
2017/09/21 Javascript
vue集成kindeditor富文本的实现示例代码
2019/06/07 Javascript
JavaScript的变量声明与声明提前用法实例分析
2019/11/26 Javascript
[50:29]2014 DOTA2华西杯精英邀请赛 5 24 DK VS iG
2014/05/26 DOTA
[04:54]DOTA2 2017国际邀请赛:上届冠军WINGS采访短片
2017/08/09 DOTA
python实现划词翻译
2020/04/23 Python
wxPython事件驱动实例详解
2014/09/28 Python
python+selenium+autoit实现文件上传功能
2017/08/23 Python
Python3实现的反转单链表算法示例
2019/03/08 Python
python面试题之列表声明实例分析
2019/07/08 Python
django多个APP的urls设置方法(views重复问题解决)
2019/07/19 Python
python实现屏保程序(适用于背单词)
2019/07/30 Python
python函数参数(必须参数、可变参数、关键字参数)
2019/08/16 Python
python实现静态web服务器
2019/09/03 Python
无需压缩软件,用python帮你操作压缩包
2020/08/17 Python
CSS3制作hover下划线动画
2017/03/27 HTML / CSS
可爱的童装和鞋子:Fabkids
2019/08/16 全球购物
网络维护中文求职信
2014/01/03 职场文书
代理商会议邀请函
2014/01/27 职场文书
服务标兵事迹材料
2014/05/04 职场文书
公务员培的训心得体会
2014/09/01 职场文书
2014年前台接待工作总结
2014/12/05 职场文书
小兵张嘎观后感
2015/06/03 职场文书
咖啡厅里的创业计划书
2019/08/21 职场文书