人妖在线一区,国产日韩欧美一区二区综合在线,国产啪精品视频网站免费,欧美内射深插日本少妇

新聞動態(tài)

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

發(fā)布日期:2021-12-13 10:37 | 文章來源:gibhub

準備工作

創(chuàng)建一個應用

添加應用到配置

創(chuàng)建一個html

編寫視圖函數(shù)

from django.shortcuts import render

# Create your views here.
def home(request):
 return render(request, 'index.html')

配置路由

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前端框架

下載地址

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

編寫前端內容

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>計算器</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="結果" 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 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>

編寫視圖函數(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='輸入錯誤'
 return JsonResponse(data={'result': result})

測試

到此這篇關于Django+Bootstrap實現(xiàn)計算器的示例代碼的文章就介紹到這了,更多相關Django+Bootstrap計算器內容請搜索本站以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持本站!

版權聲明:本站文章來源標注為YINGSOO的內容版權均為本站所有,歡迎引用、轉載,請保持原文完整并注明來源及原文鏈接。禁止復制或仿造本網站,禁止在非www.sddonglingsh.com所屬的服務器上建立鏡像,否則將依法追究法律責任。本站部分內容來源于網友推薦、互聯(lián)網收集整理而來,僅供學習參考,不代表本站立場,如有內容涉嫌侵權,請聯(lián)系alex-e#qq.com處理。

相關文章

實時開通

自選配置、實時開通

免備案

全球線路精選!

全天候客戶服務

7x24全年不間斷在線

專屬顧問服務

1對1客戶咨詢顧問

在線
客服

在線客服:7*24小時在線

客服
熱線

400-630-3752
7*24小時客服服務熱線

關注
微信

關注官方微信
頂部