Heim > Artikel > Web-Frontend > Wie man mit Django und Bootstrap einen Taschenrechner erstellt (praktisch)

Wie man mit Django und Bootstrap einen Taschenrechner erstellt (praktisch)

青灯夜游nach vorne: 2021-12-13 19:02:162694Durchsuche

Dieser Artikel führt Sie Schritt für Schritt durch die Verwendung von Django+ Bootstrap zum Erstellen eines Taschenrechners. Ich hoffe, er wird Ihnen hilfreich sein!

Vorbereitung

Erstellen Sie eine Anwendung.

Wie man mit Django und Bootstrap einen Taschenrechner erstellt (praktisch)

Anwendung zur Konfiguration hinzufügen

Wie man mit Django und Bootstrap einen Taschenrechner erstellt (praktisch)

Routing konfigurieren

from django.shortcuts import render


# Create your views here.

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

Wie man mit Django und Bootstrap einen Taschenrechner erstellt (praktisch)

Importieren Sie das Bootstrap-Frontend-Framework.

Download-Adresse: Schriftarten, js Beim Kopieren in den statischen Ordner wird der Ordner erstellt. [Verwandte Empfehlungen: „ Wie man mit Django und Bootstrap einen Taschenrechner erstellt (praktisch) Bootstrap-Tutorial

“]

Wie man mit Django und Bootstrap einen Taschenrechner erstellt (praktisch)

Schreiben von Front-End-Inhalten

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

from app.views import home

urlpatterns = [
    path(&#39;admin/&#39;, admin.site.urls),
    path(&#39;&#39;,home,name=&#39;hoome&#39;),
]

Schreiben von Ansichtsfunktionen

{% 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>

Testen

Wie man mit Django und Bootstrap einen Taschenrechner erstellt (praktisch)

Mehr relevantes Wissen über Bootstrap , können Sie besuchen:

Bootstrap Basic Tutorial

! ! Wie man mit Django und Bootstrap einen Taschenrechner erstellt (praktisch)

Das obige ist der detaillierte Inhalt vonWie man mit Django und Bootstrap einen Taschenrechner erstellt (praktisch). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

django css bootstrap html 前端框架 Static JS github https

Stellungnahme：

Dieser Artikel ist reproduziert unter:juejin.cn. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie erreiche ich einen Ladeeffekt in Bootstrap? Lesen Sie die Symbolkomponente (Spinners).Nächster Artikel：Wie erreiche ich einen Ladeeffekt in Bootstrap? Lesen Sie die Symbolkomponente (Spinners).

In Verbindung stehende Artikel

Mehr sehen

Wie man mit Django und Bootstrap einen Taschenrechner erstellt (praktisch)

Vorbereitung

from django.contrib import admin from django.urls import path,include from app.views import home urlpatterns = [ path(&#39;admin/&#39;, admin.site.urls), path(&#39;&#39;,home,name=&#39;hoome&#39;), ]

Mehr relevantes Wissen über Bootstrap , können Sie besuchen:

In Verbindung stehende Artikel

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