基于html+css+js实现简易计算器代码实例

2024-12-02 20:49:19

使用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);
};

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

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实现简单的计算器的具体代码,供大家参考,具体内容如下整个计算器实现由html文件.js文件和css样式表三部分组成整体效果:body里放俩div,一个大的包一个小的,小的放键盘,键盘div里放键盘. html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计算器<
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实现简易的计算器,供大家参考,具体内容如下 1.先构思整个计算器的模式以及想要实现的功能,按模块创建相应的div,在"head"中设置其样式和布局. 2.用"input"标签创建text类型,置为输出框:依次创建buttom类型,置为按钮,内容为1.2.3--:创建"=",并在input中对他进行点击事件"οnclick="result()"". 3.添加script,利用var定义
JavaScript实现简单计算器功能

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

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

制作能进行加减乘除的简易计算器,主要是练习动态注册事件.因以练习为主,所以包含了较多基础方法. 效果图代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>简易计算器</title> <script type="text/javascript"> window.onload = function(){ docu
基于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: <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写了个简易计算器(博主是搞后端的,不是前端>_<).其实,感觉搞前端的很幸福,自己弄出点东西很有成就感,话不多说,附上源码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>计算器</title> <style>
js制作简易计算器

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

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

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

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

基于html+css+js实现简易计算器代码实例

相关推荐

随机推荐