<!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. 第三方动画库 Lottie嵌入记录

    预览网址 https://lottiefiles.com/preview   在Podfile文件中加入 pod 'lottie-ios’ pod install 把 lottie-ios加入到项目中 ...

  2. 四、$jQuery

    1.你觉得jQuery或zepto源码有哪些写的好的地方 jquery源码封装在一个匿名函数的自执行环境中,有助于防止变量的全局污染,然后通过传入window对象参数,可以使window对象作为局部变 ...

  3. java三个时间类常用法

    1.System.currentTimeMillis();    获取当前时间戳    System的获取时间戳的方法,只能获取不能进行其他的操作,简单的毫秒计算可以使用 2.Date(),Date( ...

  4. ELK-日志管理平台

    elk日志收集工具 1.日志在工作当中的重要性             1 分析日志的意义: 2 1.分析日志监控系统运行的状态 3 2.分析日志来定位程序的bug 4 3.分析日志监控网站访问流量 ...

  5. Zabbix漏洞学习

    Zabbix介绍 zabbix([`zæbiks])是一个基于WEB界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案. zabbix能监视各种网络参数,保证服务器系统的安全运营:并提供灵 ...

  6. 解决pip._vendor.urllib3.exceptions.ReadTimeoutError: HTTPSConnectionPool(host='files.pythonhosted.org', port=443): Read timed out.问题

    国内的其他镜像源清华大学 https://pypi.tuna.tsinghua.edu.cn/simple/阿里云 http://mirrors.aliyun.com/pypi/simple/中国科技 ...

  7. Rocket - debug - TLDebugModuleInner - HARTINFO

    https://mp.weixin.qq.com/s/9GjZAax0SZhRqLne16jn-w 简单介绍TLDebugModuleInner中HARTINFO寄存器的实现. 1. HARTINFO ...

  8. Rocket - diplomacy - Node相关类

    https://mp.weixin.qq.com/s/BvK3He3GWon8ywG8Jdmcsg   介绍Node相关的类.   ​​   1. BaseNode   BaseNode是所有节点类的 ...

  9. Java并发编程 (九) 线程调度-线程池

    个人博客网:https://wushaopei.github.io/    (你想要这里多有) 声明:实际上,在开发中并不会普遍的使用Thread,因为它具有一些弊端,对并发性能的影响比较大,如下: ...

  10. Linux（六）文件系统

    个人博客网:https://wushaopei.github.io/    (你想要这里多有) 一.根目录内容 1.概述 Linux系统中只有一个文件系统,以“/”作为根目录,从根目录出发可以找到任何 ...