手写网页扫雷之HTML部分
2024-10-09 04:25:08
<!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>
最新文章
- 【荐】PHP操作MongoDB GridFS 存储文件，如图片文件
- 自定义NSLog无时间
- win7系统中ftp服务器搭建方法(多图)
- DataTable.select() 返回 DataTable
- 【转】C#异步编程及其同步机制
- iOS Core Animation学习总结(1)--CALayer常用属性
- 外部主机连接mysql服务器延时严重问题
- spring cloud+docker 简单说一说
- ajax中基本参数应用
- Oracle查询和过滤重复数据
- open（）函数 linux中open函数使用
- html5页面调用手机打电话功能
- ubuntu系统更新源
- React中的“双向绑定”
- #微码分享#AES算法的C++包装类
- Observer观察者设计模式
- C++中模板单例的跨SO（DLL）问题：RTTI，typeid，static，单例
- vue + ElementUI 表格筛选框的高度设置，超出一定高度，显示滚动条
- JavaScript 巧学巧用
- PHP serialize 和 JSON 解析与区别