使用非html5實(shí)現(xiàn)js板連連看游戲示例代碼
更新時間：2013年09月22日 15:12:07 投稿：whsnow
連連看游戲通常情況下都是使用html5來實(shí)現(xiàn)的，不過從現(xiàn)在開始就可以使用js來實(shí)現(xiàn)了，具體的代碼如下，喜歡的朋友可以參考下，希望對大家有所幫助
向大家分享一款如何實(shí)現(xiàn)js版連連看游戲，如下圖所示：
首先看一下html的布局方式在index.html文件中：
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>連連看</title>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
</head>
<body>
<center>
<div id="whole">
<div id="gamePanel" tabindex="0">
<div id="pieces">
</div>
</div>
<div id="gameLogo">
</div>
<div id="scorePanel">
<span>分 數(shù)</span>
</div>
<div id="score">
<span>0</span>
</div>
<div id="timePanel">
<span>時 間</span>
</div>
<div id="time">
<span>0</span>
</div>
<div id="button">
<input id="start" type="button" onclick="Start();" value="開始"></input>
<input id="reset" type="button" onclick="Reset();"value="重置"></input>
</div>
</div>
</center>
<script type="text/javascript" src="js/map.js"></script>
<script type="text/javascript" src="js/piece.js"></script>
<script type="text/javascript" src="js/game.js"></script>
</body>
</html>
css文件夾下的index.css文件如下：
復(fù)制代碼 代碼如下:
body {
font-size : 16px;
font-weight : bold;
color : grey;
}
#whole {
border : 1px double #999999;
border-width : 5px;
width : 800px;
height : 505px;
position : relative;
}
#gamePanel {
margin: 1px 1px 1px 1px;
width : 602px;
height : 502px;
background : url(../img/background.gif) repeat;
position : absolute;
}
#pieces {
margin-top : 35px;
border : 1px solid #999999;
width : 546px;
height : 434px;
position: relative;
}
#pieces .piece {
width : 32px;
height : 36px;
position : relative;
cursor : pointer;
float : left;
}
#pieces .track {
width : 32px;
height : 36px;
position : relative;
float : left;
}
#pieces .track2 {
width : 32px;
height : 36px;
position : relative;
float : left;
background : red;
}
#gameLogo {
margin-top : 60px;
border : 1px solid #999999;
left : 607px;
width : 187px;
height : 73px;
background : url(../img/logo.gif);
position: absolute;
}
#scorePanel {
border : 1px solid #999999;
left : 607px;
top : 200px;
width : 187px;
height : 30px;
position : absolute;
}
#score {
border : 1px solid #999999;
left : 607px;
top : 240px;
width : 187px;
height : 30px;
position : absolute;
}
#timePanel {
border : 1px solid #999999;
left : 607px;
top : 300px;
width : 187px;
height : 30px;
position : absolute;
}
#time {
border : 1px solid #999999;
left : 607px;
top : 340px;
width : 187px;
height : 30px;
position : absolute;
}
#button {
border : 1px solid #999999;
left : 607px;
top : 400px;
width : 187px;
height : 30px;
position : absolute;
}
下面讓我們來看一下最核心的js部分實(shí)現(xiàn)代碼，js部分分為三個源文件即game.js、map.js、piece.js每一個源文件對應(yīng)一個類，其中本游戲通過game類來操縱map和圖片piece對象：
game.js代碼如下：
復(fù)制代碼 代碼如下:
// 游戲控制類
var Game = {
// 游戲背景
gamePanel : null,
// 分?jǐn)?shù)
score : 0,
// 時間
time : 0,
// 圖片映射表
pieceMap : null,
// 圖片列表
pieceList : [],
// 圖片列表不包含圖片
pieceImgList : [],
// 圖片隨機(jī)數(shù)列表
randomList : [],
// 軌跡列表
trackList : [],
// 游戲是否開始
isGameBigin : false,
// 游戲是否結(jié)束
isGameOver : false,
// 游戲是否重置
isGameReset : false,
// 圖片元素是否第一次點(diǎn)擊
isFirstClick : true,
// 開始游戲
start : function() {
document.getElementById("start").disabled = true;
document.getElementById("reset").disabled = false;
if (this.isGameReset) {
this.isGameOver = false;
this.startTime();
return;
} else if (this.isGameBegin) {
return;
} else {
this.init();
return;
}
},
reset : function() {
document.getElementById("start").disabled = false;
document.getElementById("reset").disabled = true;
this.clear();
this.initPieces();
this.initImgPieces();
this.time = 0;
document.getElementById("time").innerHTML = 0;
this.score = 0;
document.getElementById("score").innerHTML = 0;
this.isGameReset = true;
this.isGameBegin = true;
},
// 初始化
init : function() {
if (this.isGameBegin) {
return;
}
this.pieceMap = new Map();
var _this = this;
this.time = 0;
this.startTime();
this.gamePanel = document.getElementById("pieces");
this.initPieces();
this.initImgPieces();
this.isGameBegin = true;
},
// 將隨機(jī)生成的150張圖片添加進(jìn)畫布
initPieces : function() {
var _this = this;
this.initRandomList();
// 打亂隨機(jī)列表排序
this.messRandomList();
for (var i = 0; i < 204; i ++) {
var piece = new Piece(this);
this.pieceList.push(piece);
var x = (i%17);
var y = Math.floor(i/17);
this.pieceMap.put(x+","+y, piece);
piece.setPosition(x, y);
this.gamePanel.appendChild(piece.dom);
if (x == 0 || x == 16 || y == 0 || y == 11) {
piece.track = document.createElement("div");
piece.track.className = "track";
piece.dom.appendChild(piece.track);
piece.isTracked = true;
continue;
} else {
if (x == 1 || x == 15 || y == 1 || y == 10) {
piece.setAtEdge(true);
}
this.pieceImgList.push(piece);
}
}
},
// 初始化圖片
initImgPieces : function() {
for (var i = 0; i < this.pieceImgList.length; i ++) {
this.pieceImgList[i].initImg();
this.pieceImgList[i].img.src = "img/pieces/"+this.randomList[i]+".gif"
this.pieceImgList[i].setImgSrc(this.pieceImgList[i].img.src);
// 執(zhí)行圖片點(diǎn)擊事件
this.pieceImgList[i].onClick();
}
},
// 初始化隨機(jī)表
initRandomList : function() {
// 獲取隨機(jī)數(shù)列，成雙出現(xiàn)
for (var i = 0; i < 75; i ++) {
var random = parseInt(Math.random()*22*10000, 10);
var number = random%23;
this.randomList.push(number);
this.randomList.push(number);
}
},
// 打亂隨機(jī)表
messRandomList : function() {
for (var i = 0; i < this.randomList.length; i ++) {
var random = parseInt(Math.random()*15*10000, 10);
var number = random%150;
var temp;
temp = this.randomList[i];
this.randomList[i] = this.randomList[number];
this.randomList[number] = temp;
}
},
// 開始計時
startTime : function() {
var _this = this;
if (this.isGameOver) {
return;
} else {
this.time ++;
document.getElementById("time").innerHTML = this.time;
this.isGameBegin = true;
setTimeout(function() {_this.startTime();}, 1000);
}
},
// 清除
clear : function() {
for (var i = 0; i < this.pieceList.length; i ++) {
this.gamePanel.removeChild(this.pieceList[i].dom);
}
this.pieceList = [];
this.randomList = [];
this.pieceImgList = [];
this.isGameOver = true;
this.isGameBegin = false;
}
}
window.onload = function() {
document.getElementById("start").disabled = false;
document.getElementById("reset").disabled = true;
}
// 游戲開始入口
function Start() {
Game.start();
}
// 游戲重置入口
function Reset() {
Game.reset();
}
自定義的js版映射結(jié)構(gòu)map.js源文件如下：
復(fù)制代碼 代碼如下:
var Map = function(){
this.data = [];
}
Map.prototype = {
put : function(key, value) {
this.data[key] = value;
},
get : function(key) {
return this.data[key];
},
remove : function(key) {
this.data[key] = null;
},
isEmpty : function() {
return this.data.length == 0;
},
size : function() {
return this.data.length;
}
}
圖片類piece.js源文件如下：
復(fù)制代碼 代碼如下:
var Piece = function(game) {
// 游戲?qū)ο?br />this.game = game;
// 是否為邊緣元素
this.isEdge = false;
// 是否挨著邊緣元素
this.atEdge = false;
// 圖片dom元素
this.dom = null;
// 圖片元素
this.img = null;
// 圖片元素來源
this.src = null;
// 軌跡元素
this.track = null;
// 是否可以作為軌跡
this.isTracked = false;
// 選中標(biāo)記元素
this.selected = null;
// 圖片橫向排列
this.x = 0;
// 圖片縱向排列
this.y = 0;
// 圖片閃爍Id
this.flashId = null;
// 圖片是否點(diǎn)擊
this.onClicked = false;
// 閃爍次數(shù)
this.flashCount = 0;
this.init();
}
Piece.prototype = {
// 初始化
init : function() {
this.dom = document.createElement("div");
this.dom.className = "piece";
this.selected = document.createElement("img");
},
// 初始化圖片
initImg : function() {
this.img = document.createElement("img");
this.dom.appendChild(this.img);
},
// 滿足算法后初始化track元素
initTrack : function() {
if (this.flashId != null) {
// 停止閃爍
this.stopFlash();
}
//alert("initTrack middle");
if (this.track != null) {
return;
}
this.onClicked = false;
this.dom.removeChild(this.img);
this.track = document.createElement("div");
this.track.className = "track";
this.dom.appendChild(this.track);
},
// 位圖片設(shè)置來源
setImgSrc : function(src) {
this.src = src;
},
// 為圖片設(shè)置二維排列位置
setPosition : function(x, y) {
this.x = x;
this.y = y;
},
// 為圖片設(shè)置選中元素
setSelected : function() {
if (this.flashCount ++ % 2 == 0) {
//this.dom.removeChild(this.img);
//this.selected.src = "img/selected.gif";
//this.dom.appendChild(this.selected);
this.img.src = "img/pieces/flash.gif";
} else {
//if (this.selected != null) {
// this.dom.removeChild(this.selected);
//}
this.img.src = this.src;
//this.dom.appendChild(this.img);
}
},
// 設(shè)置是否為邊緣元素
setEdge : function(isEdge) {
this.isEdge = isEdge;
},
// 設(shè)置是否挨著邊緣元素
setAtEdge : function(atEdge) {
this.atEdge = atEdge;
},
// 開始閃爍
flash : function() {
var _this = this;
this.flashId = setInterval(function() {_this.setSelected();}, 500);
},
// 停止閃爍
stopFlash : function() {
clearInterval(this.flashId);
if (this.flashCount % 2 == 1) {
//if (this.selected != null) {
// this.dom.removeChild(this.selected);
//}
this.img.src = this.src;
//this.dom.appendChild(this.img);
}
},
// 對象被選擇的內(nèi)部函數(shù)
onClick : function() {
if (this.onClicked) {
return;
}
var _this = this;
this.img.onclick = function() {
if (!document.getElementById("start").disabled) {
return;
}
if (_this.onClicked) {
return;
}
if (_this.checkPiece()) {
return;
}
_this.flash();
_this.onClicked = true;
};
},
// 檢查是否有被點(diǎn)擊的圖片
checkPiece : function() {
for (var i = 0; i < this.game.pieceList.length; i ++) {
if (this.game.pieceList[i].onClicked && !this.game.pieceList[i].equal(this)) {
if (this.game.pieceList[i].equalImage(this)) {
//alert("The same Image");
this.searchTrack(this.game.pieceList[i]);
} else {
this.game.pieceList[i].stopFlash();
this.game.pieceList[i].onClicked = false;
this.onClicked = false;
return false;
}
return true;
} else {
continue;
}
}
return false;
},
// 是否為同一個對象
equal : function(piece) {
return (this.x == piece.x && this.y == piece.y);
},
// 是否為同一個圖片
equalImage : function(piece) {
return this.src == piece.src;
},
// 搜尋路徑
searchTrack : function(piece) {
if (this.isNear(piece)) {
this.linkTrack(piece);
return;
}
if (this.isReach(piece) || this.isReach2(piece)) {
this.linkTrack(piece);
return;
}
},
// 是否相鄰
isNear : function(piece) {
var a = (Math.abs(piece.x - this.x) == 1) && (piece.y == this.y)
|| (Math.abs(piece.y - this.y) == 1) && (piece.x == this.x);
return a;
},
// 直線
isStraightReach : function(piece) {
//alert("isStraightReach");
if (this.isNear(piece)) {
return true;
}
var a = false;
var b = false;
// 沿y軸方向搜索
if (this.x == piece.x) {
//alert("!!!!!!!!!!!");
for (var i = this.min(this.y, piece.y) + 1; i < this.max(this.y, piece.y); i ++) {
//alert("this.x == piece.x: " + piece.x + "," + i);
if (this.game.pieceMap.get(piece.x + "," + i).isPass()) {
a = true;
this.game.trackList.push(this.game.pieceMap.get(piece.x + "," + i));
continue;
} else {
a = false;
this.game.trackList = [];
return a;
}
}
}
// 沿x軸方向搜索
if (this.y == piece.y) {
//alert("!!!!!!!!!!!");
for (var i = this.min(this.x, piece.x) + 1; i < this.max(this.x, piece.x); i ++) {
//alert("this.y == piece.y: " + i + "," + piece.y);
if (this.game.pieceMap.get(i + "," + piece.y).isPass()) {
b = true;
this.game.trackList.push(this.game.pieceMap.get(i + "," + piece.y));
continue;
} else {
b = false
this.game.trackList = [];
return b;
}
}
}
return a || b;
},
// 拐一次彎搜索
isReach1 : function(piece) {
//alert("isReach1");
var corner_1 = this.game.pieceMap.get(this.x + "," + piece.y);
var corner_2 = this.game.pieceMap.get(piece.x + "," + this.y);
var _this = this;
if ((_this.isStraightReach(corner_1))
&& (corner_1.isStraightReach(piece))
&& corner_1.isPass()) {
//alert("corner_1: " + this.x + "," + piece.y);
this.game.trackList.push(corner_1);
return true;
}
if ((_this.isStraightReach(corner_2))
&& (corner_2.isStraightReach(piece))
&& corner_2.isPass()) {
//alert("corner_2: " + piece.x + "," + this.y);
this.game.trackList.push(corner_2);
return true;
}
return false;
},
// 直接或拐一次彎搜索
isReach : function(piece) {
var a = this.isStraightReach(piece);
var b = this.isReach1(piece);
return a || b;
},
// 拐兩次彎搜索
isReach2 : function(piece) {
// 沿x軸正向搜索
for (var i = this.x + 1; i < 17; i ++) {
if (!this.game.pieceMap.get(i + "," + this.y).isPass()) {
this.game.trackList = [];
break;
} else if (this.game.pieceMap.get(i + "," + this.y).isReach(piece)
&& this.game.pieceMap.get(i + "," + this.y).isPass()) {
this.game.trackList.push(this.game.pieceMap.get(i + "," + this.y));
return true;
}
}
// 沿x軸搜索
for (var i = this.x - 1; i >= 0; i --) {
if (!this.game.pieceMap.get(i + "," + this.y).isPass()) {
this.game.trackList = [];
break;
} else if (this.game.pieceMap.get(i + "," + this.y).isReach(piece)
&& this.game.pieceMap.get(i + "," + this.y).isPass()) {
this.game.trackList.push(this.game.pieceMap.get(i + "," + this.y));
return true;
}
}
// 沿y軸搜索
for (var i = this.y - 1; i >= 0; i --) {
if (!this.game.pieceMap.get(this.x + "," + i).isPass()) {
this.game.trackList = [];
break;
} else if (this.game.pieceMap.get(this.x + "," + i).isReach(piece)
&& this.game.pieceMap.get(this.x + "," + i).isPass()) {
this.game.trackList.push(this.game.pieceMap.get(this.x + "," + i));
return true;
}
}
// 沿y軸正向搜索
for (var i = this.y + 1; i < 12; i ++) {
if (!this.game.pieceMap.get(this.x + "," + i).isPass()) {
this.game.trackList = [];
break;
} else if (this.game.pieceMap.get(this.x + "," + i).isReach(piece)
&& this.game.pieceMap.get(this.x + "," + i).isPass()) {
this.game.trackList.push(this.game.pieceMap.get(this.x + "," + i));
return true;
}
}
return false;
},
// 路徑連接
linkTrack : function(piece) {
this.initTrack();
piece.initTrack();
this.changeScore();
this.showTrack(piece);
},
// 顯示足跡
showTrack : function(piece) {
this.game.trackList.push(piece);
this.track.className = "track2";
for (var i = 0; i < this.game.trackList.length; i ++) {
//alert(i);
this.game.trackList[i].track.className = "track2";
}
var _this = this;
setTimeout(function() {_this.hideTrack()}, 500);
},
// 隱匿足跡
hideTrack : function() {
for (var i = 0; i < this.game.trackList.length; i ++) {
this.game.trackList[i].track.className = "track";
}
this.game.trackList = [];
this.track.className = "track";
this.isTracked = true;
},
// 分?jǐn)?shù)增加
changeScore : function() {
this.game.score += 100;
document.getElementById("score").innerHTML = this.game.score;
},
min : function(a, b) {
if (a < b) {
return a;
} else {
return b;
}
},
max : function(a, b) {
if (a > b) {
return a;
} else {
return b;
}
},
// 判斷是否通過
isPass : function() {
return this.track != null;
}
}
以上是源文件的代碼,具體的實(shí)現(xiàn)代碼請關(guān)注CSDN中zhangjinpeng66下載。下面講一下連連看游戲最核心的部分，js實(shí)現(xiàn)搜索路徑。
js實(shí)現(xiàn)搜索路徑算法首先最簡單的是判斷兩個圖片能否直線到達(dá)函數(shù)代碼如下：
復(fù)制代碼 代碼如下:
// 直線
isStraightReach : function(piece) {
//alert("isStraightReach");
if (this.isNear(piece)) {
return true;
}
var a = false;
var b = false;
// 沿y軸方向搜索
if (this.x == piece.x) {
//alert("!!!!!!!!!!!");
for (var i = this.min(this.y, piece.y) + 1; i < this.max(this.y, piece.y); i ++) {
//alert("this.x == piece.x: " + piece.x + "," + i);
if (this.game.pieceMap.get(piece.x + "," + i).isPass()) {
a = true;
this.game.trackList.push(this.game.pieceMap.get(piece.x + "," + i));
continue;
} else {
a = false;
this.game.trackList = [];
return a;
}
}
}
// 沿x軸方向搜索
if (this.y == piece.y) {
//alert("!!!!!!!!!!!");
for (var i = this.min(this.x, piece.x) + 1; i < this.max(this.x, piece.x); i ++) {
//alert("this.y == piece.y: " + i + "," + piece.y);
if (this.game.pieceMap.get(i + "," + piece.y).isPass()) {
b = true;
this.game.trackList.push(this.game.pieceMap.get(i + "," + piece.y));
continue;
} else {
b = false
this.game.trackList = [];
return b;
}
}
}
return a || b;
},
該函數(shù)實(shí)現(xiàn)了連連看判斷兩圖片是否符合連接條件的最簡單的一步,然后是拐一次彎搜索。
復(fù)制代碼 代碼如下:
// 拐一次彎搜索
isReach1 : function(piece) {
//alert("isReach1");
var corner_1 = this.game.pieceMap.get(this.x + "," + piece.y);
var corner_2 = this.game.pieceMap.get(piece.x + "," + this.y);
var _this = this;
if ((_this.isStraightReach(corner_1))
&& (corner_1.isStraightReach(piece))
&& corner_1.isPass()) {
//alert("corner_1: " + this.x + "," + piece.y);
this.game.trackList.push(corner_1);
return true;
}
if ((_this.isStraightReach(corner_2))
&& (corner_2.isStraightReach(piece))
&& corner_2.isPass()) {
//alert("corner_2: " + piece.x + "," + this.y);
this.game.trackList.push(corner_2);
return true;
}
return false;
},
在拐一次彎搜索的函數(shù)中調(diào)用了直接搜索的函數(shù)，同樣最復(fù)雜的拐兩次彎搜索也會調(diào)用拐一次彎搜索的函數(shù)。
復(fù)制代碼 代碼如下:
// 拐兩次彎搜索
isReach2 : function(piece) {
// 沿x軸正向搜索
for (var i = this.x + 1; i < 17; i ++) {
if (!this.game.pieceMap.get(i + "," + this.y).isPass()) {
this.game.trackList = [];
break;
} else if (this.game.pieceMap.get(i + "," + this.y).isReach(piece)
&& this.game.pieceMap.get(i + "," + this.y).isPass()) {
this.game.trackList.push(this.game.pieceMap.get(i + "," + this.y));
return true;
}
}
// 沿x軸搜索
for (var i = this.x - 1; i >= 0; i --) {
if (!this.game.pieceMap.get(i + "," + this.y).isPass()) {
this.game.trackList = [];
break;
} else if (this.game.pieceMap.get(i + "," + this.y).isReach(piece)
&& this.game.pieceMap.get(i + "," + this.y).isPass()) {
this.game.trackList.push(this.game.pieceMap.get(i + "," + this.y));
return true;
}
}
// 沿y軸搜索
for (var i = this.y - 1; i >= 0; i --) {
if (!this.game.pieceMap.get(this.x + "," + i).isPass()) {
this.game.trackList = [];
break;
} else if (this.game.pieceMap.get(this.x + "," + i).isReach(piece)
&& this.game.pieceMap.get(this.x + "," + i).isPass()) {
this.game.trackList.push(this.game.pieceMap.get(this.x + "," + i));
return true;
}
}
// 沿y軸正向搜索
for (var i = this.y + 1; i < 12; i ++) {
if (!this.game.pieceMap.get(this.x + "," + i).isPass()) {
this.game.trackList = [];
break;
} else if (this.game.pieceMap.get(this.x + "," + i).isReach(piece)
&& this.game.pieceMap.get(this.x + "," + i).isPass()) {
this.game.trackList.push(this.game.pieceMap.get(this.x + "," + i));
return true;
}
}
return false;
},
該函數(shù)以點(diǎn)擊的圖片為中心分別沿x軸,y軸展開搜索。
以上是本游戲代碼的全部內(nèi)容。具體游戲源碼請到CSDN中zhangjinpeng66的資源里下載。
相關(guān)文章
移動端網(wǎng)頁開發(fā)調(diào)試神器Eruda的介紹與使用技巧
在日常的移動端開發(fā)時，一般都是試用chrome瀏覽器的移動端模式進(jìn)行開發(fā)和調(diào)試，只有在chrome調(diào)試完成，而最近發(fā)現(xiàn)了一個新的調(diào)試方法，所以這篇文章主要給大家介紹了關(guān)于移動端網(wǎng)頁開發(fā)調(diào)試神器Eruda的基本資料，以及其使用的一些技巧，需要的朋友可以參考下。2017-10-10
簡單幾行JS Code實(shí)現(xiàn)IE郵件轉(zhuǎn)發(fā)新浪微博
大概就是說我們可以用window.external.menuArguments這個對象獲取到內(nèi)部的信息，如window，document這些常用的對象2013-07-07
本文對如何利用iframe標(biāo)簽以及js制作時鐘進(jìn)行了全面解析，分步說明，條理清晰，感興趣的朋友可以看下2016-12-12
javascript中的document.open()方法使用介紹
document.open()方法打開一個新的文檔并用document.write()方法編寫文檔的內(nèi)容，下面有個不錯的示例，大家可以感受下2013-10-10
javascript代碼運(yùn)行的過程中基本類型會找到對應(yīng)的包裝對象，然后包裝對象把所有的屬性和方法給了基本類型，然后包裝對象被系統(tǒng)進(jìn)行銷毀，所以理解了包裝對象可以很好的理解之前寫的代碼為什么可以這樣做了。2015-07-07
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)時間軸特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
JS實(shí)現(xiàn)添加,替換,刪除節(jié)點(diǎn)元素的方法
這篇文章主要介紹了JS實(shí)現(xiàn)添加,替換,刪除節(jié)點(diǎn)元素的方法,實(shí)例分析了javascript針對節(jié)點(diǎn)元素的替換、刪除及常用的幾種添加技巧,需要的朋友可以參考下2016-06-06
在頁面中引入 Pace.js 和您所選擇主題的 CSS 文件，就可以讓你的頁面擁有漂亮的加載進(jìn)度和 Ajax 導(dǎo)航效果。不需要掛接到任何代碼，自動檢測進(jìn)展。您可以選擇顏色和多種效果，有簡約，閃光燈，MAC OSX，左側(cè)填充，頂部填充，計數(shù)器和彈跳等等。2015-09-09
這篇文章主要介紹了微信小程序自定義可搜索的picker組件,主要包括自定義可搜索的picker組件的代碼以及調(diào)用實(shí)例，這里的搜索框使用的是vant微信小程序組件庫，picker使用的微信小程序的原生組件，需要的朋友可以參考下2022-06-06
javascript數(shù)據(jù)結(jié)構(gòu)之二叉搜索樹實(shí)現(xiàn)方法
這篇文章主要介紹了javascript數(shù)據(jù)結(jié)構(gòu)之二叉搜索樹實(shí)現(xiàn)方法,較為詳細(xì)的分析了二叉搜索樹的概念、原理與JavaScript實(shí)現(xiàn)二叉搜索樹的方法,對于學(xué)習(xí)JavaScript數(shù)據(jù)結(jié)構(gòu)具有一定參考借鑒價值,需要的朋友可以參考下2015-11-11