基于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);
};

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue.js实现立体计算器

    Vue.js实现立体计算器

    本文实例为大家分享了Vue.js 制作立体计算器的具体方法,供大家参考,具体内容如下 项目效果图 这是一个简单的项目实现加减乘除运算 项目结构 代码展示 计算器1.0.html <!DOCTYPE html> <html> <head> <title>计算器</title> <link rel="stylesheet" type="text/css" href="css/style.css&

  • JavaScript实现简单的计算器

    JavaScript实现简单的计算器

    本文实例为大家分享了JavaScript实现简单的计算器的具体代码,供大家参考,具体内容如下 整个计算器实现由html文件.js文件和css样式表三部分组成 整体效果:body里放俩div,一个大的包一个小的,小的放键盘,键盘div里放键盘. html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计算器<

  • js实现一个简易计算器

    js实现一个简易计算器

    本文实例为大家分享了JS实现简易计算器的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <title>14th_test</title> <meta charset="gb2312"> </head> <body> <h1>这是一个标题</h1> <p>以下是一个简易计算器</p> <tab

  • JS实现简易计算器

    用JS实现简易计算器,供大家参考,具体内容如下 首先创建结构和样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docu

  • JavaScript实现简单计算器功能

    JavaScript实现简单计算器功能

    本文实例为大家分享了JavaScript实现简单计算器的具体代码,供大家参考,具体内容如下 1.实现基本计算器功能,如图 2.逻辑代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>计算器</title> <!--设置样式--> <style> .showdiv{ text-align: center; margin:

  • js实现简易计算器功能

    js实现简易计算器功能

    制作能进行加减乘除的简易计算器,主要是练习动态注册事件.因以练习为主,所以包含了较多基础方法. 效果图 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>简易计算器</title> <script type="text/javascript"> window.onload = function(){ docu

  • JavaScript简易计算器制作

    JavaScript简易计算器制作

    本文实例为大家分享了JavaScript实现简易计算器的具体代码,供大家参考,具体内容如下 成品图 这个简易的计算器只能实现 + - * /的运算 在动手之前,我们要先理清思路,看图,若想实现这样一个简易的计算器,我们需要两个输入框用来存放我们需要进行运算的两个值,一个下拉框来选择要进行什么运算,一个按钮来实现开始运算,一个输入框来保存我们计算后的值! 首先,我们在body中制作页面需要的这些元素 <body> <input type="text" id="

  • javascript实现简易的计算器

    利用javascript实现简易的计算器,供大家参考,具体内容如下 1.先构思整个计算器的模式以及想要实现的功能,按模块创建相应的div,在"head"中设置其样式和布局. 2.用"input"标签创建text类型,置为输出框:依次创建buttom类型,置为按钮,内容为1.2.3--:创建"=",并在input中对他进行点击事件"οnclick="result()"". 3.添加script,利用var定义

  • 基于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

  • JS制作简易计算器的实例代码

    做一个简易计算器,效果图片 c表示清空,为一个空字符串 +/-表示该值为正还是负 %表示当前值/100 ←表示退格,往前删除一个值 eval 函数是能够计算出字符串表达式或者语句的结果,把结果求出来. 代码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"

  • 基于HTML+CSS+JS实现增加删除修改tab导航特效代码

    基于HTML+CSS+JS实现增加删除修改tab导航特效代码

    先给大家展示下效果图,如果大家感觉还不错,请参考实现代码哦! HTML: <div class="container iden_top"> <ul> <li> <p class='iden_add_name'>应用标识1</p> <span class="iden_top_button"></span> <div class="iden_top_dete"&

  • js实现简易计算器小功能

    本文实例为大家分享了js实现简易计算器的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>

  • 原生js实现简易计算器

    原生js实现简易计算器

    本文实例为大家分享了js实现简易计算器的具体代码,供大家参考,具体内容如下 最近,博主闲来无聊,就没事用js写了个简易计算器(博主是搞后端的,不是前端>_<).其实,感觉搞前端的很幸福,自己弄出点东西很有成就感,话不多说,附上源码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>计算器</title> <style>

  • js制作简易计算器

    js制作简易计算器

    本文实例为大家分享了js制作简易计算器的具体代码,供大家参考,具体内容如下 要制作一个如图所示的简易计算器,首先要建立一个表单,制作出如图所示的样子. <table border="1" cellspacing="0" > <tr><th colspan="2">购物简易计算器</th></tr> <tr> <td>第一个数</td> <td&g

  • 基于Python+Tkinter实现一个简易计算器

    基于Python+Tkinter实现一个简易计算器

    目录 设计原理 示例效果 主要代码 设计原理 从结构上来说,一个简单的图形界面,需要由界面组件.组件的事件监听器(响应各类事件的逻辑)和具体的事件处理逻辑组成.界面实现的主要工作是创建各个界面组件对象,对其进行初始化,以及控制各组件之间的层次关系和布局 示例效果 主要代码 import tkinter import math import tkinter.messagebox class Calculator(object): # 界面布局方法 def __init__(self): # 创建主

  • 基于Html+CSS+JS实现手动放烟花效果

    基于Html+CSS+JS实现手动放烟花效果

    目录 效果展示 实现代码 Html Css JavaScript 雷迪森安的乡亲们,欢迎来到老实人的前端课堂,上次写了一个新春小盲盒,这大过年的,我把烟花都给你们准备好了,今天我们来写个小烟花吧. 效果展示 注意看有两种模式哦,可以自由切换,鼠标点哪里哪里有烟花,还可以自动放烟花 视频演示:html+css写一个烟花,源码请你直接拿走! 实现代码 Html <div id="tips"> <a id="manual" href="java

  • 基于HTML+CSS+JS实现纸牌记忆游戏

    基于HTML+CSS+JS实现纸牌记忆游戏

    目录 知识点 HTML 用户界面 CSS 部分 一些基本样式 纸牌的样式 分数面板的样式 祝贺面板的样式 动画 媒体查询 JavaScript 部分 洗牌功能 开始新游戏的功能 显示卡片的功能 当卡片匹配时的功能 当卡片不匹配时的功能 暂时禁用卡片的功能 启用卡片并禁用匹配的卡片的功能 计算玩家的动作的功能 显示游戏的时间 再次游戏功能 总结 这节实验我们将使用 HTML.CSS 和 JavaScript 制作纸牌记忆游戏. 让我们开始吧! 在线演示戳这里 知识点 animation-durat

随机推荐