Python lotto, calculator Program [2]

33365 ワード
Flask vscode python anaconda jquery テキストリンク
最後の投稿コードの場合

計算機セクションでは、数式を入力して計算を行い、結果値が出ると、新しいパスが与えられ、新しいページで開くことができます.
現在の例では、コンピュータ・プログラムのみがページに表示されますが、他のシステムがある場合は、ページ全体をアップロードしてコンピュータ・プログラムを起動します.これは、ユーザーにとって不便であり、サーバのオーバーロードを招く可能性があります.
HTMLファイルに<Script>コードを追加し、ページのリフレッシュを回避するためにページ内で変数を受信および出力します.

まず、既存のcalc関数をすべて削除します.
def calc():
    return render_template("calc.html")
render templateを使用してcalc.htmlファイルをロードします.
<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script>
        function click_go() {
            var n1 = Number($('#num1').val())
            var n2 = Number($('#num2').val())
            $('#go').click(function() {
            $('#result').attr('value', n1 + n2);
            })
        }
    </script>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>   
        <p>1st no</p>
        <input id="num1">
        <br>
        <p>2nd no</p>
        <input id="num2">
        <input id="go" type="button" value="Go" onclick="click_go();">
        <br>
        <p>result</p>
        <input id="result" readonly="readonly"/>
    </div>
</body>
</html>

順調に運行!

現在のコードがgoボタンをクリックすると、加算が実行され、+になります.
goボタンの代わりに[+][-][*][/]の4つのボタンを作成し、完全な計算機を作成します.
<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script>
        function click_add() {
            var n1 = Number($('#num1').val())
            var n2 = Number($('#num2').val())
            $('#add').click(function() {
            $('#result').attr('value', n1 + n2);
            })
        }
        function click_sub() {
            var n1 = Number($('#num1').val())
            var n2 = Number($('#num2').val())
            $('#sub').click(function() {
            $('#result').attr('value', n1 - n2);
            })
        }
        function click_mul() {
            var n1 = Number($('#num1').val())
            var n2 = Number($('#num2').val())
            $('#mul').click(function() {
            $('#result').attr('value', n1*n2);
            })
        }
        function click_div() {
            var n1 = Number($('#num1').val())
            var n2 = Number($('#num2').val())
            $('#div').click(function() {
            $('#result').attr('value', n1/n2);
            })
        }
    </script>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>   
        <p>1st no</p>
        <input id="num1">
        <br>
        <p>2nd no</p>
        <input id="num2">
        <br>
        <input id="add" type="button" value="add" onclick="click_add();">
        <input id="sub" type="button" value="sub" onclick="click_sub();">
        <input id="mul" type="button" value="mul" onclick="click_mul();">
        <input id="div" type="button" value="div" onclick="click_div();">
        <br>
        <p>result</p>
        <input id="result" readonly="readonly"/>
    </div>
</body>
</html>
4つの演算子が追加されました.
重複するコードがたくさんあるので、もっと効率的に書くことができると思います.

結果の追加

結果

mul結果

div結果
[白俊C+]2775女性会長になる
Routing[await/async], Query, try - catch