コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > ブートストラップのチュートリアル > 本文

DjangoとBootstrapで電卓を作る方法（実践編）

青灯夜游
リリース： 2022-01-28 18:04:51
転載
2711 人が閲覧しました

この記事では、Django Bootstrap を使用して計算機を作成する方法を段階的に説明します。皆さんのお役に立てれば幸いです。

DjangoとBootstrapで電卓を作る方法（実践編）

#準備

アプリケーションの作成

DjangoとBootstrapで電卓を作る方法（実践編）#アプリケーションを構成に追加

HTML の作成DjangoとBootstrapで電卓を作る方法（実践編）

ビュー関数の作成DjangoとBootstrapで電卓を作る方法（実践編）

from django.shortcuts import render


# Create your views here.

def home(request):
    return render(request, 'index.html')
ログイン後にコピー

ルーティングの構成DjangoとBootstrapで電卓を作る方法（実践編）

from django.contrib import admin
from django.urls import path,include

from app.views import home

urlpatterns = [
    path('admin/', admin.site.urls),
    path('',home,name='hoome'),
]
ログイン後にコピー

Bootstrap フロントエンド フレームワークのインポートDjangoとBootstrapで電卓を作る方法（実践編）

ダウンロード アドレス

https://github.com/twbs/bootstrap/releases / download/v3.4.1/bootstrap-3.4.1-dist.zip

