使用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. input的三个属性autocomplete、autocapitalize和autocorrect

    下面的input的三个属性是H5新增的属性 <input type="text" class="input-search" placeholder=&qu ...

  2. 十分钟了解ZAB（Zookeeper Atomic Broadcast）协议

    Zookeeper基于ZAB(Zookeeper Atomic Broadcast),实现了主备模式下的系统架构,保持集群中各个副本之间的数据一致性. ZAB协议定义了选举(election).发现( ...

  3. zabbix分布式监控部署--技术流ken

    前言 zabbix proxy可以代替zabbix server检索客户端的数据,然后把数据汇报给zabbix server,并且在一定程度上分担了zabbix server的压力.zabbix pr ...

  4. python模块之sys与os

    python常用模块系列(二):sys模块与os模块 sys模块是python解释器和环境有关的一个模块: os是python用来和操作系统进行交互的一个模块. 一 sys 查看当前环境变量 查看已经 ...

  5. Map相关知识总结

    Map主要用于存储健值对,根据键得到值,因此不允许键重复(重复了覆盖了),但允许值重复. Hashmap 是一个最常用的Map,它根据键的HashCode 值存储数据,根据键可以直接获取它的值,具有很 ...

  6. JavaScript 二进制转文件

    关于在javascript下,如何将二进制转换成相应的文件并下载. 首先, 我们需要得到二进制的数据以及相应的文件格式,没有相应的格式也可以,可以通过二进制来判断,但相对会麻烦很多,所以建议可以要求后 ...

  7. 第一册：lesson thirty five。

    原文: Our village . This is a photograph of our village. Our village is in  a valley. It is between to ...

  8. c#金额转换成中文大写金额

    2018-08-24 转别人 c#金额转换成中文大写金额 /// <summary> /// 金额转换成中文大写金额 /// </summary> /// <param ...

  9. WPF 绕圈进度条（一）

    在设计界面时,有时会遇到进度条,本次讲解如何设计自定义的绕圈进度条,直接上代码: 1.控件界面 <UserControl x:Class="ProgressBarControl&quo ...

  10. Android Studio 基础控件使用

    TextView android:gravity="center" //文字对其方式 top bottom left right center android:textColor= ...