<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>扫雷</title>

    <link rel="stylesheet" href="css/index.css">

    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1868100_q86jm05u9m.css">

    <script src="js/vue.js"></script>

</head>

<body>

    <div id="ui">

        <div :style="saoleiStyle" id="saolei">

            <div :id="'box'+box" v-for="box in num" @click='openMenu(box)' class="box">

                <template v-if="box == bomb" v-for="bomb in bombs">

                    <i :id="'Bomb'+box" class="iconfont icon-zhadan" style="display: none;"></i>

                    <i :id="'flag'+box" class="icon" style="display: none"></i>

                    <ul :id="box" class="menu">

                        <li @click.stop="mark(box,$event)">标记</li>

                        <li @click.stop="openBox(box)">扫雷</li>

                        <li @click.stop="closeMenu(box)">取消</li>

                    </ul>

                </template>

                <template v-else>

                    <span :id="'around'+box" style="display: none;"></span>

                    <i :id="'flag'+box" class="icon" style="display: none"></i>

                    <ul :id="box" class="menu">

                        <li @click.stop="mark(box,$event)">标记</li>

                        <li @click.stop="openBox(box)">扫雷</li>

                        <li @click.stop="closeMenu(box)">取消</li>

                    </ul>

                </template>

            </div>

        </div>

        <div id="settings" @click="dspl">

            <button @click="mid" v-show="startBtn">开始</button>

            <button @click="restart" v-show="restartBtn">重玩</button>

        </div>

    </div>

</body>

<script src="js/index.js"></script>

</html>

手写网页扫雷之HTML部分的更多相关文章

  1. 手写网页扫雷之js部分(vue)

    var vm = new Vue({ el:"#ui", data(){ return{ num:0, saoleiStyle:{ width: "0px", ...

  2. 手写网页扫雷之css部分

    #ui{ text-align: center; } #saolei{ width: 500px; height: 500px; border: 1px solid #456345; margin: ...

  3. 使用神经网络来识别手写数字【译】（三）- 用Python代码实现

    实现我们分类数字的网络 好,让我们使用随机梯度下降和 MNIST训练数据来写一个程序来学习怎样识别手写数字. 我们用Python (2.7) 来实现.只有 74 行代码!我们需要的第一个东西是 MNI ...

  4. 手把手集成web端手写公式功能

    何为手写公式,很简单,就是在网页上可以写出数学公式,并能够生成Latex格式的字符串.废话不多说,直接走正题. 一.首先大家可以先去官网了解一下myscript这个插件 官方网站:https://de ...

  5. MNIST手写数字数据库

    手写数字库很容易建立,但是总会很浪费时间.Google实验室的Corinna Cortes和纽约大学柯朗研究所的Yann LeCun建有一个手写数字数据库,训练库有60,000张手写数字图像,测试库有 ...

  6. TensorFlow实现Softmax Regression识别手写数字中"TimeoutError: [WinError 10060] 由于连接方在一段时间后没有正确答复或连接的主机没有反应，连接尝试失败”问题

    出现问题: 在使用TensorFlow实现MNIST手写数字识别时,出现"TimeoutError: [WinError 10060] 由于连接方在一段时间后没有正确答复或连接的主机没有反应 ...

  7. HTTP网络协议与手写Web服务容器

    Http协议 1.深入概念 Http:HyperText Transfer Protocol,即是超文本传输协议. 2.浅出概念(使用浏览器访问服务器端网页时需要遵循的一系列规则) Http:将各种不 ...

  8. Atitit s2018.2 s2 doc list on home ntpc.docx  \Atiitt uke制度体系 法律 法规 规章 条例 国王诏书.docx \Atiitt 手写文字识别 讯飞科大 语音云.docx \Atitit 代码托管与虚拟主机.docx \Atitit 企业文化 每日心灵 鸡汤 值班 发布.docx \Atitit 几大研发体系对比 Stage-Gat

    Atitit s2018.2 s2 doc list on home ntpc.docx \Atiitt uke制度体系  法律 法规 规章 条例 国王诏书.docx \Atiitt 手写文字识别   ...

  9. 【教程】手写简易web服务器

    package com.littlepage.testjdbc; import java.io.BufferedReader; import java.io.FileReader; import ja ...

随机推荐

  1. jsp 循环数字

    <c:forEach var ="i" begin="1" end="${homeexamque.optionNum}" step=& ...

  2. WXML属性一览表

    id属性 <view id="xxx"></view> class属性 <view class="xxx"></vie ...

  3. 欧拉函数 BZOJ2705

    2705: [SDOI2012]Longge的问题 Time Limit: 3 Sec  Memory Limit: 128 MBSubmit: 3154  Solved: 1968[Submit][ ...

  4. 【Redis】Set常见应用场景

    微信抽奖小程序 >点击参与抽奖加入集合 SADD key {userID} >查看参与抽奖所有用户 SMEMBERS key >抽取count名中奖者 SRANGEMEMBER ke ...

  5. 【MySQL】MySQL5.7等以上版本在Windows上的配置

    由于本人是win10系统,所以说下win10系统以管理员身份打开cmd 1. 配置环境变量 我这边是安装在了C:\Program Files\MySQL\MySQL Server 5.7在path中加 ...

  6. （STL初步）映射：map

    map就是从键(key)到值(value)的映射. 因为重载了[]运算符,map像是数组的”高级版“. 例如,map<string,int>month_name 表示:”月份名字到月份编号 ...

  7. web项目——javax.servlet.ServletException: Circular view path [registerForm]

    报错: 控制台输出: 三月 21, 2019 10:12:32 上午 org.springframework.web.servlet.PageNotFound noHandlerFound 警告: N ...

  8. [不得不知道系列]Java线程面试你不得不知道的基础知识一

    Java内存管理面试指南一 Java基础面试指南一 Java基础面试指南二 Java基础面试指南三 Java基础面试指南四 Java线程面试指南一 Java线程面试指南二 Redis面试指南一 Kaf ...

  9. 痞子衡嵌入式：MCUBootUtility v2.3发布，这次不再放过任何一款Flash

    -- 痞子衡的 NXP-MCUBootUtility 开源项目自2018年8月27日第一笔提交至今已有21个月,目前累计代码已近50000行.相信这个工具为大家开发 i.MXRT 项目提供了一些便利, ...

  10. [SD心灵鸡汤]001.每月一则 - 2015.05

    1.既然我的父母不能带给我荣耀,那我要做的就只是带给我的子女荣耀,而不是无聊的嫉妒眼红别人. 2.就人生游戏讲,男人是女人的玩物,女人是魔鬼的玩物.就爱情而言,女人是专业的,男人是业余的. 3.快乐使 ...