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

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

使用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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

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

关闭

vue开发中的几个高级应用

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

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

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

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

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

BFC的作用及其应用

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

开发Web应用,Go语言比Python更有优势!

随着Golang的日益普及,它是否取代Python?接下来让我们一起看看Go的优点,以及它与Python的区别。在Web开发的世界里,敏捷才是王道。使用更少的费用和资源来更快地完成网站和网络应用,从而获得更多的竞争优势。

使用typescript构建Vue应用

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

如何构建可伸缩的Web应用?

想象一下,你的营销活动吸引了很多用户,在某个时候,应用必须同时为成千上万的用户提供服务,这么大的并发量,服务器的负载会很大,如果设计不当,系统将无法处理。接下来发生的就是,随机错误、缓慢的内容加载

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

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

JS实现简易计算器的7种方法

主要为大家详细介绍了js实现简易计算器功能,制作能进行加减乘除的计算器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

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

点击更多...

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