使用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">

     <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:;

     padding:;

 }

 .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);

};

使用html+css+js实现简易计算器的更多相关文章

  1. html+css+js实现科学计算器

    代码地址如下:http://www.demodashi.com/demo/13751.html 项目描述 纯html+css+js实现一个科学计算器,支持平方开方指数对数等基本函数,支持键盘输入,有简 ...

  2. 项目：JS实现简易计算器案例

    组件化网页开发下的: 步骤一:让页面动起来的JavaScript深入讲解  的 项目:JS实现简易计算器案例

  3. 用js制作简易计算器及猜随机数字游戏

    <!doctype html><html><head> <meta charset="utf-8"> <title>JS ...

  4. js之简易计算器

    <!DOCTYPE html PUBLIC "-//W3C//Dli XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 原生JS实现简易计算器

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  6. JS编写简易计算器

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/html"> <head lang=" ...

  7. JS实现简易计算器的7种方法

    先放图(好吧比较挫) 方法一:最容易版 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta ...

  8. html、css、js实现简易计算器

    学习HTML,CSS,JS一个月后,想着能自己是否能写出一个简单的东西,故编写了简易的计算器,之前也写过一个坦克大战,坦克大战的有些基本功能没有实现, 故也没有记录下来,想来,对这行初来咋到的,还是需 ...

  9. JS简易计算器的实现，以及代码的优化

    用JS实现简易计算器 首先创建结构和样式 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

随机推荐

  1. ArcMap中属性字段计算器（Field Calculator）的使用技巧

           很多时候,我们在使用ArcGIS进行属性数据编辑时,需要批量修改某些字段值,这时候ArcGIS提供的属性字段计算器(Field Calculator)就是一把利器.下面我就Field C ...

  2. async/await异步处理demo

    async/await异步处理demo 下载地址: async/await异步处理demo

  3. 基于openssl搭建https服务器

    1. 搭建web环境 我这里使用源码编译安装方式安装httpd.详情可以参加我的一篇博客http://www.cnblogs.com/zhaojiedi1992/p/zhaojiedi_linux_1 ...

  4. 【杂谈】没有公网IP的电脑如何与外部通信

    前言 前几天突然想到的问题,自己先猜测推理了一番,最后在谢希仁版<计算机网络>找到了权威的解答.这里记录一下自己的思考过程. 网站是如何找到我们的? 我们知道,互联网中的两台电脑要进行通信 ...

  5. 【Go】优雅的读取http请求或响应的数据-续

    原文链接:https://blog.thinkeridea.com/201902/go/you_ya_de_du_qu_http_qing_qiu_huo_xiang_ying_de_shu_ju_2 ...

  6. Perl数据序列化和持久化(入门)：Storable模块

    Perl提供了一个Storable模块,用来对数据结构进行序列化(serialization,Perl中称为冻结),也就是将数据结构保存为二进制数据. 序列化后的数据可以写入文件实现持久化,可以将持久 ...

  7. javascript小实例，编写一个方法，实现从n-m个数中随机选出一个整数

    别怪我是一个闷葫芦,没那么多花哨的语言,废话不多说,先说说小实例的要求: 编写一个方法,实现从n-m个数中随机选出一个整数,要求:传递的参数不足两个或者不是有效数字,返回[0-1]之间的随机数,需要解 ...

  8. IDEA更换主题

    更换IDEA主题只需要3步 1. 下载主题 在主题网站上IDEA Color Themes 上浏览喜欢的主题并下载该主题.(如果网址有变更,google IDEA themes即可.)  2. 导入主 ...

  9. 关于Maven项目build时出现No compiler is provided in this environment的处理

    版权声明:本文为博主原创文章,未经博主允许不得转载. http://blog.csdn.net/lslk9898/article/details/73836745 近日有同事遇到在编译Maven项目时 ...

  10. 28.QT-QPainter介绍

    介绍 可以在QPaintDevice类上绘制各种图形 QPaintDevice类表示QPainter的绘图设备(画布) QpaintDevice子类有QImage.QOpenGLPaintDevice ...