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,
    )

    计算 

    控制台输出








  • 相关阅读:
    Docker系列——InfluxDB+Grafana+Jmeter性能监控平台搭建(一)
    Centos7网络配置——设置固定ip
    Fiddler扩展——自定义列数据&Tunnel to 443解决办法
    Jmeter二次开发——自定义函数
    net5学习笔记---依赖注入
    Spring Cloud Alibaba系列之分布式服务组件Dubbo
    Spring5.0源码学习系列之事务管理概述
    C# 无需管理员权限提示,操作C盘文件
    WPF 屏幕点击的设备类型
    WPF Button MouseDown事件
  • 原文地址:https://www.cnblogs.com/zhongyehai/p/10934341.html
Copyright © 2011-2022 走看看