zoukankan      html  css  js  c++  java
  • 测开之路四十四:实现计算器

    结构

    html

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>计算器</title>
    <style>
    .color {
    color: orange;
    }
    input {
    30px;
    height: 30px;
    }
    </style>
    <script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
    <script src="/static/calculator.js"></script>
    </head>
    <body>
    <div>
    <label id="display"></label>
    <table>
    <tr>
    <td><input class="color expr" type="button" value="("></td>
    <td><input class="color expr" type="button" value=")"></td>
    <td><input class="color expr" type="button" value="%"></td>
    <td><input id="clear" class="color" type="button" value="C"></td>
    </tr>
    <tr>
    <td><input class="expr" type="button" value="7"></td>
    <td><input class="expr" type="button" value="8"></td>
    <td><input class="expr" type="button" value="9"></td>
    <td><input class="color expr" type="button" value="/"></td>
    </tr>
    <tr>
    <td><input class="expr" type="button" value="4"></td>
    <td><input class="expr" type="button" value="5"></td>
    <td><input class="expr" type="button" value="6"></td>
    <td><input class="color expr" type="button" value="*"></td>
    </tr>
    <tr>
    <td><input class="expr" type="button" value="1"></td>
    <td><input class="expr" type="button" value="2"></td>
    <td><input class="expr" type="button" value="3"></td>
    <td><input class="color expr" type="button" value="-"></td>
    </tr>
    <tr>
    <td><input class="expr" type="button" value="0"></td>
    <td><input class="color expr" type="button" value="."></td>
    <td><input id="calc" class="color" type="button" value="="></td>
    <td><input class="color expr" type="button" value="+"></td>
    </tr>
    </table>
    </div>
    </body>
    </html>

    CSS

    label {
    130px;
    text-align: right;
    }

    #test {
    color: gray;
    }

    p {
    color: blue;
    }

    div {
    text-align: center;
    }

    JS

    function http(url, data, method, success, fail) {
    data = method == 'GET' ? data : JSON.stringify(data)
    console.log(data);
    $.ajax({
    url: url,
    type: method,
    dataType: 'json',
    contentType: 'application/json; charset=UTF-8',
    data: data,
    success: success,
    error: fail
    });
    }

    var expression = ""; //设定一个空值

    //获取当前点击的按键的值
    function click_calculator() {
    expression += $(this).val() // $(this)代表当前对象。
    console.log($(this).val())
    $('#display').text(expression) // val函数如果有参数则表示赋值操作,参数为空则表示取值操作。
    }
    //清空的函数(C键)
    function click_clear() {
    expression = "";
    $('#display').text(expression)
    }
    //提交到后端实现计算(=键)
    function click_compute() {
    var url = "http://127.0.0.1:8888/compute"
    var data = {
    'expresstion': expression
    }
    http(url, data, 'POST', function(response) {
    expression = response['data']
    $('label').text(expression)
    }, function(response) {
    })
    }
    //定义计算器的按键事件
    $(function() {
    $('label').text(expression)
    console.log("hello jquery.");
    // 采用标签选择器选中所有input元素,对其增加点击事件
    // click的参数是一个函数,处理点击行为。
    $(".expr").click(click_calculator)
    $("#clear").click(click_clear)
    $("#calc").click(click_compute)
    });

    主脚本

    from flask import Flask
    from flask import jsonify
    from flask import request
    from flask import render_template

    app = Flask(__name__)

    @app.route('/calculator')
    def calculator():
    return render_template('calculator.html')

    @app.route('/compute', methods=['POST'])
    def compute():
    data = request.get_json() # 获取请求里面的数据
    print(data)
    result = eval(data['expresstion'])
    print(result)
    return jsonify({
    'status': 0,
    'message': "ok",
    'data': result
    })

    if __name__ == '__main__':
    app.run(
    host='0.0.0.0',
    port=8888,
    debug=True,
    )

    计算 

    控制台输出








  • 相关阅读:
    changing a pointer rather than erasing memory cells
    验证码识别 edge enhancement 轮廓增强 region finding 区域查找
    Manipulating Data Structures
    passing parameters by value is inefficient when the parameters represent large blocks of data
    Aliasing 走样
    Artificial Intelligence Research Methodologies 人工智能研究方法
    Thread safety
    include pointers as a primitive data type
    flat file
    functional cohesion
  • 原文地址:https://www.cnblogs.com/zhongyehai/p/10934341.html
Copyright © 2011-2022 走看看