使用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. Dubbo 源码解析四 —— 负载均衡LoadBalance

    欢迎来我的 Star Followers 后期后继续更新Dubbo别的文章 Dubbo 源码分析系列之一环境搭建 Dubbo 入门之二 --- 项目结构解析 Dubbo 源码分析系列之三 -- 架构原 ...

  2. shell中$后加引号有什么用($"string"和$'string')

    bash&shell系列文章:http://www.cnblogs.com/f-ck-need-u/p/7048359.html 有些时候在某些服务管理脚本中看到$"$string& ...

  3. Go基础系列：struct的导出和暴露问题

    struct的导出和暴露问题 关于struct的导出 struct的属性是否被导出,也遵循大小写的原则:首字母大写的被导出,首字母小写的不被导出. 所以: 如果struct名称首字母是小写的,这个st ...

  4. Video for Linux Two API Specification

    V4L2 的使用规范,网址为:https://www.linuxtv.org/downloads/legacy/video4linux/API/V4L2_API/spec-single/v4l2.ht ...

  5. RDD内存迭代原理(Resilient Distributed Datasets)---弹性分布式数据集

    Spark的核心RDD Resilient Distributed Datasets(弹性分布式数据集)   Spark运行原理与RDD理论 Spark与MapReduce对比,MapReduce的计 ...

  6. vue 路由 及 跳转传递参数的总结

    博客地址:https://ainyi.com/4 vue-router vue-router 是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基 ...

  7. C# 隐式转换关键字 implicit

    implicit 关键字用于声明隐式的用户定义类型转换运算符. 如果可以确保转换过程不会造成数据丢失,则可使用该关键字在用户定义类型和其他类型之间进行隐式转换. 引用摘自:implicit(C# 参考 ...

  8. WPF系列（1）WPF和XAML基础

    终于下定决心开始更新WPF一个系列的文章,这里主要是出于两个目的,一是自己对所学的知识有一个系统的总结,二十希望能对其他人有些帮助,如果您觉得我写的不好,欢迎提意见. 那么既然我要开始写WPF,那我们 ...

  9. wpf学习20180606

    对象元素的子元素 有三类子元素:内容属性.集合项.值(类型转换) ------------------------------------------------------------------- ...

  10. C#通过窗体属性缩小一定尺寸时，无法再缩小窗体尺寸问题

    问题:通过窗体属性缩小窗体尺寸时,发现改变到一定大小时无法再缩小.条件:在代码中设置窗体的尺寸由窗体属性里设置的宽高决定,但实际通过窗体属性设置窗体大小,一定大小时无法再缩小,那是因为我们没有把窗体属 ...