Rumah > hujung hadapan web > Tutorial Bootstrap > Cara membuat kalkulator dengan Django dan Bootstrap (praktikal)

Cara membuat kalkulator dengan Django dan Bootstrap (praktikal)

青灯夜游
Lepaskan: 2022-01-28 18:04:51
ke hadapan
2786 orang telah melayarinya

Artikel ini akan mengajar anda langkah demi langkah cara menggunakan Django Bootstrap untuk mencipta kalkulator saya harap ia akan membantu anda!

Cara membuat kalkulator dengan Django dan Bootstrap (praktikal)

Persediaan

Buat aplikasi

Cara membuat kalkulator dengan Django dan Bootstrap (praktikal)

Tambahkan aplikasi pada konfigurasi

Cara membuat kalkulator dengan Django dan Bootstrap (praktikal)

Buat html

Cara membuat kalkulator dengan Django dan Bootstrap (praktikal)

Tulis fungsi paparan

from django.shortcuts import render


# Create your views here.

def home(request):
    return render(request, 'index.html')
Salin selepas log masuk

Cara membuat kalkulator dengan Django dan Bootstrap (praktikal)

Konfigurasi Laluan

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'),
]
Salin selepas log masuk

Cara membuat kalkulator dengan Django dan Bootstrap (praktikal)

Import rangka kerja bahagian hadapan Bootstrap

Alamat muat turun

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

Salin css, fon dan js ke folder statik. [Cadangan berkaitan: "tutorial bootstrap"]

Cara membuat kalkulator dengan Django dan Bootstrap (praktikal)

Menulis kandungan bahagian hadapan

{% 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>
Salin selepas log masuk

Fungsi paparan penulisan

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})
Salin selepas log masuk

Cara membuat kalkulator dengan Django dan Bootstrap (praktikal)

Ujian

Cara membuat kalkulator dengan Django dan Bootstrap (praktikal)

Cara membuat kalkulator dengan Django dan Bootstrap (praktikal)

Cara membuat kalkulator dengan Django dan Bootstrap (praktikal)

Lagi tentang Untuk pengetahuan berkaitan bootstrap, sila lawati: tutorial asas bootstrap! !

Atas ialah kandungan terperinci Cara membuat kalkulator dengan Django dan Bootstrap (praktikal). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:juejin.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan