HTML实现 扫雷游戏
前言：
游戏起源与发展
-
扫雷游戏的雏形可追溯到 1973 年的 “方块（cube）” 游戏，后经改编出现了 “rlogic” 游戏，玩家需为指挥中心探出安全路线避开地雷。在此基础上，开发者汤姆・安德森编写出了扫雷游戏的雏形.
-
1992 年，微软在 windows3.1 系统中首次预装了《扫雷》，将其作为训练用户鼠标操作能力的软件.
-
虽从 windows8 开始，系统不再默认安装扫雷游戏，但它依旧凭借自身魅力受到众多玩家喜爱，甚至有玩家不断刷新时间记录来挑战自我.
游戏规则
-
胜利条件：找出所有地雷且不踩到地雷，或者在规定时间内尽可能多地找出地雷.
-
失败条件：翻开了埋有地雷的方块.
-
基础操作：左键点击未打开的格子可将其打开；右键点击可标雷 / 取消标雷；双击（左右键同时点击）已打开的数字，若该数字周围标的雷数量等于该数字，会同时打开该数字周围剩余所有格子.
游戏界面及信息
-
剩余雷数：显示在游戏界面左上角，为总雷数减去已标雷数，可据此了解雷区剩余雷的大致情况.
-
计时器：位于右上角，从本局游戏第一次操作为 0.001 秒开始计时，可用于记录游戏所用时间及玩家挑战自我时作为参考
技巧与策略
-
数字推理：数字代表其周围 8 个方格中的雷数，若数字为 0，游戏会自动打开周围所有格子；若一个方格周围已标记的雷数等于该方格上的数字，那么其周围未标记的方格都可安全打开.
-
常见阵型判断：如 “111”“22”“112” 等常见数字组合，可依据特定规律快速判断雷的位置.
-
边缘优先：可先从雷区边缘开始点击，因为边缘方格的周围方格数量相对较少，更容易判断雷的位置，降低推理难度7.
-
标记问号：当无法确定方格是否有雷时，可右键点击两次标记问号，后续再根据其他信息进一步判断.
游戏变化与创新
-
在线多人模式：如《一起来扫雷》，玩家可与世界各地的玩家合作或竞争，共同清除地图上的地雷，还能积累积分兑换装饰，装扮游戏界面.
-
VR 版扫雷：扫雷 VR 将平面的扫雷游戏搬到了 3D 场景中，增加了游戏的趣味性和沉浸感.
-
融合其他元素：《扫雷俄罗斯方块》结合了扫雷和俄罗斯方块的元素，雷区不断向上生长，找到所有地雷时行才会被清除
以上内容由ai生成
正文：
1.自己实现一个扫雷游戏
2.使用HTML实现
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>扫雷游戏</title><linkhref="https://fonts.googleapis.com/css?family=Space+Mono:400,700"rel="stylesheet"/><linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"/><style>@charset "UTF-8";*,*:before,*:after {box-sizing: inherit;}html {box-sizing: border-box;}body {text-align: center;color: #333;padding: 20px 20px 100px;background-color: #efefef;font-family: 'Space Mono', monospace;}h1 {margin: 0 0 32px;}p {font-size: 1em;line-height: 1.25em;}a {color: inherit;}img {height: auto;max-width: 100%;}.wrap {text-align: center;position: relative;display: inline-block;}.legend {font-size: 14px;margin: 0 auto 32px;}.legend h4,.legend p {margin: 0 0 6px;}.legend code {background: #e3e3e3;}.legend code .key {color: #ec433c;}.legend code .click {color: #2a48ec;}.top {border: 6px solid #e3e3e3;background-color: #e3e3e3;}#scoreboard {display: flex;padding-bottom: 12px;justify-content: space-between;}#scoreboard .select-wrap {font-weight: 700;vertical-align: top;display: inline-block;}#scoreboard .select-wrap select {margin: 0;height: 36px;border-radius: 0;border-width: 3px;border-style: solid;background-color: #d1d1d1;border-color: white #9e9e9e #9e9e9e white;}#scoreboard .select-wrap select:hover,#scoreboard .select-wrap select:focus {backgroudn-color: #ebebeb;}#scoreboard .reset {padding: 0 4px;font-size: 24px;cursor: pointer;font-weight: 700;line-height: 30px;border-width: 3px;border-style: solid;background-color: #d1d1d1;border-color: white #9e9e9e #9e9e9e white;}#scoreboard .reset:hover,#scoreboard .reset:focus {outline: none;background-color: #ebebeb;}#scoreboard .counter {padding: 0 4px;color: #ec433c;border: 3px inset;line-height: 30px;letter-spacing: 0.08em;display: inline-block;background: #333;text-shadow: 0 0 2px #ec433c;}#scoreboard .counter:first-of-type {margin-right: 20px;}#scoreboard .counter:last-of-type {margin-left: 20px;}#grid {margin: 0 auto;position: relative;display: inline-block;}#grid ::-moz-selection {background-color: transparent;}#grid ::selection {background-color: transparent;}#grid.disabled .cell {pointer-events: none;}#grid.disabled .status-indicator {top: 50%;left: 50%;z-index: 11;width: 8vw;height: 8vw;font-size: 4vw;cursor: pointer;line-height: 8vw;position: absolute;border-radius: 50%;pointer-events: auto;background-color: #d1d1d1;transform: translate(-50%, -50%);border: 1px solid rgba(51, 51, 51, 0.25);}#grid.disabled .status-indicator::after {content: '';}#grid.disabled.win .status-indicator::after {content: '😎';}#grid.disabled.lose .status-indicator::after {content: '☹️';}#grid .row {display: flex;}#grid .cell {cursor: pointer;width: 24px;height: 24px;position: relative;background-color: #d1d1d1;border-width: 3px;border-style: solid;border-color: white #9e9e9e #9e9e9e white;}#grid .cell i {left: 0;bottom: 0;margin: 0;width: 100%;font-size: 14px;font-weight: 700;font-style: normal;position: absolute;line-height: 24px;}#grid .cell::before {top: 0;left: 0;right: 0;bottom: 0;z-index: 1;content: '';position: absolute;background-color: #d1d1d1;}#grid .cell::after {top: 50%;left: 50%;content: '';position: absolute;transform: translate(-50%, -50%);}#grid .cell:hover::before {background-color: #ebebeb;}#grid .cell.revealed {border: 1px solid #b8b8b8;}#grid .cell.revealed::before {display: none;}#grid .cell.revealed .flag {display: none;}#grid .cell .flag {top: 50%;left: 50%;z-index: 1;width: 10px;height: 4px;position: absolute;border-style: solid;border-width: 4px 0 4px 10px;transform: translate(-50%, -50%);border-color: transparent transparent transparent #ec433c;}#grid .cell.maybe .flag {border-color: transparent transparent transparent #d7af42;}#grid .cell.mine {background-color: #ec433c;}#grid .cell.mine::after {border-radius: 50%;width: 12px;height: 12px;background-color: #333;}#grid .cell.incorrect .flag::before,#grid .cell.incorrect .flag::after {top: 50%;z-index: 1;left: -13px;height: 2px;width: 16px;content: '';position: absolute;background-color: black;}#grid .cell.incorrect .flag::before {transform: rotate(-45deg);}#grid .cell.incorrect .flag::after {transform: rotate(45deg);}#grid .cell.mousedown {border: none;}#leaderboard {margin-top: 20px;text-align: center;}#leaderboard h4 {margin: 0 0 10px;}#leaderboard ul {margin: 0;padding: 10px;display: inline-block;background-color: rgba(209, 209, 209, 0.5);}#leaderboard ul li {padding: 2px;list-style: none;}#leaderboard ul li span {font-weight: 900;text-transform: capitalize;}#leaderboard ul li.highlight {background-color: #fef178;}#leaderboard button {border: none;outline: none;cursor: pointer;font-size: 12px;font-weight: 700;-webkit-appearance: none;-moz-appearance: none;appearance: none;background: none;text-decoration: underline;}.cell.white {color: #fff;}.cell.gray-light {color: #efefef;}.cell.gray-mid {color: #e3e3e3;}.cell.gray {color: #d1d1d1;}.cell.gray-dark {color: #808080;}.cell.black {color: #333;}.cell.red {color: #ec433c;}.cell.maroon {color: #a6070f;}.cell.purple {color: #a42887;}.cell.yellow {color: #d7af42;}.cell.yellow-light {color: #fef178;}.cell.blue {color: #2a48ec;}.cell.blue-dark {color: #233db7;}.cell.green {color: #2bb13d;}.cell.turquoise {color: #28907d;}#devbox {top: 10px;right: 10px;position: fixed;text-align: left;max-width: 300px;color: #fff;background-color: #333;}#devbox p {margin: 0;font-size: 12px;padding: 10px 20px;}#devbox p + p {padding-top: 5px;}</style></head><body><header class="site-header" role="banner"><div class="wrap"><h1>扫雷</h1><div class="legend"><p><strong>插旗:</strong><code><span class="key">alt</span>+<span class="click">click（单击）</span></code></p></div></div></header><main class="site-main" role="main"><div class="wrap"><div id="board"><div class="top"><div id="scoreboard"><div id="minecounter" class="counter"></div><div><div class="select-wrap"><select name="level" id="level"><option value="beginner">初级</option><option value="intermediate">中级</option><option value="expert" selected>高级</option></select></div><button class="reset">🙂</button></div><div id="timer" class="counter"></div></div><div id="grid"></div></div><div class="bottom"></div></div></div></main><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script>$(document).ready(function () {var $body, $document, $board, $grid, timer, time, unstarted;function _init() {// Cache some common DOM queries$document = $(document);$body = $('body');$body.addClass('loaded');// Start Minesweeper$board = $('#board');$grid = $('#grid');var $timer = $('#timer');var $mineCounter = $('#minecounter');var $levelSelect = $('#level');var levels = {beginner: '9x9x10',intermediate: '16x16x44',expert: '16x30x99',};var level = $levelSelect.val();var levelParams,rows,$rows,columns,cellCount,mines,freeCells,mineTally,pauseTime,beginnerHighScore = 999,intermediateHighScore = 999,expertHighScore = 999;var countColors = {0: '',1: 'blue',2: 'green',3: 'red',4: 'blue-dark',5: 'maroon',6: 'turquoise',7: 'purple',8: 'gray-dark',};time = 0;timer = false;unstarted = true;var statusIndicator = '<div class="status-indicator"></div>';// Check for existing high score// if (localStorage.getItem('beginner')) {// beginnerHighScore = localStorage.getItem('beginner');// populateHighScore('beginner', localStorage.getItem('beginner'));// }// if (localStorage.getItem('intermediate')) {// intermediateHighScore = localStorage.getItem('intermediate');// populateHighScore('intermediate', localStorage.getItem('intermediate'));// }// if (localStorage.getItem('expert')) {// expertHighScore = localStorage.getItem('expert');// populateHighScore('expert', localStorage.getItem('expert'));// }function setLevel(level) {levelParams = levels[level];rows = parseInt(levelParams.split('x')[0]);columns = parseInt(levelParams.split('x')[1]);cellCount = rows * columns;mines = levelParams.split('x')[2];freeCells = cellCount - mines;}function setBoard(level) {// Clear Grid$grid.html(statusIndicator).removeClass('disabled lose win').addClass('unstarted');// Set Up GridsetLevel(level);// Set unstartedunstarted = true;// Build Rowsfor (r = 0; r < rows; r++) {var newCells = '';// Build Cellsfor (c = 0; c < columns; c++) {newCells += '<div class="cell"></div>';}$grid.append('<div class="row">' + newCells + '</div>');}// Set MinecountermineTally = mines;$mineCounter.html(mineTally);// Set TimerresetTimer();}// Set initiallysetBoard(level);// Set on reset$('html').on('mousedown', '.reset', function () {$(this).text('😮');}).on('mouseup', '.reset', function () {$(this).text('🙂');stopTimer();level = $levelSelect.val();setBoard(level);});// Set when clicking status indicator$('html').on('click', '.status-indicator', function () {level = $levelSelect.val();setBoard(level);});// Set on level change$levelSelect.on('change', function () {stopTimer();resetTimer();level = $levelSelect.val();setBoard(level);});// Lay Minesfunction layMines(level, clickedCellIndex) {$rows = $('.row');var freeCells = $('.cell');var takenCells = [clickedCellIndex];// Lay Minesfor (m = 0; m < mines; m++) {var mineCell = Math.floor(Math.random() * Math.floor(freeCells.length));// If it happens to be the clicked cell, skip itif ($.inArray(mineCell, takenCells) > -1) {m--;continue;}takenCells.push(mineCell);$(freeCells[mineCell]).addClass('mine');}// Identify Cell Numbersvar $cells = $('.cell');for (c = 0; c < $cells.length; c++) {var $cell = $($cells[c]);$cell.attr('data-cell', c);// Skip if it's a mineif ($cell.is('.mine')) {continue;}var mineCount = 0;var rowPos = Math.floor(c / columns);var $currentRow = $cell.closest('.row');$currentRow.attr('data-row', rowPos);var rowCells = $currentRow.find('.cell');var cellPos = c % columns;if ($(rowCells[cellPos - 1]).is('.mine')) {mineCount++;}if ($(rowCells[cellPos + 1]).is('.mine')) {mineCount++;}if (rowPos > 0) {var prevRowCells = $($rows[rowPos - 1]).find('.cell');if ($(prevRowCells[cellPos - 1]).is('.mine')) {mineCount++;}if ($(prevRowCells[cellPos]).is('.mine')) {mineCount++;}if ($(prevRowCells[cellPos + 1]).is('.mine')) {mineCount++;}}if (rowPos < rows - 1) {var nextRowCells = $($rows[rowPos + 1]).find('.cell');if ($(nextRowCells[cellPos - 1]).is('.mine')) {mineCount++;}if ($(nextRowCells[cellPos]).is('.mine')) {mineCount++;}if ($(nextRowCells[cellPos + 1]).is('.mine')) {mineCount++;}}if (mineCount > 0) {$cell.html('<i>' + mineCount + '</i>');// Styling classesvar colorClass = countColors[mineCount];$cell.addClass(colorClass);} else {$cell.addClass('zero');}}}// Click cell to start game$('html').off('click', '#grid.unstarted .cell').on('click', '#grid.unstarted .cell', function (e) {$grid.removeClass('unstarted');if (unstarted && !$(e.target).is('.mine')) {layMines(level, $('.cell').index(this));timer = window.setInterval(startTimer, 1000);unstarted = false;}});// Timer Functionsfunction resetTimer() {$timer.html('000');time = 0;}function startTimer() {time++;if (time < 10) {$timer.html('00' + time);} else if (time > 9 && time < 100) {$timer.html('0' + time);} else {$timer.html(time);}}function stopTimer() {window.clearInterval(timer);}function pauseTimer() {stopTimer();pauseTime = parseInt($('#timer').html());}function unpauseTimer() {time = pauseTime;timer = window.setInterval(startTimer, 1000);pauseTime = false;}// Pause when window loses focus$(window).on('blur', function () {pauseTimer();}).on('focus', function () {if (pauseTime) {unpauseTimer();}});// Check Cellfunction checkCell($cell) {if (!$cell.is('.mine') && !$cell.is('.revealed')) {cellClick($cell, 'reveal');if ($cell.is('.zero')) {$cell.trigger('click');}}}// Clicking on a cellfunction cellClick($cell, action) {// If Flaggingif (action === 'flag' && !$cell.is('.revealed')) {if ($cell.is('.flagged')) {$cell.removeClass('flagged');$cell.addClass('maybe');mineTally++;updateMinecounter(mineTally);} else if ($cell.is('.maybe')) {$cell.removeClass('maybe');var flag = $cell.find('.flag');flag.remove();} else {$cell.addClass('flagged');$cell.append('<span class="flag"></span>');mineTally--;updateMinecounter(mineTally);}// If Revealing} else if (action === 'reveal') {$cell.addClass('revealed');// If it's a mine you lose!if ($cell.is('.mine')) {lose();}statusCheck();} else if (action === 'clear') {if (!$cell.is('.revealed') || $cell.is('.zero')) {return;}clearClick($cell);}}// Update Minecounterfunction updateMinecounter(mineTally) {if (mineTally < 10) {$mineCounter.html('0' + mineTally);} else {$mineCounter.html(mineTally);}}// Clicking on a Zero cellfunction zeroClick($cell) {var cellPos = $cell.prevAll().length;var $currentRow = $cell.closest('.row');var rowPos = parseInt($currentRow.attr('data-row'));var rowCells = $currentRow.find('.cell');checkCell($(rowCells[cellPos - 1]));checkCell($(rowCells[cellPos + 1]));if (rowPos > 0) {var prevRowCells = $($rows[rowPos - 1]).find('.cell');checkCell($(prevRowCells[cellPos - 1]));checkCell($(prevRowCells[cellPos]));checkCell($(prevRowCells[cellPos + 1]));}if (rowPos < rows) {var nextRowCells = $($rows[rowPos + 1]).find('.cell');checkCell($(nextRowCells[cellPos - 1]));checkCell($(nextRowCells[cellPos]));checkCell($(nextRowCells[cellPos + 1]));}}// Clicking on a number to clear free cellsfunction clearClick($cell) {var cellPos = $cell.prevAll().length;var $currentRow = $cell.closest('.row');var rowPos = parseInt($currentRow.attr('data-row'));var rowCells = $currentRow.find('.cell');var adjacentCells = [];var correctClear = true;var adjacentMines = 0;var adjacentFlags = 0;var i;adjacentCells.push($(rowCells[cellPos - 1]));adjacentCells.push($(rowCells[cellPos + 1]));if (rowPos > 0) {var prevRowCells = $($rows[rowPos - 1]).find('.cell');adjacentCells.push($(prevRowCells[cellPos - 1]));adjacentCells.push($(prevRowCells[cellPos]));adjacentCells.push($(prevRowCells[cellPos + 1]));}if (rowPos < rows) {var nextRowCells = $($rows[rowPos + 1]).find('.cell');adjacentCells.push($(nextRowCells[cellPos - 1]));adjacentCells.push($(nextRowCells[cellPos]));adjacentCells.push($(nextRowCells[cellPos + 1]));}for (i = 0; i < adjacentCells.length; i++) {// add to mine countif ($(adjacentCells[i]).is('.mine')) {adjacentMines++;}// add to flag coutif ($(adjacentCells[i]).is('.flagged')) {adjacentFlags++;}}if (adjacentFlags === adjacentMines) {for (i = 0; i < adjacentCells.length; i++) {if ($(adjacentCells[i]).is('.mine')) {if ($(adjacentCells[i]).is('.flagged')) {continue;} else {$(adjacentCells[i]).addClass('revealed');correctClear = false;}} else if ($(adjacentCells[i]).is('.flagged')) {correctClear = false;$(adjacentCells[i]).addClass('incorrect');lose();}}if (correctClear) {for (i = 0; i < adjacentCells.length; i++) {if (!$(adjacentCells[i]).is('.mine')) {if ($(adjacentCells[i]).is('.zero')) {zeroClick($(adjacentCells[i]));}cellClick($(adjacentCells[i]), 'reveal');}}}} else {return;}}// Check statusfunction statusCheck() {if ($('.cell.revealed').length == freeCells) {stopTimer();var winTime = $('#timer').html();$grid.addClass('disabled win');resetHighScore(level, winTime);}}function lose() {$grid.addClass('disabled lose');stopTimer();}// Clicking on a cell$('html').on('click', '.cell', function (e) {e.preventDefault();var action = 'reveal';var $cell = $(this);if (e.altKey || e.which === 3) {action = 'flag';} else if ($cell.is('.revealed') ||(e.which === 1) & (e.which === 3)) {action = 'clear';}if ($cell.is('.flagged') && !e.altKey) {return;}if ($cell.is('.zero')) {zeroClick($cell);}cellClick($cell, action);});// Mouse down on a cell$('html').on('mousedown', '.cell:not(.revealed,.flagged)', function (e) {if (!e.altKey && e.which !== 3) {$(this).addClass('mousedown');}}).on('mouseup mouseleave', '.cell.mousedown', function () {$(this).removeClass('mousedown');});// Scoreboard functionalityfunction resetHighScore(level, winTime) {if (localStorage.getItem(level)) {if (winTime < localStorage.getItem(level)) {localStorage.setItem(level, winTime);populateHighScore(level, winTime, true);}} else {localStorage.setItem(level, winTime);populateHighScore(level, winTime, true);}}function populateHighScore(level, highScore, highlight) {if (!$('#leaderboard').length) {$board.find('.bottom').append('<div id="leaderboard"><h4>High Scores</h4><ul><li class="beginner"></li><li class="intermediate"></li><li class="expert"></li></ul><div><button id="score-reset" class="score-reset">Clear Scores</button></div></div>');}if (highlight === true) {$('#leaderboard .highlight:not(.' + level + ')').removeClass('highlight');$('#leaderboard .' + level).addClass('highlight');}var highScoreDisplay = parseInt(highScore, 10);$('#leaderboard .' + level).html('<span>' + level + '</span>: ' + highScoreDisplay + ' seconds');}function clearScores() {localStorage.clear();$('#leaderboard').remove();}// Clicking on score reset to clear scores$('html').on('click', '#score-reset', clearScores);}_init();});</script></body>
</html>
3.电脑单机就可玩耍
最后：
你今天扫雷了吗？后台回复“扫雷”获取在线连接。
扫雷游戏
相关文章：
HTML实现 扫雷游戏
前言： 游戏起源与发展 扫雷游戏的雏形可追溯到 1973 年的 “方块（cube）” 游戏，后经改编出现了 “rlogic” 游戏，玩家需为指挥中心探出安全路线避开地雷。在此基础上，开发者汤姆・安德森编写出了扫雷游戏的…...
day03（单片机高级）RTOS
目录 RTOS(实时操作系统) 裸机开发模式 轮询方式 前后台（中断方式） 改进（前后台（中断））定时器 裸机进一步优化 裸机的其他问题 RTOS的概念 什么是RTOS 为什么要使用 RTOS RTOS的应用场景 RTOS的…...
【mongodb】社区版8：改变配置bindip和授权
更改配置 sudo systemctl restart mongod (base) root@k8s-master-pfsrv:/home/zhangbin# sudo tail -n 20 /var/log/mongodb/mongod.log 日志感觉是成功了：{"t":{"$date":"2024-11-19T19:57:47.076+08:00"...
泥石流灾害风险评估与模拟丨AI与R语言、ArcGIS、HECRAS融合，提升泥石流灾害风险预测的精度和准确性
目录 第一章 理论基础 第二章 泥石流风险评估工具 第三章 数据准备与因子提取 第四章 泥石流灾害评价 第五章 HECRAS软件的应用 第六章 操作注意事项与模型优化 泥石流灾害的频发与严重后果，已成为全球范围内防灾减灾工作的重大挑战。随着科技的不断进步&…...
一线大厂面试集锦
String 为什么要设计成不可变的 String被设计成不可变的有以下几个原因: 线程安全:由于String是不可变的，多个线程可以同时访问同一个String对象而无需担心数据被修改。这使得String在多线程环境下是线程安全1. 的。 2.缓存Hash值:由于String是不可变的，它的hashcode可以…...
界面控件DevExpress Blazor UI v24.1新版亮点：发布全新文件输入等组件
DevExpress Blazor UI组件使用了C#为Blazor Server和Blazor WebAssembly创建高影响力的用户体验，这个UI自建库提供了一套全面的原生Blazor UI组件（包括Pivot Grid、调度程序、图表、数据编辑器和报表等）。 DevExpress Blazor控件目前已经升级…...
ssm面向品牌会员的在线商城小程序
摘要 随着Internet的发展，人们的日常生活已经离不开网络。未来人们的生活与工作将变得越来越数字化，网络化和电子化。它将是直接管理面向品牌会员的在线商城小程序的最新形式。本小程序是以面向品牌会员的在线商城管理为目标，使用 java技术制…...
Vue 3 自定义插件开发
Vue3 自定义插件开发 插件简介 Vue3 插件是一种能为 Vue 应用添加全局功能的工具。插件可以包含： 全局组件注册全局指令添加全局方法注入全局 mixin 混入向 Vue 应用实例注入属性 插件的基本结构 Vue3 插件应该暴露一个 install 方法，该方法将在插件…...
)
使用最小花费爬楼梯(DP)
给你一个整数数组 cost ，其中 cost[i] 是从楼梯第 i 个台阶向上爬需要支付的费用。一旦你支付此费用，即可选择向上爬一个或者两个台阶。 你可以选择从下标为 0 或下标为 1 的台阶开始爬楼梯。 请你计算并返回达到楼梯顶部的最低花费。 示例 1ÿ…...
【Ubuntu】如何在Ubuntu系统中查看端口是否可用
文章目录 前言一、使用netstat命令二、使用ss命令三、使用lsof命令四、使用nc（netcat）命令总结 前言 本文介绍了如何在Ubuntu系统中查看端口是否可用的方法，并给出了具体的命令示例，帮助用户通过命令行工具检测端口的开放状态。 …...
Hive基础面试-如何理解复用率的
1. 模型的复用率你们是怎么做的？ 简单直白的说就是你的模型复用率如何，在业务方是否认可该模型，也是衡量模型建设的一个标准，复用率数：数仓模型涉及的核心是追求模型的复用和共享，引用系数越高，…...
Go 常量为什么只支持基本数据类型？
文章精选推荐 1 JetBrains Ai assistant 编程工具让你的工作效率翻倍 2 Extra Icons：JetBrains IDE的图标增强神器 3 IDEA插件推荐-SequenceDiagram，自动生成时序图 4 BashSupport Pro 这个ides插件主要是用来干嘛的 ？ 5 IDEA必装的插件&…...
DatePicker 日期选择器的使用（当日、近一周、近一月...）
template部分 <el-form-item label"操作日期:" style"margin-left: 50px;"><el-date-pickerv-model"dateRange"type"datetimerange"range-separator"~"start-placeholder"开始日期"end-placeholder&quo…...
【H2O2|全栈】JS进阶知识（六）ES6（2）
目录 前言 开篇语 准备工作 Set和Map 基本概念 Set 相互转化 常见属性和API 数组去重 并集、交集和差集 Map 转化 常见的属性和API Set和Map的区别 This的指向 function函数 箭头函数 修改this 使用方式 三种方式的异同 案例 更改this指向为obj 求数组数…...
聊聊主流几个JDK版本：JDK 8、JDK 11、JDK 17 和 JDK 21 的区别
聊聊主流几个JDK版本：JDK 8、JDK 11、JDK 17 和 JDK 21 的区别 一、JDK8二、JDK11三、JDK17四、JDK21 一、JDK8 JDK 8 发布于 2014 年，是 Java 语言的一个重要里程碑，带来了许多革命性的特性，改变了 Java 开发的方式。 主要更新的…...
MFC工控项目实例三十二模拟量校正值添加修改删除
用两个列表控件实现三十二模拟量校正值添加、修改、删除。 相关代码 void SenSet::OnSelchangeList1() //修改 {m_bAdd_2.EnableWindow(true);m_bParameter_2.EnableWindow(true);m_bDel_2.EnableWindow(false);nSel m_IDC_LIST1.GetCurSel();m_IDC_LIST1.GetText(nSel,nSel_…...
力扣第 60 题 “第 k 个排列”
题目描述 给定整数 n 和 k，返回由 1 到 n 组成的排列中第 k 个排列。 所有排列按字典序排列。1 ≤ n ≤ 9，1 ≤ k ≤ n!。 解题思路 要快速找到第 k 个排列，可以利用数学方法而不是生成所有排列： 1. 知识点：阶乘与…...
国际环境和背景下的云计算领域
前言 在当前国际环境和背景下，云计算领域呈现出复杂多变的局面，其发展深受技术创新、地缘政治、全球经济以及监管政策的影响。以下从技术趋势、市场竞争、地缘政治和监管环境四个方面详细解析云计算领域的现状。 一、技术趋势：多云与边缘计算…...
logstash 解析数组格式json数据：split, json
1，需求说明 原始数据格式： 1条 （2*2）》4个指标数据 [{"app":"aa","url":"www.1.com","metrics":[{"name":"cpu","value":11},{"name&quo…...
Linux的开发工具(二)
1.vim的基本操作 正常模式到插入模式 输入a 输入i 输入o 示例 输入iao下面的就会变成INSERT模式 插入模式到正常模式 按Esc键 正常模式到低行模式 shift； ：w保存当前文件 ：wq保存并退出 ：q！强制退出 2.vi…...
【机器视觉】单目测距——运动结构恢复
ps：图是随便找的，为了凑个封面 前言 在前面对光流法进行进一步改进，希望将2D光流推广至3D场景流时，发现2D转3D过程中存在尺度歧义问题，需要补全摄像头拍摄图像中缺失的深度信息，否则解空间不收敛…...
如何将联系人从 iPhone 转移到 Android
从 iPhone 换到 Android 手机时，你可能需要保留重要的数据，例如通讯录。好在，将通讯录从 iPhone 转移到 Android 手机非常简单，你可以从本文中学习 6 种可靠的方法，确保随时保持连接，不错过任何信息。 第 1…...
Web 架构之 CDN 加速原理与落地实践
文章目录 一、思维导图二、正文内容（一）CDN 基础概念1. 定义2. 组成部分 （二）CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 （三）CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 …...
高效线程安全的单例模式：Python 中的懒加载与自定义初始化参数
高效线程安全的单例模式：Python 中的懒加载与自定义初始化参数 在软件开发中，单例模式（Singleton Pattern）是一种常见的设计模式，确保一个类仅有一个实例，并提供一个全局访问点。在多线程环境下，实现单例模式时需要注意线程安全问题，以防止多个线程同时创建实例，导致…...
Rust 开发环境搭建
环境搭建 1、开发工具RustRover 或者vs code 2、Cygwin64 安装 https://cygwin.com/install.html 在工具终端执行： rustup toolchain install stable-x86_64-pc-windows-gnu rustup default stable-x86_64-pc-windows-gnu 2、Hello World fn main() { println…...
数学建模-滑翔伞伞翼面积的设计，运动状态计算和优化 ！
我们考虑滑翔伞的伞翼面积设计问题以及运动状态描述。滑翔伞的性能主要取决于伞翼面积、气动特性以及飞行员的重量。我们的目标是建立数学模型来描述滑翔伞的运动状态，并优化伞翼面积的设计。 一、问题分析 滑翔伞在飞行过程中受到重力、升力和阻力的作用。升力和阻力与伞翼面…...
Java 与 MySQL 性能优化：MySQL 慢 SQL 诊断与分析方法详解
文章目录 一、开启慢查询日志，定位耗时SQL1.1 查看慢查询日志是否开启1.2 临时开启慢查询日志1.3 永久开启慢查询日志1.4 分析慢查询日志 二、使用EXPLAIN分析SQL执行计划2.1 EXPLAIN的基本使用2.2 EXPLAIN分析案例2.3 根据EXPLAIN结果优化SQL 三、使用SHOW PROFILE…...
Linux基础开发工具——vim工具
文章目录 vim工具什么是vimvim的多模式和使用vim的基础模式vim的三种基础模式三种模式的初步了解 常用模式的详细讲解插入模式命令模式模式转化光标的移动文本的编辑 底行模式替换模式视图模式总结 使用vim的小技巧vim的配置(了解) vim工具 本文章仍然是继续讲解Linux系统下的…...
【笔记】AI Agent 项目 SUNA 部署 之 Docker 构建记录
#工作记录 构建过程记录 Microsoft Windows [Version 10.0.27871.1000] (c) Microsoft Corporation. All rights reserved.(suna-py3.12) F:\PythonProjects\suna>python setup.py --admin███████╗██╗ ██╗███╗ ██╗ █████╗ ██╔════╝…...
react更新页面数据，操作页面，双向数据绑定
// 路由不是组件的直接跳转use client，useEffect，useRouter，需3个结合， use client表示客户端 use client; import { Button,Card, Space,Tag,Table,message,Input } from antd; import { useEffect,useState } from react; impor…...