zoukankan      html  css  js  c++  java
  • 使用html+css+js实现简易计算器

    使用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;
         600px;
    }
    
    form {
        background-color: rgb(75, 70, 71);
        padding: 5px 1px auto;    
         245px;
    }
    .btn {
        outline: none;
        cursor: pointer;
        font-size: 20px;
        height: 45px;
        margin: 5px 0 5px 10px;
         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;
         224px;
        margin: 10px 10px auto;
    }
    .number {
        background-color: rgb(143, 140, 140);
        color: #dededc;
    }
    
    .operator {
        background-color: rgb(239, 141, 49);
        color: #ffffff;
    }
    
    .equal{
         105px;
    }
    
    .txt{
        font-size:12px;
        background: none;
    }
    

    资源网站大全 https://55wd.com 我的007办公资源网站 https://www.wode007.com

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

      

     
  • 相关阅读:
    前端与算法 leetcode 344. 反转字符串
    JavaScript闭包使用姿势指南
    前端与算法 leetcode 48. 旋转图像
    前端与算法 leetcode 36. 有效的数独
    前端与算法 leetcode 1. 两数之和
    前端与算法 leetcode 283. 移动零
    前端与编译原理 用js去运行js代码 js2run
    前端与算法 leetcode 66. 加一
    前端与算法 leetcode 350. 两个数组的交集 II
    前端与算法 leetcode 26. 删除排序数组中的重复项
  • 原文地址:https://www.cnblogs.com/ypppt/p/13363766.html
Copyright © 2011-2022 走看看