<!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. javascript 页面各种高度宽度

    http://www.jb51.net/article/19844.htm js获取浏览器高度和宽度值,尽量的考虑了多浏览器. 图片 IE中: document.body.clientWidth == ...

  2. tomcat启动失败怎么回事？

    1.系统环境没有配置好 2.web.xml文件里有错误拼写

  3. 换个角度学习ASP.NET Core中间件

    中间件真面目 关于ASP.NET Core中间件是啥,简单一句话描述就是:用来处理HTTP请求和响应的一段逻辑,并且可以决定是否把请求传递到管道中的下一个中间件! 上面只是概念上的一种文字描述,那问题 ...

  4. python_serial

    serial python中pyserial模块使用方法,pyserial模块封装了对串口的访问. 在支持的平台上有统一的接口. 通过python属性访问串口设置. 支持不同的字节大小.停止位.校验位 ...

  5. Maven——pom.xml文件报错：Missing artifact:jar包

    原因:该错误原因为maven库中jar包无法更新 解决方法:找到maven库中对应的jar包路径,删除文件夹中的红框中的三个文件

  6. Magicodes.IE 2.2发布

    Magicodes.IE 导入导出通用库,支持Dto导入导出以及动态导出,支持Excel.Word.Pdf.Csv和Html.已加入NCC开源组织. Magicodes.IE 2.0发布 Magico ...

  7. 重磅！阿里P8费心整理Netty实战+指南+项目白皮书PDF，总计1.08G

    前言 Netty是一款用于快速开发高性能的网络应用程序的Java框架.它封装了网络编程的复杂性,使网络编程和Web技术的最新进展能够被比以往更广泛的开发人员接触到. Netty不只是一个接口和类的集合 ...

  8. redis 缓存穿透，缓存雪崩，缓存击穿

    1.缓存穿透:缓存穿透是指查询一个不存在的数据,由于缓存是不命中,将去查询数据库,但是数据库也无此记录,这将导致这个不存在的数据每次请求都要到存储层去查询,失去了缓存的意义.在流量大时,可能DB就挂掉 ...

  9. SET运算符

    -- SET操作符: -- union   联合去重 两个表的字段个数和类型都得一样,起别名 应该在第一个表上操作,,排序按照第一列从小到大来排的 select employee_id, depart ...

  10. windows下grunt的快速入门

    1.认识grunt  grunt是什么:他是一套前端自动化工具,是一个基于nodejs的命令行工具.(Grunt和Grunt插件是通过npm  安装并管理的,所以首先要安装nodejs). grunt ...