使用html+css+js实现简易计算器

时间: 2018-12-17阅读: 1298标签: 应用

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


 

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/1617

使用typescript构建Vue应用

使用typescript构建Vue应用和使用js一样,都是通过vue-cli去初始化并创建一个vue项目,只不过使用typescript构建的时候要在脚手架问卷操作的时候勾选上typescript选项。使用typescript构建的Vue项目发生了一些变化:

BFC的作用及其应用

BFC就是块级格式化上下文,是页面盒模型布局中的一种 CSS 渲染模式,相当于一个独立的容器,里面的元素和外部的元素相互不影响。

C/S,B/S应用的区别

C/S(Client/Server) :客户端/服务器结构,其中客户端和服务器端都是独立的计算机;B/S(Browser/Server):浏览器/服务器结构,B/S是特殊的一种C/S结构,是对C/S的改进和变化,B/S是基于应用层http协议的web

如何加快 Node.js 应用的启动速度?

我们平时在开发部署 Node.js 应用的过程中,对于应用进程启动的耗时很少有人会关注,大多数的应用 5 分钟左右就可以启动完成,这个过程中会涉及到和集团很多系统的交互,这个耗时看起来也没有什么问题。

构建多页面应用——静态资源的处理

图片常见的类型有jp(e)g,png,gif,包括现在普遍使用的svg以及webp。svg作为矢量图形,有一定的使用场景,而webp作为未来web开发的趋势,有一定的使用场景,比如:爱奇艺中的轮播图(carousel)中就是用webp,但其他的见到的不多。

vue开发中的几个高级应用

我们使用的第三方 Vue.js 插件。如果插件是一个对象,必须提供install方法。如果插件是一个函数,它会被作为install方法。install方法调用时,会将Vue作为参数传入。该方法需要在调用new Vue()之前被调用。

使用Flask构建一个Web应用

Flask是一个使用Python编写的轻量级Web应用框架。以管理员身份,打开命令提示符窗口,输入下面命令py -3 -m pip install flask

浅谈单页应用和多页应用

多页面应用:每次页面跳转,后台都会返回一个新的HTML文档,就是多页面应用。单页应用:用vue写的项目是单页应用,刷新页面会请求一个HTML文件,切换页面的时候,并不会发起新的请求一个HTML文件,只是页面内容发生了变化

flutter打开第三方应用的实现?

1.flutter开发者网站下载url_launcher插件;在 pubspec.yaml 文件中添加依赖;安装:flutter pub get;导入;_launchURL、_openMapApp为自定义方法名 可以根据自己的场景自定义名称

Js位操作及其应用

我在看lodash实现一些工具函数的源码时发现lodash定义了一些bitMask的常量。我一开始没弄明这是什么鬼东西,用Google搜了一圈才发现是我之前接触过得位操作运算一类的东西。并且源码和我搜索的资料给我提供了另一种使用场景

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!