css、fonts、js を静的フォルダーにコピーし、フォルダーが見つからない場合は作成します。 [関連する推奨事項: "

bootstrap チュートリアル
"]

フロントエンド コンテンツの作成DjangoとBootstrapで電卓を作る方法（実践編）

{% load static %}
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>计算器</title>
    <link rel="stylesheet" href="{% static &#39;css/bootstrap.min.css&#39; %}">
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script src="{% static &#39;js/bootstrap.min.js&#39; %}"></script>

    <style>
        body{
            background-position: center 0;
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-size: cover;
            -webkit-background-size: cover;
            -o-background-size: cover;
            -moz-background-size: cover;
            -ms-background-size:cover;
        }
        .input_show{
            margin-top: 35px;
            max-width: 280px;
            height: 35px;
        }
        .btn_num{
            margin:1px 1px 1px 1px;
            width: 60px;
        }
        .btn_clear{
            margin-left: 40px;
            margin-right: 20px;
        }
        .extenContent{
            height: 300px;
        }
    </style>
</head>
<body>
<div>
    <div>
        <div class="col-xs-1 col-sm-4"> </div>
        <div id="computer" class="col-xs-1 col-sm-6">
            <input type="text" id="txt_code" name="txt_code" value="" class="form-control input_show" placeholder="" disabled>
            <input type="text" id="txt_result" name="txt_result" value="" class="form-control input_show" placeholder="结果" disabled>
            <br>
            <div>
                <button type="button" class="btn btn-default btn_num" onclick="fun_7()">7</button>
                <button type="button" class="btn btn-default btn_num" onclick="fun_8()">8</button>
                <button type="button" class="btn btn-default btn_num" onclick="fun_9()">9</button>
                <button type="button" class="btn btn-default btn_num" onclick="fun_div()">/</button>
                <br>
                <button type="button" class="btn btn-default btn_num" onclick="fun_4()">4</button>
                <button type="button" class="btn btn-default btn_num" onclick="fun_5()">5</button>
                <button type="button" class="btn btn-default btn_num" onclick="fun_6()">6</button>
                <button type="button" class="btn btn-default btn_num" onclick="fun_mul()">*</button>
                <br>
                <button type="button" class="btn btn-default btn_num" onclick="fun_1()">1</button>
                <button type="button" class="btn btn-default btn_num" onclick="fun_2()">2</button>
                <button type="button" class="btn btn-default btn_num" onclick="fun_3()">3</button>
                <button type="button" class="btn btn-default btn_num" onclick="fun_sub()">-</button>
                <br>
                <button type="button" class="btn btn-default btn_num" onclick="fun_0()">0</button>
                <button type="button" class="btn btn-default btn_num" onclick="fun_00()">00</button>
                <button type="button" class="btn btn-default btn_num" onclick="fun_dot()">.</button>
                <button type="button" class="btn btn-default btn_num" onclick="fun_add()">+</button>
            </div>
        <div>
        <br>
        <button type="button" class="btn btn-success btn-lg btn_clear" id="lgbut_clear" onclick="fun_clear()">
    清空
</button>
<button type="button" class="btn btn-primary btn-lg" id="lgbut_compute" >
    计算
</button>
    </div>
        </div>
            <div class="col-xs-1 col-sm-2"></div>
</div>
    </div>
<div></div>
<script>
    var x=document.getElementById("txt_code");
    var y=document.getElementById("txt_result");
    function fun_7() {
        x.value+=&#39;7&#39;;
    }
    function fun_8() {
        x.value+=&#39;8&#39;;
    }
    function fun_9() {
        x.value+=&#39;9&#39;;
    }
    function fun_div() {
        x.value+=&#39;/&#39;;
    }
    function fun_4() {
        x.value+=&#39;4&#39;;
    }
    function fun_5() {
        x.value+=&#39;5&#39;;
    }
    function fun_6() {
        x.value+=&#39;6&#39;;
    }
    function fun_mul() {
        x.value+=&#39;*&#39;;
    }
    function fun_1() {
        x.value+=&#39;1&#39;;
    }
    function fun_2() {
        x.value+=&#39;2&#39;;
    }
    function fun_3() {
        x.value+=&#39;3&#39;;
    }
    function fun_sub() {
        x.value+=&#39;-&#39;;
    }
    function fun_0() {
        x.value+=&#39;0&#39;;
    }
    function fun_00() {
        x.value+=&#39;00&#39;;
    }
    function fun_dot() {
        x.value+=&#39;.&#39;;
    }
    function fun_add() {
        x.value+=&#39;+&#39;;
    }
    function fun_clear() {
        x.value=&#39;&#39;;
        y.value=&#39;&#39;;

    }
</script>
<script>
    function ShowResult(data) {
        var y = document.getElementById(&#39;txt_result&#39;);
        y.value = data[&#39;result&#39;];
    }
</script>
<script>
    $(&#39;#lgbut_compute&#39;).click(function () {
        $.ajax({
            url:&#39;compute/&#39;,
            type:&#39;POST&#39;,
            data:{
                &#39;code&#39;:$(&#39;#txt_code&#39;).val()
            },
            dataType:&#39;json&#39;,
            success:ShowResult
        })
    })
</script>
</body>

</html>
ログイン後にコピー

ビュー関数の作成

import subprocess

from django.http import JsonResponse
from django.shortcuts import render

# Create your views here.
from django.views.decorators.csrf import csrf_exempt
from django.views.decorators.http import require_POST


def home(request):
    return render(request, &#39;index.html&#39;)


@csrf_exempt
def compute(request):
    code = request.POST.get(&#39;code&#39;)
    try:
        code = &#39;print(&#39; + code + &#39;)&#39;
        result = subprocess.check_output([&#39;python&#39;, &#39;-c&#39;, code], universal_newlines=True, stderr=subprocess.STDOUT,timeout=30)
    except:
        result=&#39;输入错误&#39;

    return JsonResponse(data={&#39;result&#39;: result})
ログイン後にコピー

TestDjangoとBootstrapで電卓を作る方法（実践編）

DjangoとBootstrapで電卓を作る方法（実践編）

DjangoとBootstrapで電卓を作る方法（実践編）

##ブートストラップに関するその他の関連知識

ブートストラップの基本チュートリアルDjangoとBootstrapで電卓を作る方法（実践編）にアクセスしてください! ！

以上がDjangoとBootstrapで電卓を作る方法（実践編）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
bootstrap django 電卓
ソース：juejin.cn
前の記事：Bootstrap でローディング効果を実現するにはどうすればよいですか?アイコン (スピナー) コンポーネントを読み取ります。 次の記事：実践的な戦闘: Bootstrap を使用してウォーターフォール フロー レイアウトを実装する (コード付き)
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
AjaxからDjangoに複数のリストを渡す方法 問題があり、リストからすべてのデータを取得したいので、現在、['[objectObject]','[objectObject]を印刷するときに、選択した項目の各データをループしてデ...
から 2024-04-03 23:20:06
0
1
362
カスタムの「css」および「js」ファイルをアプリケーション内のすべての管理者に効果的に適用するにはどうすればよいですか? 次のように、templates/admin/app1/ にカスタム CSS ファイルと js ファイル、admin.py およびオーバーライドされたbase.html があります。...
から 2024-04-03 20:54:06
0
1
400
Django のハイチャート: Web ページ上にグラフの代わりに JSON データを表示する そこで、Django の Highcharts を使用してローソク足チャートを作成しようとしていますが、Web ページにチャートを表示できず、代わりに取得したデータの JSON リ...
から 2024-04-02 10:06:09
0
1
291
pythananywhere が MySQL データベースに接続する際の操作エラーの問題を解決する Django プロジェクトが完了し、PythonAnywhere でテストしたいと思っています。サブスクリプションを支払った mysql データベース接続でエラーが表示されるまでは...
から 2024-03-31 22:43:19
0
1
418
個人サーバー上の mysql データベースを使用して Django をデプロイする Django プロジェクトを Linode にデプロイしようとしています。私が開発中に使用する MySQL データベースは、自宅の ubuntu サーバーにあります。これは私がプロ...
から 2024-03-31 14:44:26
0
1
371
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート