套路开场
连着写了三天的selenium,得换换胃口了,毕竟selenium的关注度不是很高,感觉看的人寥寥无几。虽然是把公众号当做博客,进行知识的记录与分享,但写了文章没人看也是惆怅啊....
本来打算今天休息一天的,可是想想还是明天停更一天,更新公众号22天了,明天算是第一天断更。每天回来学习知识,然后再写公众号,熬得身体有些受不了,所以以后每周还是给自己放一天假吧。
说说今天的内容
web端一直是短板,最近在恶补,所以今天就想着拿Flask配合jQuery写点js玩玩,css懒得写就用bootstrap的模板吧。写什么内容呢?看标题就一目了然了,猜数字!
先来看看效果:
为什么会想到这个游戏呢?老婆之前给孩子买了一套类似的卡片游戏,但是被这俩不听话的小兔崽子给撕坏了,所以就做个网页版的,拿手机跟他们玩吧。至于为什么叫聪明的奥特曼?没办法,他俩喜欢奥特曼呗...
看着只有9个数字,但让我一次性猜对还真不能保证次次稳赢,毕竟戴眼镜的眼神儿不好,哈哈。所以悄悄留个console.log:
为了避免他俩一直做不对给我闹腾,所以再来一次的时候不会刷新序列,只要按着之前的记忆继续往下走,多点几次肯定是可以赢的。
当然刷新浏览器,即可重置新序列去开始游戏了...
简单说说代码
首先说说Flask内容:
# -*- coding: utf-8 -*-
# @Author : 王翔
# @JianShu : 清风Python
# @Date : 2019/6/20 22:24
# @Software : PyCharm
# @version :Python 3.7.3
# @File : app.py
from flask import Flask, render_template
import random
app = Flask(__name__)
@app.route('/')
def index():
number_list = random.sample(list(range(1, 10)), 9)
return render_template('index.html', num_list=number_list)
if __name__ == '__main__':
app.run(host='0.0.0.0')
Flask只负责创建一个随机数,然后去渲染模板并传参,要不是为了flask的httpserver,这东西完全可以考虑用纯前台搞....
再说说html吧:
<div class="container">
<div>
<h2 class="clearfix text-center">聪明的奥特曼</h2>
</div>
<button class="control btn btn-primary btn-lg btn-block">点击开始游戏</button>
{% for num in num_list%}
<div class="col-xs-4 card">
<div id="{{loop.index0}}" class="box" hidden> {{num}}</div>
</div>
{%endfor%}
</div>
用jinjia2创建九宫格,然后用jQuery,控制开始游戏button的disable效果,并设置setInterval和mousedown的监听事件。完美.....
如果大家对这个小项目感兴趣,可以从我的github上下载KingUranus/FlaskTests
The End
明天就不更新了,大半个月了,明晚放松一天,看是开黑呢,还是撸串呢?haha ....
今天的内容就到这里,如果觉得有帮助,欢迎将文章或者我的公众号【清风Python】分享给更多喜欢python的人。最近关注人数基本零增长,心塞啊....