<!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. MySQL的转义字符“\”

    \0    一个ASCII  0  (NUL)字符.    \n    一个新行符.    \t    一个定位符.    \r    一个回车符.    \b    一个退格符.    \'    ...

  2. Java Web之路一：过滤器（Filter）

    一.过滤器(Filter)简介 过滤器是对web资源进行拦截,做一些处理后再交给下一个过滤器或Servlet处理,主要可以拦截request和response 过滤器是以一种组件的形式与web程序绑定 ...

  3. 洛谷P2765 魔术球问题

    题目链接:https://www.luogu.org/problemnew/show/P2765 知识点: 最大流 解题思路: 本题所有边的容量均为 \(1\). 从 \(1\) 开始加入数字,将这个 ...

  4. 蓝桥杯 试题 算法提高 宰羊 DP解决

    问题描述 炫炫回了内蒙,肯定要吃羊肉啦,所有他家要宰羊吃. 炫炫家有N只羊,羊圈排成一排,标号1~N.炫炫每天吃掉一只羊(这食量!其实是放生啦),吃掉的羊的邻居会以为它被放生了,然后又会告诉他们的邻居 ...

  5. sklearn学习：为什么roc_auc_score()和auc()有不同的结果？

    为什么roc_auc_score()和auc()有不同的结果? auc():计算ROC曲线下的面积.即图中的area roc_auc_score():计算AUC的值,即输出的AUC 最佳答案 AUC并 ...

  6. JS 写逻辑判断，不要只知道用 if-else 和 switch

    我们在编写 JS 代码时,经常会遇到逻辑判断复杂的情况.一般情况下,可以用 if/else 或 switch 来实现多个条件判断,但会出现一个问题:随着逻辑复杂度的增加,代码中的 if/else 和 ...

  7. 如何使用git命令行上传项目到github

    第一步:我们需要先创建一个本地的版本库(其实也就是一个文件夹). 你可以直接右击新建文件夹,也可以右击打开Git bash命令行窗口通过命令来创建. 现在我通过命令行在桌面新建一个TEST文件夹(你也 ...

  8. Android_存储之SharedPreferences

    一.概述 SharedPreferences是一种轻量级的数据存储方式,采用键值对的存储方式. SharedPreferences只能存储少量数据,大量数据不能使用该方式存储,支持存储的数据类型有bo ...

  9. pandas 小技巧

    1.找出某个字段包含某字符串的行: my_df[my_df['col_B'].str.contains('大连') > 0]或者 my_df[my_df['col_B'].apply(lambd ...

  10. 【asp.net core 系列】 1 带你了解一下asp.net core

    0. 前言 这是一个新的系列,名字是<ASP.NET Core 入门到实战>.这个系列主讲ASP.NET Core MVC,辅助一些前端的基础知识(能用来实现我们需要的即可,并非主讲).同 ...