基于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 相关文章推荐
Maps Javascript
Jan 22 Javascript
JQuery 遮罩层实现(mask)实现代码
Jan 09 Javascript
jquery中获得$.ajax()事件返回的值并添加事件的方法
Apr 15 Javascript
node.js入门教程迷你书、node.js入门web应用开发完全示例
Apr 06 Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
Mar 28 Javascript
JavaScript基础篇(3)之Object、Function等引用类型
Nov 30 Javascript
Jquery修改image的src属性,图片不加载问题的解决方法
May 17 Javascript
js实现倒计时关键代码
May 05 Javascript
基于Vue实现拖拽效果
Apr 27 Javascript
react native 原生模块桥接的简单说明小结
Feb 26 Javascript
在Vue 中实现循环渲染多个相同echarts图表
Jul 20 Javascript
vue配置多代理服务接口地址操作
Sep 08 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中取得image按钮传递的name值
2006/10/09 PHP
Win2003下APACHE+PHP5+MYSQL4+PHPMYADMIN 的简易安装配置
2006/11/18 PHP
PHP 错误之引号中使用变量
2009/05/04 PHP
php 更新数据库中断的解决方法
2009/06/05 PHP
PHP异步调用socket实现代码
2012/01/12 PHP
用php实现百度网盘图片直链的代码分享
2012/11/01 PHP
phpmyadmin配置文件现在需要绝密的短密码(blowfish_secret)的2种解决方法
2014/05/07 PHP
PHP中使用file_get_contents post数据代码例子
2015/02/13 PHP
PHP页面转UTF-8中文编码乱码的解决办法
2015/10/20 PHP
PHP Curl模拟登录微信公众平台、新浪微博实例代码
2016/01/28 PHP
使用正则去除php代码中的注释方法
2016/11/03 PHP
php简单检测404页面的方法示例
2019/08/23 PHP
Javascript面向对象设计一 工厂模式
2011/12/20 Javascript
jquery实现弹出层遮罩效果的简单实例
2014/03/03 Javascript
jQuery选择器源码解读(三):tokenize方法
2015/03/31 Javascript
JavaScript中Object值合并方法详解
2017/12/22 Javascript
jquery判断滚动条距离顶部的距离方法
2018/09/05 jQuery
node解析修改nginx配置文件操作实例分析
2019/11/06 Javascript
[04:51]TI10典藏宝瓶Ⅱ外观视频展示
2020/08/15 DOTA
Python使用win32com实现的模拟浏览器功能示例
2017/07/13 Python
Python之自动获取公网IP的实例讲解
2017/10/01 Python
python3 发送任意文件邮件的实例
2018/01/23 Python
Python列表删除元素del、pop()和remove()的区别小结
2019/09/11 Python
快速解决jupyter notebook启动需要密码的问题
2020/04/21 Python
Python实现列表索引批量删除的5种方法
2020/11/16 Python
详解tf.device()指定tensorflow运行的GPU或CPU设备实现
2021/02/20 Python
世界汽车零件:World Car Parts
2019/09/04 全球购物
中国一家综合的外贸B2C电子商务网站:DealeXtreme(DX)
2020/03/10 全球购物
数据库笔试题
2013/05/09 面试题
NET程序员上机面试题
2015/05/23 面试题
了解AppleShare protocol(AppleShare协议)吗
2015/08/28 面试题
接口可以包含哪些成员
2012/09/30 面试题
大学旷课检讨书
2014/01/28 职场文书
关爱留守儿童主题班会
2015/08/13 职场文书
2016幼儿园中班开学寄语
2015/12/03 职场文书
2016年习总书记讲话学习心得体会
2016/01/20 职场文书