Django+Bootstrap实现计算器的示例代码
目录
- 准备工作
- 导入Bootstrap前端框架
- 编写前端内容
- 编写视图函数
准备工作
创建一个应用
添加应用到配置
创建一个html
编写视图函数
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文件夹下 没有则创建该文件夹
编写前端内容
{% 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>
编写视图函数
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实现计算器的示例代码的文章就介绍到这了,更多相关Django+Bootstrap计算器内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
Python tkinter实现简单加法计算器代码实例
tkinter 是 Python 的标准 GUI 库.Python 使用 tkinter 可以快速的创建 GUI 应用程序.由于 tkinter 是内置到 python 的安装包中.只要安装好 Python 之后就能 import tkinter 库.而且 IDLE 也是用 tkinter 编写而成.对于简单的图形界面 tkinter 还是能应付自如. 代码如下 from tkinter import * def Calculate(): a1 = int(text1.get('1.0', EN
-
Python双版本计算器详解
有框计算器 这个计算器我们用到了Python自带的Tkinter库 # 导入tkinter库 import tkinter 我们要对窗口进行一些基本操作 # 获取一个窗口 window = tkinter.Tk() # 设置标题 window.title('计算器') # 设置窗口大小 window.geometry('200x200') 接着用函数定义一个输入方法 输入方法 # 输入方法 def add(n): # 获取到n1文本框的值 n1 = inp.get() # 清空文本框 inp.d
-
python 实现一个图形界面的汇率计算器
调用的api接口: https://api.exchangerate-api.com/v4/latest/USD 完整代码 import requests from tkinter import * import tkinter as tk from tkinter import ttk class RealTimeCurrencyConverter(): def __init__(self,url): self.data = requests.get(url).json() self.curr
-
python 实现简单的计算器(gui界面)
运行效果: 完整代码 from tkinter import * def click(num): global op op=op+str(num) iptext.set(op) def evaluate(): global op output=str(eval(op)) iptext.set(output) def clearDisplay(): global op op="" iptext.set(op) calc=Tk() calc.title("TechVidvan C
-
python 基于 tkinter 做个学生版的计算器
目录 导语 正文 总结 导语 九月初家里的熊孩子终于开始上学了! 半个月过去了,小孩子每周都会带着一堆的数学作业回来,哈哈哈哈~真好,在家做作业就没时间打扰我写代码了. 很赞,鹅鹅鹅饿鹅鹅鹅~曲项向天歌~~~~开心到原地起飞. 孩子昨天回家之后吃完饭就悄咪咪的说,神神秘秘的我以为做什么?结果是班主任让他们每个人带一个计算器,平常做数学算数的时候可以在家用用,嗯哼~这还用卖嘛? 立马给孩子用Python制作了一款简直一摸一样的学生计算器~ 正文 本文的学生计算器是基于tkinter做的界面化
-
python实现计算器简易版
Python计算器加减乘除,供大家参考,具体内容如下 1.效果图 2.代码 # coding=utf-8 import sys from PyQt5.QtWidgets import QApplication, QWidget, QPushButton, QGridLayout, QLCDNumber, QSlider, QVBoxLayout, qApp, \ QMainWindow from PyQt5.QtCore import Qt class ForExample(QWidget):
-
python如何通过闭包实现计算器的功能
这篇文章主要介绍了python如何通过闭包实现计算器的功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 满足闭包的条件: 1.函数中嵌套一个函数 2.外层函数的返回值是内层函数的函数名 3.内层嵌套函数对外部作用域有一个非全局变量的引用 闭包的作用: 实现数据锁定 装饰器的作用: 就是为已经存在的对象添加额外的功能. 常用场景: 插入日志.性能测试.事务处理.缓存.权限校验等 代码示例: def scope(func): def calc(a
-
用python实现一个简单计算器（完整DEMO）
一.功能目标 用户输入一个类似 1-2*((60-30+(-40/5)*(9-2*5/3+7/3*99/4*2998+10*568/14))-(-4*3)/(16-3*2)) 这样的表达式,假设表达式里面除了包含空格.'+'.'-'.'*'.'/'和括号再无其他特殊符号,然后自己动手写代码解析其中的表达式,实现加减乘除,最后得出的结果与真实的计算机所算的结果必须一致. 二.解题思路 1.为了分开运算符和数字,因此把输入的字符串格式转换为 列表的格式进行处理,这样子就可以按位进行 处理了 2.
-
Django+Bootstrap实现计算器的示例代码
目录 准备工作 导入Bootstrap前端框架 编写前端内容 编写视图函数 准备工作 创建一个应用 添加应用到配置 创建一个html 编写视图函数 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 imp
-
AngularJs bootstrap详解及示例代码
AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括 本文用于解释Angular初始化的过程,以及如何在你有需要的时候对Angular进行手工初始化. 二.Angular <script> 标签 本例用于展示如何通过推荐的路径整合Angular,实现自动初始化. <!doctype html> <html xmlns:ng=&qu
-
Django用户身份验证完成示例代码
在这篇Django文章中,wom 将讨论Django User 验证,Django附带了一个用户认证系统. 它处理用户帐户,组,权限和基于cookie的用户会话. Django身份验证系统同时处理身份验证和授权. 简要地说,身份验证将验证用户是他们声称的身份,而授权则确定允许经过身份验证的用户执行的操作. 基本上,我们将创建登录,注销,忘记密码和重置密码功能. 身份验证支持在django.contrib.auth中为Django contrib模块.默认情况下,所需的配置已包含在django-a
-
django haystack实现全文检索的示例代码
全文检索里的组件简介 1. 什么是haystack? 1. haystack是django的开源搜索框架,该框架支持Solr,Elasticsearch,Whoosh, *Xapian*搜索引擎,不用更改代码,直接切换引擎,减少代码量. 2. 搜索引擎使用Whoosh,这是一个由纯Python实现的全文搜索引擎, 没有二进制文件等,比较小巧,配置比较简单,当然性能自然略低. 3. 中文分词Jieba,由于Whoosh自带的是英文分词,对中文的分词支持不是太好,故用jieba替换whoosh的分词
-
Django实现翻页的示例代码
Django提供了翻页器.用Django的Paginator类实现 一.views模块导入Paginator类实现数据分页 ApiTest/apiviews.py 每行都加了注释,希望有助于理解. from django.shortcuts import render from ApiTest.models import ApiTest from django.contrib.auth.decorators import login_required from django.core.pagin
-
Django实现简单登录的示例代码
目录 创建django项目 使用模型的url.py 加载静态文件 页面跳转 创建数据库模型 提交 表单提交 ajax提交 创建django项目 创建项目的命令行语句: django-admin startproject newsManage 将templates文件放在模板里面,会显得更简洁一些,所以我就先创建模板啦. 命令行语句:django-admin startapp newsModel 创建好模型把模型名加到setting文件下 INSTALLED_APPS 里面 , 不然到时候会报错说
-
C语言实现24点游戏计算器的示例代码
目录 前言 一.项目的创建标 二.项目的编写 三.项目的调试结果 前言 24点游戏计算器的规则如下 24点是一种益智游戏,24点是把4个整数(一般是正整数)通过加减乘除以及括号运算,使最后的计算结果是24的一个数学游戏,24点可以考验人的智力和数学敏感性,它能在游戏中提高人们的心算能力. 24点通常是使用扑克牌来进行游戏的,一副牌中抽去大小王后还剩下52张(如果初练也可只用1-10这40张牌),任意抽取4张牌(称为牌组),用加.减.乘.除(可加括号)把牌面上的数算成24.每张牌必须只能用一次,如
-
Python实现简易计算器的示例代码
目录 实现流程 计算器布局 计算机执行 代码展示 运行展示 上次我用我学习的python做一个简易的计算器,我对计算器进行了,更改优化,变成了一个真正的计算器 实现流程 1.计算机布局 2.计算机执行 首先导入模块: Tkinter 作为 Python GUI 开发工具之一,它具有 GUI 软件包的必备的常用功能.比如,它提供了十多种不同类型的窗口控件.窗口布局管理器.事件处理机制等,加之其开发效率高.代码简洁易读 import tkinter as tk #Python3标准安装包中自带tki
-
利用Python实现简易计算器的示例代码
目录 实现流程 代码实现 定义函数 输入值 判断运算 全部代码展示 运行展示 最近学习了字符串,运算符,条件语句,循环语句,我在想可以用我最近学的东西做什么? 看到运算我就想到了可以做一个简易的计算器. 实现流程 1.定义函数 2.请用户选择运算方法 3.请用户输入要运算的两个数 4.运算出结果 代码实现 定义加减乘除四种函数,在后续的运算中调用这四个函数输出结果. 定义加减乘除四种运算的函数 定义函数要用def 首先定义加法函数add在里面传入参数x,y 返回值X加y 定义subtract
-
django 发送手机验证码的示例代码
一.流程分析: 1.用户在项目前端,输入手机号,然后点击[获取验证码],将手机号发到post到后台. 2.后台验证手机号是否合法,是否已被占用,如果通过验证,则生成验证码,并通过运行脚本,让短信运营商向该手机号,发送该验证码,如果没通过验证,则返回错误信息 3.用户收到短信验证码以后,再次将所有信息post到后台. 4.后台验证各个数据,通过验证则完成实名制认证,如果没通过则返回错误信息. 总结,一次实名验证,需要两次ajax+post 二.对接短信商: 1.在云片网端: 1.注册云片网 地址: