<!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. 王玉兰201771010128《面象对象程序设计（Java）》第九周学习总结

    第一部分:理论基础部分总结: 一:(1)异常:在程序的执行过程中所发生的异常事件,它中断指令的正常执行. 常见的几种错误:A:用户输入错误:B:设备错误;硬件出错:C:物理限制:磁盘满了,可用存储空间 ...

  2. Liquibase使用小结

    简介 Liquibase是一个用于跟踪.管理和应用数据库变化的开源数据库重构工具.它将所有数据库的变化保存在XML文件中,便于版本控制和项目部署升级.在快速搭建项目的JHipster框架中集成了该工具 ...

  3. Spring全家桶——SpringBoot之AOP详解

    Spring全家桶--SpringBoot之AOP详解 面向方面编程(AOP)通过提供另一种思考程序结构的方式来补充面向对象编程(OOP). OOP中模块化的关键单元是类,而在AOP中,模块化单元是方 ...

  4. Mysql-NULL转数字

    最近做了一个学生成绩表,其中遇到一个小问题 需要统计个门科目的平均成绩,在统计到高等数学时,因为高数没有人考,在成绩表中根本不存在的分数,但是在课程表存在高数科目. 当这两个表内联然后统计分数,这样会 ...

  5. Map.Entry的作用

    一般情况下,要输出Map中的key 和 value 是先得到key的集合,然后再迭代(循环)由每个key得到每个value 而Entry可以一次性获得这两个值 Set set = map.keySet ...

  6. 极客手中的利器Electron

    作为一个前端开发人员,你可能已经听说过Electron了,你知道VS Code是基于这个技术开发的.不但VS Code, 目前一些大热的软件:飞书.Slack.WhatsApp都是基于这个技术开发的. ...

  7. WebStorm 2019.3.1 破解 永久使用 亲测100%成功

    声明:本教程 WebStorm 破解补丁.激活码均收集于网络,请勿商用,仅供个人学习使用,如有侵权,请联系作者删除. 前言 今天问公司前端的美眉,你的激活码哪里来的,她说淘宝买的,我说给我用一下,当时 ...

  8. 【C++】表达式中各类数值型数据间的混合运算

    注意:以下内容摘自文献[1],修改了部分内容. 1.运算中各类型数据转换方向如下: 高 double    ←  float   ↑  ↑     | long     | ↑     | unsig ...

  9. [工具-008] C#邮件发送系统

    邮件发送系统很多,但是我这边给大家展示下我最近开发的一款邮件发送系统,有参照网上的一个兄弟的界面,进行了升级,界面如下. 从界面上我们可以看到了该邮件系统有如下功能: 1)服务器的设置 2)发件人的设 ...

  10. StackOverflow 创始人关于如何高效编程的清单.md

    这是 StackOverflow 联合创始人 Jeff Atwood 注释的十戒.程序员普遍有很强的自尊心,都应该看看本文,打印下来时刻提醒自己. "无我编程"发生在开发阶段,表现 ...