使用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. [转]java中作用域public private protected 以及不写的区别

    在说明这四个关键字之前,我想就class之间的关系做一个简单的定义,对于继承自己的class,base class可以认为他们都是自己的子女,而对于和自己一个目录下的classes,认为都是自己的朋友 ...

  2. JavaScript经典片段

    typeof jQuery != "undefined" || importjQuery(); 判断jQuery对象是否存在,如果不存在就调用importjQuery()方法加载j ...

  3. linux命令-awk入门

    最近经常查看nginx日志,有时候需要做一些统计分析,于是就想起了awk,学习了就顺便做一个记录. 目录 概述:简单介绍awk背景原理 基本用法:常用到的awk语法 内建变量 综合实例 概述 awk是 ...

  4. Java并发编程-再谈 AbstractQueuedSynchronizer 1 ：独占模式

    关于AbstractQueuedSynchronizer JDK1.5之后引入了并发包java.util.concurrent,大大提高了Java程序的并发性能.关于java.util.concurr ...

  5. Java 容器源码分析之 Set

    Set 表示由无重复对象组成的集合,也是集合框架中重要的一种集合类型,直接扩展自 Collection 接口.在一个 Set 中,不能有两个引用指向同一个对象,或两个指向 null 的引用.如果对象 ...

  6. 基于FineUIMVC的代码生成器(传统三层)v1.0

    三层我就不说了,主要是看框架思路可扩展.以前用FineUI开源版写过一版,修修改改自己用了,没有特意的整理,FineUIMVC开发还是比较快,移植了一下两天就弄完了,算是一个对新手有用的工具,先放出第 ...

  7. MySQL高可用之组复制技术(3)：配置多主模型的组复制

    MySQL组复制系列文章: MySQL组复制大纲 MySQL组复制(1):组复制技术简介 MySQL组复制(2):配置单主模型的组复制 MySQL组复制(3):配置多主模型的组复制 MySQL组复制( ...

  8. 翻译：delete语句(已提交到MariaDB官方手册)

    本文为mariadb官方手册:DELETE语句的译文. 原文:https://mariadb.com/kb/en/delete/ 我提交到MariaDB官方手册的译文:https://mariadb. ...

  9. μC/OS-II 任务堆栈的初始化

    任务堆栈的作用 应用程序在创建一个新任务的时候,必须把在系统启动这个任务时 CPU 各寄存器所需要的初始数据(任务指针.任务堆栈指针.程序状态字等等),事先存放在任务的堆栈中,以备任务切换等操作时调用 ...

  10. Integer Partition（hdu4658）2013 Multi-University Training Contest 6 整数拆分二

    Integer Partition Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) T ...