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

使用html+css+js实现简易计算器，效果图如下：

<!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

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

Js位操作及其应用

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

你的下一款应用可能没有后端

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

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

开发Web应用，Go语言比Python更有优势！

使用typescript构建Vue应用

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

一文读尽前端路由、后端路由、单页面应用、多页面应用

使用Flask构建一个Web应用