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

更新日期: 2018-12-17阅读: 2027标签: 应用

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


 

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

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

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

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

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

浅谈单页应用和多页应用

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

谈谈StorageEvent

我们在开发多Tab应用时候,常常会遇到多个Tab状态同步的问题。想象如下场景:用户主界面,显示用户购物车内待结算的商品总数。此时,用户可能打开多个Tab

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

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

使用Flask构建一个Web应用

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

PWA渐进式Web应用:你需要知道的一切

你是否正处于选择 App 开发技术的两难境地?如今,渐进式 Web 应用程序需求旺盛。知道这是为什么吗 ?下面让我们来详细的梳理一下。移动电话用户的增长促使在线企业重新考虑对移动应用的优化

多数程序员难以简单的方式开发应用?

心理学中有一篇相当古老、但又非常重要的论文,题为《魔法数字七(上下浮动二):人类信息处理能力中的一些限制》。这篇文章衡量了大脑处理信息的极限,并给出了一个具体的数字:人脑可以同时容纳五到九个概念

使用typescript构建Vue应用

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

BFC的作用及其应用

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

点击更多...

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