欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Django+Bootstrap實(shí)現(xiàn)計(jì)算器的示例代碼

 更新時(shí)間：2021年11月08日 16:11:26   作者：小旺不正經(jīng)  
本文主要介紹了Django+Bootstrap實(shí)現(xiàn)計(jì)算器的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

準(zhǔn)備工作

創(chuàng)建一個(gè)應(yīng)用

image-20211028134926489

添加應(yīng)用到配置

image-20211028135158647

創(chuàng)建一個(gè)html

image-20211028135438121

編寫(xiě)視圖函數(shù)

from django.shortcuts import render


# Create your views here.

def home(request):
    return render(request, 'index.html')

image-20211028135734932

配置路由

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

image-20211028135900752

導(dǎo)入Bootstrap前端框架

下載地址

將css、fonts、js復(fù)制到static文件夾下 沒(méi)有則創(chuàng)建該文件夾

image-20211028141226635

編寫(xiě)前端內(nèi)容

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>計(jì)算器</title>
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}" rel="external nofollow" >
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script src="{% static 'js/bootstrap.min.js' %}"></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 class="container-fluid">
    <div class="row">
        <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="結(jié)果" 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" >
    計(jì)算
</button>
    </div>
        </div>
            <div class="col-xs-1 col-sm-2"></div>
</div>
    </div>
<div class="extenContent"></div>
<script>
    var x=document.getElementById("txt_code");
    var y=document.getElementById("txt_result");
    function fun_7() {
        x.value+='7';
    }
    function fun_8() {
        x.value+='8';
    }
    function fun_9() {
        x.value+='9';
    }
    function fun_div() {
        x.value+='/';
    }
    function fun_4() {
        x.value+='4';
    }
    function fun_5() {
        x.value+='5';
    }
    function fun_6() {
        x.value+='6';
    }
    function fun_mul() {
        x.value+='*';
    }
    function fun_1() {
        x.value+='1';
    }
    function fun_2() {
        x.value+='2';
    }
    function fun_3() {
        x.value+='3';
    }
    function fun_sub() {
        x.value+='-';
    }
    function fun_0() {
        x.value+='0';
    }
    function fun_00() {
        x.value+='00';
    }
    function fun_dot() {
        x.value+='.';
    }
    function fun_add() {
        x.value+='+';
    }
    function fun_clear() {
        x.value='';
        y.value='';

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

編寫(xiě)視圖函數(shù)

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, 'index.html')


@csrf_exempt
def compute(request):
    code = request.POST.get('code')
    try:
        code = 'print(' + code + ')'
        result = subprocess.check_output(['python', '-c', code], universal_newlines=True, stderr=subprocess.STDOUT,timeout=30)
    except:
        result='輸入錯(cuò)誤'

    return JsonResponse(data={'result': result})

image-20211028164444316

測(cè)試

image-20211028164518914

image-20211028164528633

image-20211028164539372

到此這篇關(guān)于Django+Bootstrap實(shí)現(xiàn)計(jì)算器的示例代碼的文章就介紹到這了,更多相關(guān)Django+Bootstrap計(jì)算器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • python字典進(jìn)行運(yùn)算原理及實(shí)例分享

    python字典進(jìn)行運(yùn)算原理及實(shí)例分享

    在本篇文章里小編給大家整理的是一篇關(guān)于python字典進(jìn)行運(yùn)算原理及實(shí)例分享內(nèi)容，有需要的朋友們可以測(cè)試下。
    2021-08-08
  • python解析json實(shí)例方法

    python解析json實(shí)例方法

    這篇文章主要介紹了python解析json數(shù)據(jù)的小實(shí)例，代碼簡(jiǎn)單實(shí)用，大家參考使用吧
    2013-11-11
  • python實(shí)現(xiàn)畫(huà)循環(huán)圓

    python實(shí)現(xiàn)畫(huà)循環(huán)圓

    今天小編就為大家分享一篇python實(shí)現(xiàn)畫(huà)循環(huán)圓，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2019-11-11
  • Pytorch圖像處理注意力機(jī)制解析及代碼詳解

    Pytorch圖像處理注意力機(jī)制解析及代碼詳解

    這篇文章主要為大家介紹了Pytorch圖像處理注意力機(jī)制解析及代碼詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2022-05-05
  • 教你pycharm運(yùn)行Django第一個(gè)項(xiàng)目

    教你pycharm運(yùn)行Django第一個(gè)項(xiàng)目

    本文主要介紹了教你pycharm運(yùn)行Django第一個(gè)項(xiàng)目的實(shí)現(xiàn)，文中通過(guò)圖文示例介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2021-08-08
  • 深入了解Python iter() 方法的用法

    深入了解Python iter() 方法的用法

    這篇文章主要介紹了深入了解Python iter() 方法的知識(shí),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2019-07-07
  • Python 5種常見(jiàn)字符串去除空格操作的方法

    Python 5種常見(jiàn)字符串去除空格操作的方法

    這篇文章主要給大家分享的是Python 5種常見(jiàn)字符串去除空格操作的方法，包括有strip()方法、rstrip()方法、replace()方法、join()方法+split()方法，下面文章是詳細(xì)內(nèi)容,需要的朋友可以參考一下
    2021-11-11
  • Python3 xml.etree.ElementTree支持的XPath語(yǔ)法詳解

    Python3 xml.etree.ElementTree支持的XPath語(yǔ)法詳解

    這篇文章主要介紹了Python3 xml.etree.ElementTree支持的XPath語(yǔ)法詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2020-03-03
  • 在 Python 中如何使用 Re 模塊的正則表達(dá)式通配符

    在 Python 中如何使用 Re 模塊的正則表達(dá)式通配符

    這篇文章主要介紹了在 Python 中如何使用 Re 模塊的正則表達(dá)式通配符,本文詳細(xì)解釋了如何在 Python 中使用帶有通配符的 re.sub() 來(lái)匹配字符串與正則表達(dá)式，需要的朋友可以參考下
    2023-06-06
  • 一文教會(huì)你用python裁剪圖片

    一文教會(huì)你用python裁剪圖片

    Python語(yǔ)言的圖片處理使我們常常使用的方面,那么我們?cè)撊绾螌?shí)現(xiàn)圖片的剪切呢?下面這篇文章主要給大家介紹了關(guān)于用python裁剪圖片的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-06-06

最新評(píng)論