<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo</title>
</head>
<body background="D:\lqd\python\LianxiPython\BiLiBiLi\FlaskWeb\static\tu2.gif" style="background-repeat:no-repeat;background-size:100% 100%;background-attachment:fixed" >
<h1 id="h1">我曾经跨过山和大海,也穿过人山人海,我曾经拥有着的一切,转眼都飘散如烟,我曾经失落失望失掉所有方向,直到看见平凡才是唯一的答案。</h1>
<h2>——韩寒《平凡之路》</h2>
<P><a href="http://www.w3school.com.cn">Visit W3School.com.cn</a></P>
<script>
function change()
{
x=document.getElementById("h1")
x.style.color="#ff0000"
}
</script>
<button type="button" onclick="change()">改变颜色</button>
<div align="center" style="margin-top:80px">
<!--<img src=" {{url_for('static', filename='tu.jpg') }} " alt="templates" height = "400px" />-->
</div>
<div align="center" style="margin-top:30px">
<h3>作者长得帅不</h3>
<select name="handsome" id="handsome">
<option value="非常帅">非常帅</option>
<option value="很帅">很帅</option>
<option value="帅气值已满">帅气值已满</option>
<option value="特别帅">特别帅</option>
<option value="帅到爆">帅到爆</option>
<option value="帅到没法形容">帅到没法形容</option>
</select>
<input type="submit" value="提交" onclick="return getMessage()" />
<script type="text/javascript">
function getMessage()
{
alert("就知道你会选择正确的答案!")
}
</script>
</div>
<div align="center" style="margin-top:30px">
<form method="POST" name = "form">
<input type="text" name = "left" placeholder = "计算的第一个数"/>+
<input type="text" name = "right" placeholder = "计算的第二个数"/>=
<input type="text" name = "result" placeholder = "结果" readonly="readonly" value = "{{ RESULT }}"/>
<input type="submit" value = "submit"/>
</form>
<!--<button type="button" onclick="alert('你好,世界!')"><img src=" {{url_for('static', filename='tu1.jpg') }} " alt="templates" height = "400px" /></button>-->
</div>
<div align="center" style="margin-top:30px">
<input type="file" name="file" /><br><br>
<a href="https://www.youkuaiyun.com">点击打开优快云网页</a><br><br>
<a href="http://www.baidu.com">点击打开百度网页</a>
</div>
</body>
<body>
<div align="center" style="margin-top:30px">
<a href="https://translate.google.cn">点击打开Google翻译</a>
</div>
<div align="center" style="margin-top:30px">
<form action="" enctype="text/plain">
First name: <input type="text" name="fname" /><br><br>
Last name: <input type="text" name="lname" /><br><br>
<input type="submit" value="Submit" onclick="return getMessage()" />
<script type="text/javascript">
function getMessage()
{
alert("注册成功!")
}
</script>
</form>
</div>
<div align="center" style="margin-top:30px">
<script>
function button_onclick(){
alert('你好,世界!')
}
</script>
<button type="button" onclick="button_onclick()" style="width:100px;height:60px">Click</button>
</div>
</body>
<body>
<div align="center" style="margin-top:20px">
<script>/*========================================================*/
/* Light Loader
/*========================================================*/
var lightLoader = function(c, cw, ch){
var _this = this;
this.c = c;
this.ctx = c.getContext('2d');
this.cw = cw;
this.ch = ch;
this.loaded = 0;
this.loaderSpeed = .6;
this.loaderHeight = 10;
this.loaderWidth = 310;
this.loader = {
x: (this.cw/2) - (this.loaderWidth/2),
y: (this.ch/2) - (this.loaderHeight/2)
};
this.particles = [];
this.particleLift = 180;
this.hueStart = 0
this.hueEnd = 120;
this.hue = 0;
this.gravity = .15;
this.particleRate = 4;
/*========================================================*/
/* Initialize
/*========================================================*/
this.init = function(){
this.loop();
};
/*========================================================*/
/* Utility Functions
/*========================================================*/
this.rand = function(rMi, rMa){return ~~((Math.random()*(rMa-rMi+1))+rMi);};
this.hitTest = function(x1, y1, w1, h1, x2, y2, w2, h2){return !(x1 + w1 < x2 || x2 + w2 < x1 || y1 + h1 < y2 || y2 + h2 < y1);};
/*========================================================*/
/* Update Loader
/*========================================================*/
this.updateLoader = function(){
if(this.loaded < 100){
this.loaded += this.loaderSpeed;
} else {
this.loaded = 0;
}
};
/*========================================================*/
/* Render Loader
/*========================================================*/
this.renderLoader = function(){
this.ctx.fillStyle = '#000';
this.ctx.fillRect(this.loader.x, this.loader.y, this.loaderWidth, this.loaderHeight);
this.hue = this.hueStart + (this.loaded/100)*(this.hueEnd - this.hueStart);
var newWidth = (this.loaded/100)*this.loaderWidth;
this.ctx.fillStyle = 'hsla('+this.hue+', 100%, 40%, 1)';
this.ctx.fillRect(this.loader.x, this.loader.y, newWidth, this.loaderHeight);
this.ctx.fillStyle = '#222';
this.ctx.fillRect(this.loader.x, this.loader.y, newWidth, this.loaderHeight/2);
};
/*========================================================*/
/* Particles
/*========================================================*/
this.Particle = function(){
this.x = _this.loader.x + ((_this.loaded/100)*_this.loaderWidth) - _this.rand(0, 1);
this.y = _this.ch/2 + _this.rand(0,_this.loaderHeight)-_this.loaderHeight/2;
this.vx = (_this.rand(0,4)-2)/100;
this.vy = (_this.rand(0,_this.particleLift)-_this.particleLift*2)/100;
this.width = _this.rand(1,4)/2;
this.height = _this.rand(1,4)/2;
this.hue = _this.hue;
};
this.Particle.prototype.update = function(i){
this.vx += (_this.rand(0,6)-3)/100;
this.vy += _this.gravity;
this.x += this.vx;
this.y += this.vy;
if(this.y > _this.ch){
_this.particles.splice(i, 1);
}
};
this.Particle.prototype.render = function(){
_this.ctx.fillStyle = 'hsla('+this.hue+', 100%, '+_this.rand(50,70)+'%, '+_this.rand(20,100)/100+')';
_this.ctx.fillRect(this.x, this.y, this.width, this.height);
};
this.createParticles = function(){
var i = this.particleRate;
while(i--){
this.particles.push(new this.Particle());
};
};
this.updateParticles = function(){
var i = this.particles.length;
while(i--){
var p = this.particles[i];
p.update(i);
};
};
this.renderParticles = function(){
var i = this.particles.length;
while(i--){
var p = this.particles[i];
p.render();
};
};
/*========================================================*/
/* Clear Canvas
/*========================================================*/
this.clearCanvas = function(){
this.ctx.globalCompositeOperation = 'source-over';
this.ctx.clearRect(0,0,this.cw,this.ch);
this.ctx.globalCompositeOperation = 'lighter';
};
/*========================================================*/
/* Animation Loop
/*========================================================*/
this.loop = function(){
var loopIt = function(){
requestAnimationFrame(loopIt, _this.c);
_this.clearCanvas();
_this.createParticles();
_this.updateLoader();
_this.updateParticles();
_this.renderLoader();
_this.renderParticles();
};
loopIt();
};
};
/*========================================================*/
/* Check Canvas Support
/*========================================================*/
var isCanvasSupported = function(){
var elem = document.createElement('canvas');
return !!(elem.getContext && elem.getContext('2d'));
};
/*========================================================*/
/* Setup requestAnimationFrame
/*========================================================*/
var setupRAF = function(){
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x){
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
};
if(!window.requestAnimationFrame){
window.requestAnimationFrame = function(callback, element){
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall);
lastTime = currTime + timeToCall;
return id;
};
};
if (!window.cancelAnimationFrame){
window.cancelAnimationFrame = function(id){
clearTimeout(id);
};
};
};
/*========================================================*/
/* Define Canvas and Initialize
/*========================================================*/
if(isCanvasSupported){
var c = document.createElement('canvas');
c.width = 1400;
c.height = 100;
var cw = c.width;
var ch = c.height;
document.body.appendChild(c);
var cl = new lightLoader(c, cw, ch);
setupRAF();
cl.init();
}
</script>
</div>
</body>
</html>
from flask import Flask, render_template, url_for, request
app = Flask(__name__, template_folder='templates')
@app.route('/', methods=['GET', 'POST'])
def hello():
if request.method == 'POST':
if len(request.form['left']) != 0 and len(request.form['right']) != 0:
a = request.form['left']
b = request.form['right']
c = float(a) + float(b)
return render_template('h1.html', RESULT=str(c))
return render_template('h1.html')
if __name__ == '__main__':
app.run(debug=True)
我曾经跨过山和大海,也穿过人山人海,我曾经拥有着的一切,转眼都飘散如烟,我曾经失落失望失掉所有方向,直到看见平凡才是唯一的答案。
——韩寒《平凡之路》