前端之家收集整理的这篇文章主要介绍了
HTML5 实现的一个俄罗斯方块实例代码，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
示例简单，运行地址为：http://chendd.cn/demo/html/canvas/elsfk.html，得需要支持html5浏览器的环境。
实现的功能：方块旋转（W键）、自动下落、移动（ASD）、消行、快速下落（空格键）、下落阴影、游戏结束。
为实现功能：消行时的计分、等级、以及不同等级的下落速度等。
学习了xiaoE的Java版本的俄罗斯方块后，自己动手使用html5的canvas实现的，
参考效果图如下：
详细代码如下：
<Meta charset="utf-8">
俄罗斯方块@H_<a href="/tag/404/" target="_blank" class="keywords">404</a>_23@
<p><style type="text/css"><br />
/<em>整个画布</em>/</p>
<h1>tetris {</h1>
<p>border: 6px solid grey;<br />
}<br />
/<em>游戏面板</em>/</p>
</style>
</head>
<body>
<p><canvas id="tetris" width="565" height="576"></canvas></p>
<p><script type="text/javascript"><br />
var canvas = document.getElementById("tetris");<br />
var context = canvas.getContext("2d");<br />
var padding = 6,size = 32,minX = 0,maxX = 10,minY = 0,maxY = 18,<a href="/tag/score/" target="_blank" class="keywords">score</a> = 0,level = 1;<br />
var gameMap = new Array(); //游戏地图，二维数组<br />
var gameTimer;<br />
initGameMap();<br />
//绘制垂直线条<br />
drawGrid();<br />
var arrays = basicBlockType();<br />
var blockIndex = getRandomIndex();<br />
//<a href="/tag/suiji/" target="_blank" class="keywords">随机</a>画一个方块意思意思<br />
var block = getPointByCode(blockIndex);<br />
context.fillStyle = getBlockColorByIndex(blockIndex);<br />
drawBlock(block);<br />
/**</p>
<ul>
<li>初始化游戏地图</li>
</ul>
<p>*/<br />
function initGameMap() {<br />
for (var i = 0; i < maxY; i++) {<br />
var row = new Array();<br />
for (var j = 0; j < maxX; j++) {<br />
row[j] = false;<br />
}<br />
gameMap[i] = row;<br />
}<br />
}<br />
/**</p>
<ul>
<li>
<p>方块旋转</p>
</li>
<li>
<p>顺时针：</p>
</li>
<li>
<p>A.x =O.y + O.x - B.y</p>
</li>
<li>
<p>A.y =O.y - O.x + B.x</p>
</li>
</ul>
<p>*/<br />
function round() {<br />
//正方形的方块不响应旋转<br />
if (blockIndex == 4) {<br />
return;<br />
}<br />
//循环处理当前的方块，找新的旋转点<br />
for (var i = 1; i < block.length; i++) {<br />
var o = block[0];<br />
var point = block[i];<br />
//旋转后的位置不能与现有格子的方块冲突<br />
var tempX = o.y + o.x - point.y;<br />
var tempY = o.y - o.x + point.x;<br />
if (isOverZone(tempX,tempY)) {<br />
return; //不可旋转<br />
}<br />
}<br />
clearBlock();<br />
//可以旋转，设置新的旋转后的坐标<br />
for (var i = 1; i < block.length; i++) {<br />
var o = block[0];<br />
var point = block[i];<br />
//旋转后的位置不能与现有格子的方块冲突<br />
var tempX = o.y + o.x - point.y;<br />
var tempY = o.y - o.x + point.x;<br />
block[i] = {<br />
x: tempX,y: tempY<br />
};<br />
}<br />
drawBlock();<br />
}<br />
function moveDown() {</p>
<p>var overFlag = canOver();<br />
if(overFlag){<br />
//如果不能向下移动了，将当前的方块坐标载入地图<br />
window.clearInterval(gameTimer);<br />
add2GameMap();<br />
//清除游戏区域内的不同颜色的格子，使用单一颜色重新绘制地图堆积物<br />
redrawGameMap();<br />
return;//游戏结束<br />
}</p>
<p>var flag = moveTo(0,1);<br />
//如果可以移动，则继续移动<br />
if (flag) {<br />
return;<br />
}<br />
//如果不能向下移动了，将当前的方块坐标载入地图<br />
add2GameMap();</p>
<p>//进行消行动作<br />
clearLines();<br />
//清除游戏区域内的不同颜色的格子，使用单一颜色重新绘制地图堆积物<br />
redrawGameMap();<br />
//如果不能向下移动，则继续下一个方块<br />
nextBlock();<br />
}</p>
<p>/**</p>
<ul>
<li>消行动作，返回消除的行数</li>
</ul>
<p>*/<br />
function clearLines() {<br />
var clearRowList = new Array();<br />
for (var i = 0; i < maxY; i++) {<br />
var flag = true;<br />
for (var j = 0; j < maxX; j++) {<br />
if (gameMap[i][j] == false) {<br />
flag = false;<br />
break;<br />
}<br />
}<br />
if (flag) {<br />
clearRowList.push(i); //记录消除行号的索引<br />
}<br />
}<br />
var clearRows = clearRowList.length;<br />
//所谓的消行就是将待消除行的索引，下方所有的格子上移动<br />
for (var x = 0; x < clearRows; x++) {<br />
var index = clearRowList[x];<br />
for (var i = index; i > 0; i--) {<br />
for (var j = 0; j < maxX; j++) {<br />
gameMap[i][j] = gameMap[i - 1][j];<br />
}<br />
}<br />
}<br />
if (clearRows > 0) {<br />
for (var i = 0; i < maxY; i++) {<br />
//此处可以限制满足相关条件的方块进行清除操作&& j < clearRowList[clearRows - 1]<br />
for (var j = 0; j < maxX; j++) {<br />
if (gameMap[i][j] == false) {<br />
clearBlockByPoint(i,j);<br />
}<br />
}<br />
}<br />
}<br />
}<br />
/**</p>
<ul>
<li>重绘游戏地图</li>
</ul>
<p>*/<br />
function redrawGameMap() {<br />
drawGrid();<br />
for (var i = 0; i < maxY; i++) {<br />
for (var j = 0; j < maxX; j++) {<br />
if (gameMap[i][j]) {<br />
roadBlock(j,i);<br />
}<br />
}<br />
}<br />
}<br />
/**</p>
<ul>
<li>打印阴影地图</li>
</ul>
<p><em>/<br />
function drawShadowBlock() {<br />
var currentBlock = block;<br />
var shadowPoints = getCanMoveDown();<br />
if (shadowPoints != null && shadowPoints.length > 0) {<br />
for (var i = 0; i < shadowPoints.length; i++) {<br />
var point = shadowPoints[i];<br />
if (point == null) {<br />
continue;<br />
}<br />
var start = point.x </em> size;<br />
var end = point.y * size;<br />
context.fillStyle = "#abcdef";<br />
context.fillRect(start,end,size,size);<br />
context.strokeStyle = "black";<br />
context.strokeRect(start,size);<br />
}<br />
}<br />
}<br />
/**</p>
<ul>
<li>
<p>返回最多可移动到的坐标位置（<a href="/tag/tongji/" target="_blank" class="keywords">统计</a>总共可以下落多少步骤）</p>
</li>
<li>
<p>@return最多可移动到的坐标位置</p>
</li>
</ul>
<p>*/<br />
function getCanMoveDown() {<br />
var nps = canMove(0,1,block);<br />
var last = null;<br />
if (nps != null) {<br />
last = new Array();<br />
while ((nps = canMove(0,nps)) != null) {<br />
if (nps != null) {<br />
last = nps;<br />
}<br />
}<br />
}<br />
return last;<br />
}</p>
<p>function canOver(){<br />
var flag = false;<br />
for (var i = 0; i < block.length; i++) {<br />
var point = block[i];<br />
var x = point.x;<br />
var y = point.y;<br />
if(isOverZone(x,y)){<br />
flag = true;<br />
break;<br />
}<br />
}<br />
return flag;<br />
}</p>
<p>function drawLevel<a href="/tag/score/" target="_blank" class="keywords">score</a>() {</p>
<p>}<br />
/**</p>
<ul>
<li>将不能移动的各种填充至地图</li>
</ul>
<p>*/<br />
function add2GameMap() {<br />
for (var i = 0; i < block.length; i++) {<br />
var point = block[i];<br />
var x = point.x;<br />
var y = point.y;<br />
var gameMapRow = gameMap[y]; //<a href="/tag/huoqu/" target="_blank" class="keywords">获取</a>到地图的一行<br />
gameMapRow[x] = true; //将此行中的某个格子<a href="/tag/biaoji/" target="_blank" class="keywords">标记</a>为堆积物<br />
gameMap[y] = gameMapRow; //再将行给设置回来<br />
}<br />
}<br />
function moveLeft() {<br />
moveTo(-1,0);<br />
}<br />
function moveRight() {<br />
moveTo(1,0);<br />
}<br />
function quickDown() {<br />
while (moveTo(0,1));<br />
}<br />
function moveTo(moveX,moveY) {<br />
var move = canMove(moveX,moveY,block); //判定是否可以移动<br />
if (move == null) {<br />
return false;<br />
}<br />
clearBlock();<br />
for (var i = 0; i < block.length; i++) {<br />
var point = block[i];<br />
point.x = point.x + moveX;<br />
point.y = point.y + moveY;<br />
}<br />
drawBlock();<br />
return true;<br />
}<br />
/**</p>
<ul>
<li>下一个方块</li>
</ul>
<p>*/<br />
function nextBlock() {<br />
blockIndex = getRandomIndex();<br />
block = getPointByCode(blockIndex);<br />
context.fillStyle = getBlockColorByIndex(blockIndex);<br />
drawBlock();<br />
}<br />
document.onkeypress = function(evt) {<br />
var key = window.event ? evt.keyCode : evt.which;<br />
switch (key) {<br />
case 119: //向上旋转 W<br />
round();<br />
break;<br />
case 115: //向下移动 S<br />
moveDown();<br />
break;<br />
case 97: //向左移动 A<br />
moveLeft();<br />
break;<br />
case 100: //向右移动 D<br />
moveRight();<br />
break;<br />
case 32: //空格键<a href="/tag/kuaisu/" target="_blank" class="keywords">快速</a>下落到底<br />
quickDown();<br />
break;<br />
}<br />
}<br />
/**</p>
<ul>
<li>
<p>判定是否可以移动</p>
</li>
<li>
<p>@parammoveX 横向移动的个数</p>
</li>
<li>
<p>@parammoveY 纵向移动的个数</p>
</li>
</ul>
<p>*/<br />
function canMove(moveX,currentBlock) {<br />
var flag = true;<br />
var newPoints = new Array();<br />
for (var i = 0; i < currentBlock.length; i++) {<br />
var point = currentBlock[i];<br />
var tempX = point.x + moveX;<br />
var tempY = point.y + moveY;<br />
if (isOverZone(tempX,tempY)) {<br />
flag = false;<br />
break;<br />
}<br />
}<br />
if (flag) {<br />
for (var i = 0; i < currentBlock.length; i++) {<br />
var point = currentBlock[i];<br />
var tempX = point.x + moveX;<br />
var tempY = point.y + moveY;<br />
newPoints[i] = {<br />
x: tempX,y: tempY<br />
};<br />
}<br />
return newPoints;<br />
}<br />
return null;<br />
}<br />
/**</p>
<ul>
<li>
<p>判定是否可以移动</p>
</li>
<li>
<p>@paramx 预移动后的横坐标</p>
</li>
<li>
<p>@paramy 预移动后的纵坐标</p>
</li>
</ul>
<p>*/<br />
function isOverZone(x,y) {<br />
return x < minX || x >= maxX || y < minY || y >= maxY || gameMap[y][x];<br />
}<br />
document.body.click();</p>
<p>gameTimer = window.setInterval(moveDown,800);</p>
<p>/**</p>
<ul>
<li>初始化方块的基础数据</li>
</ul>
<p>*/<br />
function basicBlockType() {<br />
var arrays = new Array();<br />
arrays[0] = [{<br />
x: 4,y: 0<br />
},{<br />
x: 3,{<br />
x: 5,{<br />
x: 6,y: 0<br />
}];<br />
arrays[1] = [{<br />
x: 4,{<br />
x: 4,y: 1<br />
}];<br />
arrays[2] = [{<br />
x: 4,y: 1<br />
}];<br />
arrays[3] = [{<br />
x: 4,y: 1<br />
},y: 1<br />
}];<br />
arrays[4] = [{<br />
x: 4,y: 1<br />
}];<br />
arrays[5] = [{<br />
x: 4,y: 1<br />
}];<br />
arrays[6] = [{<br />
x: 4,y: 1<br />
}];<br />
return arrays;<br />
}<br />
function basicBlockColor() {<br />
return ["#A00000","#A05000","#A0A000","#00A000","#00A0A0","#0000A0","#A000A0"];<br />
}<br />
function getBlockColorByIndex(typeCodeIndex) {<br />
var arrays = basicBlockColor();<br />
return arrays[typeCodeIndex];<br />
}<br />
/**</p>
<ul>
<li>
<p>根据编号返回指定编号的方块</p>
</li>
<li>
<p>@paramtypeCodeIndex 方块编号索引</p>
</li>
</ul>
<p>*/<br />
function getPointByCode(typeCodeIndex) {<br />
var arrays = basicBlockType();<br />
return arrays[typeCodeIndex];<br />
}<br />
/**</p>
<ul>
<li>
<p><a href="/tag/huoqu/" target="_blank" class="keywords">获取</a>随即出现方块的范围值</p>
</li>
<li>
<p>@paramlens <a href="/tag/suiji/" target="_blank" class="keywords">随机</a>数的范围</p>
</li>
</ul>
<p><em>/<br />
function getRandomIndex() {<br />
return parseInt(Math.random() </em> (arrays.length - 1),10);<br />
}<br />
/**</p>
<ul>
<li>绘制方块，按格子单个绘制</li>
</ul>
<p><em>/<br />
function drawBlock() {<br />
drawGrid();<br />
for (var i = 0; i < block.length; i++) {<br />
var point = block[i];<br />
var start = point.x </em> size;<br />
var end = point.y * size;<br />
context.fillStyle = getBlockColorByIndex(blockIndex);<br />
context.fillRect(start,size);<br />
}<br />
drawShadowBlock();<br />
}<br />
/**</p>
<ul>
<li>绘制障碍物</li>
</ul>
<p><em>/<br />
function roadBlock(x,y) {<br />
context.fillStyle = "darkgray";<br />
var start = x </em> size;<br />
var end = y * size;<br />
context.fillRect(start,size);<br />
}<br />
/**</p>
<ul>
<li>绘制新的方块先清除之前的方块</li>
</ul>
<p><em>/<br />
function clearBlock() {<br />
for (var i = 0; i < block.length; i++) {<br />
var point = block[i];<br />
var start = point.x </em> size;<br />
var end = point.y * size;<br />
context.clearRect(start,size);<br />
}<br />
}<br />
/**</p>
<ul>
<li>初始化一个新的行</li>
</ul>
<p>*/<br />
function initGameMapRow() {<br />
var array = new Array();<br />
for (var i = 0; i < maxX; i++) {<br />
array[i] = false;<br />
}<br />
return array;<br />
}<br />
/**</p>
<ul>
<li>
<p>根据坐标清除指定格子的<a href="/tag/neirong/" target="_blank" class="keywords">内容</a></p>
</li>
<li>
<p>@paramx 横坐标</p>
</li>
<li>
<p>@paramy 纵坐标</p>
</li>
</ul>
<p><em>/<br />
function clearBlockByPoint(x,y) {<br />
var start = y </em> size;<br />
var end = x * size;<br />
context.clearRect(start,size);<br />
}<br />
/**</p>
<ul>
<li>清掉所有位置的空白格的绘图</li>
</ul>
<p>*/<br />
function clearAllNullPoint() {<br />
for (var i = 0; i < maxY; i++) {<br />
for (var j = 0; j < maxX; j++) {<br />
if (gameMap[i][j] == false) {<br />
clearBlockByPoint(i,j);<br />
}<br />
}<br />
}<br />
}<br />
/**</p>
<ul>
<li>
<p>绘制网格线</p>
</li>
<li>
<p>@paramcontext 绘图对象</p>
</li>
</ul>
<p><em>/<br />
function drawGrid() {<br />
clearAllNullPoint(); //清除掉当前方块下落位置造成的阴影<br />
context.strokeStyle = "grey"; //画笔颜色<br />
for (var i = 0; i <= maxX; i++) {<br />
var start = i </em> size;<br />
var end = start + size;<br />
context.beginPath();<br />
context.moveTo(start,0);<br />
context.lineTo(size <em> i,size </em> maxY);<br />
context.stroke();<br />
context.closePath();<br />
}<br />
//绘制水平线条<br />
for (var i = 0; i <= maxY; i++) {<br />
var start = i <em> size;<br />
var end = start + size;<br />
context.beginPath();<br />
context.moveTo(0,size </em> i);<br />
context.lineTo(size <em> maxX,size </em> i);<br />
context.stroke();<br />
context.closePath();<br />
}<br />
}</p>
</script>
</body>
</html>
</pre>
</div>
<p>以上就是HTML5 实现的一个俄罗斯方块的实例，有兴趣的小伙伴可以参考下，谢谢大家对本站的<a href="/tag/zhichi/" target="_blank" class="keywords">支持</a>！</p></div>
<div class="topcard-tags"><a href="/tag/HTML5/" class="tag_link" target="_blank">HTML5</a><a href="/tag/shixianeluosifangkuaishili/" class="tag_link" target="_blank">实现俄罗斯方块实例</a><a href="/tag/shixiandeyigeeluosifangkuai/" class="tag_link" target="_blank">实现的一个俄罗斯方块</a></div>
<ul class="list-group">
<li class="list-group-item"><a href="/js/45737.html" title="javascript this详细介绍">上一篇：javascript this详细介绍</a><a href="/js/45734.html" title="javascript实现图片左右滚动效果【可自动滚动，有左右按钮】" class="text-muted pull-right">下一篇：javascript实现图片左右滚动效果【</a>
</li>
</ul>
</div>
</div>
</div>
<!-- row end -->
<div class="row row-sm">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="card">
<ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-4605373693034661"
data-ad-slot="9144498553"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
</div>
</div>
<div class="row row-sm">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="card">
<div class="title"><h1>猜你在找的JavaScript相关文章</h1></div>
<div class="list_con">
<a href="/js/997747.html" title="Javascript中的事件冒泡与捕获"><div class="title">Javascript中的事件冒泡与捕获</div>
<div class="summary">事件冒泡和事件捕获 起因：今天在封装一个bind函数的时候，发现el.addEventListener函数支...</div>
<time class="summary">作者：前端之家 时间：2021-02-22</time>
</a>
</div>
<div class="list_con">
<a href="/js/997746.html" title="搞懂js中小数运算精度问题原因及解决办法"><img class="lazy" src="/images/np.jpg" data-original="/res/2021/02-22/19/e40e1eb184cb2a5d8c5f6c5e730d8e82.png" title="" width="160" height="90" style="float:right;margin-left:30px;display:none;" /><div class="title">搞懂js中小数运算精度问题原因及解决办法</div>
<div class="summary">js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型，number类型相当于其...</div>
<time class="summary">作者：前端之家 时间：2021-02-22</time>
</a>
</div>
<div class="list_con">
<a href="/js/997744.html" title="搞懂：前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理"><div class="title">搞懂：前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理</div>
<div class="summary">什么是跨域 跨域 ： 广义的跨域包含一下内容 ： 1.资源跳转（链接跳转，重定向跳转，表单提...</div>
<time class="summary">作者：前端之家 时间：2021-02-22</time>
</a>
</div>
<div class="list_con">
<a href="/js/997743.html" title="前端对base64编码的理解，原生js实现字符base64编码"><div class="title">前端对base64编码的理解，原生js实现字符base64编码</div>
<div class="summary">@ "TOC" 常见对base64的认知(不完全正确) 首先对base64常见的认知，也是...</div>
<time class="summary">作者：前端之家 时间：2021-02-22</time>
</a>
</div>
<div class="list_con">
<a href="/js/997742.html" title="搞懂：MVVM模型以及VUE中的数据绑定数据劫持发布订阅模式"><div class="title">搞懂：MVVM模型以及VUE中的数据绑定数据劫持发布订阅模式</div>
<div class="summary">搞懂：MVVM模式和Vue中的MVVM模式 MVVM MVVM ： 的缩写，说都能直接说出来 ：模型， ：视图...</div>
<time class="summary">作者：前端之家 时间：2021-02-22</time>
</a>
</div>
<div style="border-bottom: 1px solid #f4f4f4;margin-top:20px;">
<ins class="adsbygoogle"
style="display:block"
data-ad-format="fluid"
data-ad-layout-key="-fr-2o+fp-dx-wx"
data-ad-client="ca-pub-4605373693034661"
data-ad-slot="4561116489"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div><div class="list_con">
<a href="/js/997318.html" title="js判断浏览器是否支持webGL"><div class="title">js判断浏览器是否支持webGL</div>
<div class="summary">起因是我之前开发的网页，用到了three.js制作了一个3d的旋转球体效果。 在各种浏览器上运行...</div>
<time class="summary">作者：前端之家 时间：2021-02-14</time>
</a>
</div>
<div class="list_con">
<a href="/js/997317.html" title="js判断undefined和null"><div class="title">js判断undefined和null</div>
<div class="summary">js判断undefined js判断null js判断null和undefined</div>
<time class="summary">作者：前端之家 时间：2021-02-14</time>
</a>
</div>
<div class="list_con">
<a href="/js/997316.html" title="将文字自动转为banner打印形式的工具"><div class="title">将文字自动转为banner打印形式的工具</div>
<div class="summary">http://patorjk.com/software/taag/</div>
<time class="summary">作者：前端之家 时间：2021-02-14</time>
</a>
</div>
<div class="list_con">
<a href="/js/997315.html" title="聊一聊 bootstrap 的轮播图插件"><div class="title">聊一聊 bootstrap 的轮播图插件</div>
<div class="summary">今天做工作的时候，轻车熟路的做完，又用到了bootstrap的轮播图，觉得有必要安利一下这个插...</div>
<time class="summary">作者：前端之家 时间：2021-02-14</time>
</a>
</div>
<div class="list_con">
<a href="/js/997314.html" title="js实现图片无缝循环跑马灯"><div class="title">js实现图片无缝循环跑马灯</div>
<div class="summary">html 代码 css js代码 function mylsRunHorseLight() { if (mylsTimer != null) { clearIn...</div>
<time class="summary">作者：前端之家 时间：2021-02-14</time>
</a>
</div>
<div style="border-bottom: 1px solid #f4f4f4;margin-top:20px;">
<ins class="adsbygoogle"
style="display:block"
data-ad-format="fluid"
data-ad-layout-key="-fr-2o+fp-dx-wx"
data-ad-client="ca-pub-4605373693034661"
data-ad-slot="4561116489"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div></div>
</div>
</div>
</div>
<!-- left end-->
<!-- right -->
<div class="col-sm-12 col-md-12 col-lg-3">
<!-- row -->
<div class="row row-sm">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="card">
<label class="main-content-label ">编程分类</label>
<div class="cate mt-20"><a href="/html/" title="HTML">HTML</a><a href="/html5/" title="HTML5">HTML5</a><a href="/js/" title="JavaScript">JavaScript</a><a href="/css/" title="CSS">CSS</a><a href="/jquery/" title="jQuery">jQuery</a><a href="/bootstrap/" title="Bootstrap">Bootstrap</a><a href="/angularjs/" title="Angularjs">Angularjs</a><a href="/typescript/" title="TypeScript">TypeScript</a><a href="/vue/" title="Vue">Vue</a><a href="/dojo/" title="Dojo">Dojo</a><a href="/json/" title="Json">Json</a><a href="/electron/" title="Electron">Electron</a><a href="/nodejs/" title="Node.js">Node.js</a><a href="/extjs/" title="extjs">extjs</a><a href="/express/" title="Express ">Express </a><a href="/xml/" title="XML">XML</a><a href="/es6/" title="ES6">ES6</a><a href="/ajax/" title="Ajax">Ajax</a><a href="/flash/" title="Flash">Flash</a><a href="/unity/" title="Unity">Unity</a><a href="/react/" title="React">React</a><a href="/flex/" title="Flex">Flex</a><a href="/antdesign/" title="Ant Design">Ant Design</a><a href="/webfrontend/" title="Web前端">Web前端</a><a href="/weapp/" title="微信小程序">微信小程序</a><a href="/wxmp/" title="微信公众号">微信公众号</a><div class="clearfix"></div>
</div>
</div>
</div>
</div>
<!-- row end -->
<!-- row -->
<div class="row row-sm">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="card">
<!-- f2er-rightads -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-4605373693034661"
data-ad-slot="7756441254"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
</div>
<!-- row end -->
<!-- row -->
<div class="row row-sm">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="card">
<label class="main-content-label ">最新文章</label>
<ul class="n-list"><li><a href="/js/997747.html" title="Javascript中的事件冒泡与捕获" target="_blank">• Javascript中的事件冒泡与</a></li>
<li><a href="/js/997746.html" title="搞懂js中小数运算精度问题原因及解决办法" target="_blank">• 搞懂js中小数运算精度问题</a></li>
<li><a href="/js/997744.html" title="搞懂：前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理" target="_blank">• 搞懂：前端跨域问题JS解决</a></li>
<li><a href="/js/997743.html" title="前端对base64编码的理解，原生js实现字符base64编码" target="_blank">• 前端对base64编码的理解，</a></li>
<li><a href="/js/997742.html" title="搞懂：MVVM模型以及VUE中的数据绑定数据劫持发布订阅模式" target="_blank">• 搞懂：MVVM模型以及VUE中的</a></li>
<li><a href="/js/997493.html" title="js实现横向跑马灯效果" target="_blank">• js实现横向跑马灯效果</a></li>
<li><a href="/js/997318.html" title="js判断浏览器是否支持webGL" target="_blank">• js判断浏览器是否支持webG</a></li>
<li><a href="/js/997317.html" title="js判断undefined和null" target="_blank">• js判断undefined和null</a></li>
<li><a href="/js/997316.html" title="将文字自动转为banner打印形式的工具" target="_blank">• 将文字自动转为banner打印</a></li>
<li><a href="/js/997315.html" title="聊一聊 bootstrap 的轮播图插件" target="_blank">• 聊一聊 bootstrap 的轮播图</a></li>
</ul>
</div>
</div>
</div>
<!-- row end -->
<!-- row -->
<div class="row row-sm">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="card">
<label class="main-content-label ">热门标签
<span class="pull-right tx-12">
<a href="/all" target="_blank">更多 ►</a></span>
</label>
<div class="topcard-tags"><a href="/tag/guanbiyangao/" title="关闭广告" target="_blank">关闭广告</a><a href="/tag/danduheaders/" title="单独headers" target="_blank">单独headers</a><a href="/tag/fengzhuangdaima/" title="封装代码" target="_blank">封装代码</a><a href="/tag/tishicuowu/" title="提示错误" target="_blank">提示错误</a><a href="/tag/zhengshuzhengze/" title="整数正则" target="_blank">整数正则</a><a href="/tag/fei0kaitou/" title="非0开头" target="_blank">非0开头</a><a href="/tag/tiaoye/" title="跳页" target="_blank">跳页</a><a href="/tag/chuyema/" title="出页码" target="_blank">出页码</a><a href="/tag/antdtable/" title="antd table" target="_blank">antd table</a><a href="/tag/tishiURLweizhuce/" title="提示URL未注册" target="_blank">提示URL未注册</a><a href="/tag/gongzhonghaozhifu/" title="公众号支付" target="_blank">公众号支付</a><a href="/tag/vuehashmoshi/" title="vue hash模式" target="_blank">vue hash模式</a><a href="/tag/iSlider/" title="iSlider" target="_blank">iSlider</a><a href="/tag/chepaijianpan/" title="车牌键盘" target="_blank">车牌键盘</a><a href="/tag/xunhuantupian/" title="循环图片" target="_blank">循环图片</a><a href="/tag/echartsshuangzhexian/" title="echarts 双折线" target="_blank">echarts 双折</a><a href="/tag/zuoyoubuju/" title="左右布局" target="_blank">左右布局</a><a href="/tag/DllPlugin/" title="DllPlugin" target="_blank">DllPlugin</a><a href="/tag/duixiangchuangjian/" title="对象创建" target="_blank">对象创建</a><a href="/tag/daziyouxi/" title="打字游戏" target="_blank">打字游戏</a><a href="/tag/quanxuan/" title="圈选" target="_blank">圈选</a><a href="/tag/lianglan/" title="两栏" target="_blank">两栏</a><a href="/tag/yunhanshu/" title="云函数" target="_blank">云函数</a><a href="/tag/mengban/" title="蒙版" target="_blank">蒙版</a><a href="/tag/ES2020/" title="ES2020" target="_blank">ES2020</a><a href="/tag/chuchuang/" title="橱窗" target="_blank">橱窗</a><a href="/tag/wufenggundonglunbo/" title="无缝滚动轮播" target="_blank">无缝滚动轮播</a><a href="/tag/sekuaipengzhuang/" title="色块碰撞" target="_blank">色块碰撞</a><a href="/tag/zujianxiaohui/" title="组件销毁" target="_blank">组件销毁</a><a href="/tag/wendangcaozuo/" title="文档操作" target="_blank">文档操作</a></div>
</div>
</div>
</div>
<!-- row end -->
<!-- row -->
<div class="row row-sm">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="card">
<!-- f2er-rightads -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-4605373693034661"
data-ad-slot="7756441254"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
</div>
<!-- row end -->
</div>
<!-- right end -->
</div>
</div>
<footer id="footer">
<div class="container">
<div class="row hidden-xs">
<dl class="col-sm-6 site-link">
<dt>最近更新</dt><dd><a href="/win11/1005328.html" title="小米手机重装系统价格多少?专业维修服务详解" target="_blank">· 小米手机重装系统价格多少?专业维修服务详解</a><span class="text-muted pull-right">02-05</span></dd>
<dd><a href="/win11/1005327.html" title="手把手教你重装电脑系统,让你的电脑焕然一新!" target="_blank">· 手把手教你重装电脑系统,让你的电脑焕然一新!</a><span class="text-muted pull-right">02-05</span></dd>
<dd><a href="/win11/1005326.html" title="教你一步步重装XP系统,让你的电脑重获新生" target="_blank">· 教你一步步重装XP系统,让你的电脑重获新生</a><span class="text-muted pull-right">02-05</span></dd>
<dd><a href="/win11/1005325.html" title="从备份到上网:一步步教你重装电脑系统" target="_blank">· 从备份到上网:一步步教你重装电脑系统</a><span class="text-muted pull-right">02-05</span></dd>
<dd><a href="/win11/1005324.html" title="Sony笔记本电脑一键重装系统详细图文教程" target="_blank">· Sony笔记本电脑一键重装系统详细图文教程</a><span class="text-muted pull-right">02-05</span></dd>
<dd><a href="/win11/1005323.html" title="Lenovo笔记本重装系统超详细教程，小白也能轻松上手" target="_blank">· Lenovo笔记本重装系统超详细教程，小白也能轻松...</a><span class="text-muted pull-right">02-05</span></dd>
<dd><a href="/win11/1005322.html" title="联想笔记本一键重装Win10系统详细教程" target="_blank">· 联想笔记本一键重装Win10系统详细教程</a><span class="text-muted pull-right">02-05</span></dd>
<dd><a href="/win11/1005321.html" title="电脑系统故障无需愁,专业维修店帮你重装旧貌换新颜" target="_blank">· 电脑系统故障无需愁,专业维修店帮你重装旧貌换新...</a><span class="text-muted pull-right">02-05</span></dd>
<dd><a href="/win11/1005320.html" title="联想笔记本一键重装Win10系统图文教程，小白也能轻松搞定！" target="_blank">· 联想笔记本一键重装Win10系统图文教程，小白也能...</a><span class="text-muted pull-right">02-05</span></dd>
<dd><a href="/win11/1005319.html" title="笔记本重装系统图文教程：从光盘启动一步到位" target="_blank">· 笔记本重装系统图文教程：从光盘启动一步到位</a><span class="text-muted pull-right">02-05</span></dd>
</dl>
<dl class="col-sm-4 site-link">
<dt>好站推荐</dt><dd> <a href="https://www.runoob.com" title="菜鸟教程(www.runoob.com)提供了编程的基础技术教程, 介绍了HTML、CSS、Javascript、Python，Java，Ruby，C，PHP , MySQL等各种编程语言的基础知识。 同时本站中也提供了大量的在线实例，通过实例，您可以更好的学习编程。" target="_blank">菜鸟教程</a></dd><dd> <a href="https://www.jb51.cc" title="编程之家(www.jb51.cc)是成立于2017年面向全球中文开发者的技术内容分享平台。提供编程导航、编程问答、编程博文、编程百科、编程教程、编程工具、编程实例等开发者最需要的编程技术内容与开发工具支持，与你一起学习编程，相信编程改变未来！" target="_blank">编程之家</a></dd><dd> <a href="" title="前端之家 f2er.com 前端开发人员所需学习知识手册。" target="_blank">前端之家</a></dd></dl>
<dl class="col-sm-2 site-link">
<dt>商务合作</dt>
<dd><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=76874919&site=qq&menu=yes">联系我们</a></dd>
</dl>
</div>
<div class="copyright">
Copyright © 2019 前端之家. 当前版本 V7.0.16<br>
<span class="ml5">前端之家 版权所有
<a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">闽ICP备13020303号-10</a></span>
</div>
</div>
</footer>
<script type="text/javascript" src="/js/base.js"></script>
</body>
</html>
