随笔4

<!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)

我曾经跨过山和大海,也穿过人山人海,我曾经拥有着的一切,转眼都飘散如烟,我曾经失落失望失掉所有方向,直到看见平凡才是唯一的答案。
——韩寒《平凡之路》

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值