说说今天的内容
web端一直是短板，最近在恶补，所以今天就想着拿Flask配合jQuery写点js玩玩，css懒得写就用bootstrap的模板吧。写什么内容呢？看标题就一目了然了，猜数字！
先来看看效果：
网络异常，图片无法展示
|
猜数字游戏展示
为什么会想到这个游戏呢？老婆之前给孩子买了一套类似的卡片游戏，但是被这俩不听话的小兔崽子给撕坏了，所以就做个网页版的，拿手机跟他们玩吧。至于为什么叫聪明的奥特曼？没办法，他俩喜欢奥特曼呗...
看着只有9个数字，但让我一次性猜对还真不能保证次次稳赢，毕竟戴眼镜的眼神儿不好，哈哈。所以悄悄留个console.log：
网络异常，图片无法展示
|
悄悄作弊
为了避免他俩一直做不对给我闹腾，所以再来一次的时候不会刷新序列，只要按着之前的记忆继续往下走，多点几次肯定是可以赢的。
网络异常，图片无法展示
|
看着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
