前端之家收集整理的这篇文章主要介绍了
JavaScript实现Fly Bird小游戏，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
本教程为大家分享了Fly Bird小游戏的制作流程，供大家参考，具体内容如下
1.分析页面结构，理清需求和功能
游戏有三个界面，分别是开始界面，游戏界面和游戏结束界面。
1.1 开始界面
游戏的大背景
上下移动的游戏标题和翅膀摆动的小鸟
start 按钮，点击进入游戏界面
一直移动的地面
1.2 游戏界面
显示越过障碍数量的计分器
移动的障碍物，分别是上管道和下管道
点击游戏界面，小鸟向上飞起，然后在重力作用下下坠，
当小鸟和管道碰撞后，结束界面弹出，同时小鸟落到地面
1.3 结束界面
GAMEOVER 提示面板
OK 按钮
2. 开发“开始界面”
考虑到草地的移动效果，我们在页面中加入两个草地
2.1 HTML
Fly Bird@H_<a href="/tag/502/" target="_blank" class="keywords">502</a>_51@
<link rel="stylesheet" type="text/css" href="css/index.css"/>
</head>
<body>
<div id="wrapBg"> <!--游戏背景-->
<div id="headTitle"> <!--开始标题-->
<img id="headBird" src="img/bird0.png" alt="小鸟" /> <!--标题中的小鸟-->
</div>
<button id="startBtn" ></button> <!--开始按钮-->
<div id="grassLand1"></div> <!--草地1-->
<div id="grassLand2"></div> <!--草地2-->
</div>
</body>
</html>
</pre>
</div>
<p><span style="color: #800000"><h3>2.2 CSS
</h3></p>
<div class="jb51code">
<pre class="brush:css;">
#wrapBg{/*游戏背景*/
width: 343px;height: 480px;
margin: 0 auto;
background-image:url(../img/bg.jpg);
position: relative;
top: 100px;
overflow: hidden;
}
#headTitle{/*开始<a href="/tag/biaoti/" target="_blank" class="keywords">标题</a>*/
width: 236px;height: 77px;
background-image: url(../img/head.jpg);
position: absolute; left: 53px; top: 100px;
}
#headBird{/*开始<a href="/tag/biaoti/" target="_blank" class="keywords">标题</a>中的小鸟*/
float:right;
margin-top: 25px;
}
#startBtn{/*开始按钮*/
width: 85px;height: 29px;
padding: 0;margin: 0;
background-image: url(../img/start.jpg);
position: absolute;left: 129px;top: 250px;
}
#grassLand1{/*草地1*/
height: 14px;width: 343px;
background-image: url(../img/banner.jpg);
position: absolute;top: 423px;
}
#grassLand2{/*草地2*/
height: 14px;width: 343px;
background-image: url(../img/banner.jpg);
position: absolute;top: 423px;left: 343px;
}
</pre>
</div>
<p>将wrapBg中的overflow:hidden 注释掉的<a href="/tag/yemian/" target="_blank" class="keywords">页面</a><a href="/tag/xiaoguo/" target="_blank" class="keywords">效果</a></p>
<p style="text-align: center"><img id="theimg" alt="" src="https://files.jb51.cc/file_images/article/201612/20161215102116171.jpg?20161115102128" /></p>
<p style="text-align: center">开始界面.jpg
</p>
<p><h3>2.3 JS
</h3></p>
<p>小鸟煽动翅膀的<a href="/tag/xiaoguo/" target="_blank" class="keywords">效果</a>需要用到逐帧动画的原理
逐帧动画是一种常见的动画形式（Frame By Frame），其原理是在“连续的关键帧”中分解动画动作，也就是在时间轴的每帧上逐帧绘制不同的<a href="/tag/neirong/" target="_blank" class="keywords">内容</a>，使其连续播放而成动画。</p>
<p><p class="pic_center"><img id="theimg" alt="" src="https://files.jb51.cc/file_images/article/201612/20161215102153130.jpg?2016111510221" /></p></p>
<p>2.3.1 开始<a href="/tag/biaoti/" target="_blank" class="keywords">标题</a>的摆动</p>
<div class="jb51code">
<pre class="brush:js;">
var jsHeadTitle = document.getElementById("headTitle");// <a href="/tag/huoqu/" target="_blank" class="keywords">获取</a><a href="/tag/biaoti/" target="_blank" class="keywords">标题</a>
var jsHeadBird = document.getElementById("headBird"); // <a href="/tag/huoqu/" target="_blank" class="keywords">获取</a><a href="/tag/biaoti/" target="_blank" class="keywords">标题</a>中小鸟
<p>var Y = 3;//<a href="/tag/biaoti/" target="_blank" class="keywords">标题</a>的摆动幅度<br />
var index = 0;<br />
var imgArr = ["img/bird0.png","img/bird1.png"]<br />
//将小鸟<a href="/tag/tupian/" target="_blank" class="keywords">图片</a>路径放入一个数组，利用逐帧动画的原理做出小鸟翅膀摆动的样子<br />
var headWaveTimer = setInterval(headWave,200); //设置<a href="/tag/biaoti/" target="_blank" class="keywords">标题</a>上下摆动的定时器<br />
function headWave() {<br />
Y *= -1;<br />
jsHeadTitle.style.top = jsHeadTitle.offsetTop + Y + "px";<br />
jsHeadBird.src = imgArr[index++];<br />
if (index == 2) {<br />
index = 0;<br />
}<br />
}</p>
</pre>
</div>
<p>2.3.2 移动的草地</p>
<div class="jb51code">
<pre class="brush:js;">
var jsGrassLand1 = document.getElementById("grassLand1"); //<a href="/tag/huoqu/" target="_blank" class="keywords">获取</a>草地1
var jsGrassLand2 = document.getElementById("grassLand2"); //<a href="/tag/huoqu/" target="_blank" class="keywords">获取</a>草地2
<p>var landTimer = setInterval(landRun,30); //让草地动起来的定时器<br />
function landRun() {<br />
if (jsGrassLand1.offsetLeft <= -343) {<br />
jsGrassLand1.style.left = "343px";<br />
}<br />
if (jsGrassLand2.offsetLeft <= -343) {<br />
jsGrassLand2.style.left = "343px";<br />
}<br />
jsGrassLand1.style.left = jsGrassLand1.offsetLeft - 3 + "px";<br />
jsGrassLand2.style.left = jsGrassLand2.offsetLeft - 3 + "px";<br />
}</p>
</pre>
</div>
<p>2.3.3 Start按键
</p>
<div class="jb51code">
<pre class="brush:js;">
var jsStartBtn = document.getElementById("startBtn");
jsStartBtn.onclick = function() { //为start按键<a href="/tag/tianjia/" target="_blank" class="keywords">添加</a>点击事件处理程序
jsHeadTitle.style.display = "none"; //隐藏<a href="/tag/biaoti/" target="_blank" class="keywords">标题</a>
clearInterval(headWaveTimer); //<a href="/tag/guanbi/" target="_blank" class="keywords">关闭</a>让<a href="/tag/biaoti/" target="_blank" class="keywords">标题</a>摆动的定时器
jsStartBtn.style.display = "none"; //隐藏按键
//待<a href="/tag/tianjia/" target="_blank" class="keywords">添加</a><a href="/tag/gongneng/" target="_blank" class="keywords">功能</a>
//点击开始按键进入游戏界面
}
</pre>
</div>
<p>完成后的<a href="/tag/xiaoguo/" target="_blank" class="keywords">效果</a>（注释掉了wrapBg中的overflow:hidden ）</p>
<p style="text-align: center"><p class="pic_center"><img id="theimg" alt="" src="https://files.jb51.cc/file_images/article/201612/20161215102258168.gif?20161115102310" /></p></p>
<p style="text-align: center">start01.gif</p>
<p>接下来我们开发“游戏界面”
<h3>3. “游戏界面”的开发
</h3>游戏界面中有三样元素，分别是“小鸟”，“障碍”，和“计分器”，我们依次来创建相应的对象。
<span style="color: #800000"><h3>3.1 小鸟
</h3>首先，创建小鸟的对象， bird.js <a href="/tag/wenjian/" target="_blank" class="keywords">文件</a>。
</p>
<div class="jb51code">
<pre class="brush:js;">
var bird = {
flyTimer:null,//小鸟飞翔定时器
wingTimer:null,//小鸟翅膀摆动定时器
<p>div:document.createElement("div"),showBird:function(parentObj) {<br />
this.div.style.width = "40px";<br />
this.div.style.height = "28px";<br />
this.div.style.backgroundImage = "url(img/bird0.png)";<br />
this.div.style.backgroundRepeat = "no-repeat";<br />
this.div.style.position = "absolute";<br />
this.div.style.left = "50px";<br />
this.div.style.top = "200px";<br />
this.div.style.zIndex = "1";</p>
<p>parentObj.appendChild(this.div); //将小鸟DIV插入游戏界面中<br />
},fallSpeed: 0,//小鸟下落速度<br />
flyBird: function(){ //控制小鸟飞翔下落的<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a><br />
bird.flyTimer = setInterval(fly,40);<br />
function fly() {<br />
bird.div.style.top = bird.div.offsetTop + bird.fallSpeed++ + "px";<br />
if (bird.div.offsetTop < 0) {<br />
bird.fallSpeed = 2; //这里用于控制小鸟不要飞出界面<br />
}<br />
if (bird.div.offsetTop >= 395) {<br />
bird.fallSpeed = 0;<br />
clearInterval(bird.flyTimer); //一旦飞到地面，清除定时器<br />
clearInterval(bird.wingTimer); //清除翅膀摆动定时器<br />
}<br />
if (bird.fallSpeed > 12) {<br />
bird.fallSpeed = 12; //鸟的最大下落速度控制在12<br />
}<br />
}<br />
},wingWave: function() { //控制小鸟煽动翅膀的<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a><br />
var up = ["url(img/up_bird0.png)","url(img/up_bird1.png)"];<br />
var down = ["url(img/down_bird0.png)","url(img/down_bird1.png)"];<br />
var i = 0,j = 0;<br />
bird.wingTimer = setInterval(wing,120);//逐帧动画，小鸟煽动翅膀<br />
function wing() {<br />
if (bird.fallSpeed > 0) {<br />
bird.div.style.backgroundImage = down[i++];<br />
if (i==2) {i = 0}<br />
}if (bird.fallSpeed < 0) {<br />
bird.div.style.backgroundImage = up[j++];<br />
if (j==2) {j = 0}<br />
}<br />
}<br />
},};</p>
</pre>
</div>
<p>下面，实现点击start按钮时，加载小鸟。(在之前的<a href="/tag/daima/" target="_blank" class="keywords">代码</a>基础上<a href="/tag/tianjia/" target="_blank" class="keywords">添加</a>)
</p>
<div class="jb51code">
<pre class="brush:js;">
jsStartBtn.onclick = function() { //为start按键<a href="/tag/tianjia/" target="_blank" class="keywords">添加</a>点击事件处理程序
jsHeadTitle.style.display = "none"; //隐藏<a href="/tag/biaoti/" target="_blank" class="keywords">标题</a>
clearInterval(headWaveTimer); //<a href="/tag/guanbi/" target="_blank" class="keywords">关闭</a>让<a href="/tag/biaoti/" target="_blank" class="keywords">标题</a>摆动的定时器
jsStartBtn.style.display = "none"; //隐藏按键
bird.showBird(jsWrapBg); //插入小鸟到界面中
bird.flyBird(); //控制小鸟飞翔下落
bird.wingWave(); //逐帧动画，小鸟煽动翅膀
jsWrapBg.onclick = function(){
bird.fallSpeed = -8;
};
//待<a href="/tag/tianjia/" target="_blank" class="keywords">添加</a><a href="/tag/gongneng/" target="_blank" class="keywords">功能</a>
//点击开始按键进入游戏界面
}</pre>
</div>
<p><a href="/tag/tianjia/" target="_blank" class="keywords">添加</a>小鸟后的<a href="/tag/xiaoguo/" target="_blank" class="keywords">效果</a></p>
<p style="text-align: center"><p class="pic_center"><img id="theimg" alt="" src="https://files.jb51.cc/file_images/article/201612/20161215102424828.gif?20161115102431" /></p></p>
<p style="text-align: center">play01.gif
</p>
<p><span style="color: #800000"><h3>3.2 障碍（上方水管和下方水管）</h3></p>
<p style="text-align: center"><p class="pic_center"><img id="theimg" alt="" src="https://files.jb51.cc/file_images/article/201612/20161215103157419.jpg?20161115103213" /></p></p>
<p style="text-align: center">block示意图.png</p>
<p>障碍分为上方管道和下方管道，如示意图所示结构嵌套，这样就可以通过<a href="/tag/suiji/" target="_blank" class="keywords">随机</a>设置DownDiv2的高度和gapHeight的高度，来改变<a href="/tag/shengcheng/" target="_blank" class="keywords">生成</a>障碍的形态
block.js
</p>
<div class="jb51code">
<pre class="brush:js;">
function Block() {
this.upDivWrap = null;
this.downDivWrap = null;
this.downHeight = ba<a href="/tag/SEO/" title="SEO">SEO</a>bj.randomNum(0,150);
this.gapHeight = ba<a href="/tag/SEO/" title="SEO">SEO</a>bj.randomNum(150,160);
this.upHeight = 312 - this.downHeight - this.gapHeight;
<p>// 用来<a href="/tag/shengcheng/" target="_blank" class="keywords">生成</a>Div的<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a><br />
this.createDiv = function(url,height,positionType,left,top) {<br />
var newDiv = document.createElement("div");<br />
newDiv.style.width = "62px";<br />
newDiv.style.height = height;<br />
newDiv.style.position = positionType;<br />
newDiv.style.left = left;<br />
newDiv.style.top = top;<br />
newDiv.style.backgroundImage = url; //"url(/img/0.jpg)"<br />
return newDiv;<br />
};</p>
<p>this.createBlock = function() {<br />
var upDiv1 = this.createDiv("url(img/up_mod.png)",this.upHeight + "px");<br />
var upDiv2 = this.createDiv("url(img/up_pipe.png)","60px");<br />
this.upDivWrap = this.createDiv(null,null,"absolute","450px");<br />
this.upDivWrap.appendChild(upDiv1);<br />
this.upDivWrap.appendChild(upDiv2);//<a href="/tag/shengcheng/" target="_blank" class="keywords">生成</a>上方管道</p>
<p>var downDiv1 = this.createDiv("url(img/down_pipe.png)","60px");<br />
var downDiv2 = this.createDiv("url(img/down_mod.png)",this.downHeight +"px");<br />
this.downDivWrap = this.createDiv(null,"450px",363 - this.downHeight + "px");<br />
this.downDivWrap.appendChild(downDiv1);<br />
this.downDivWrap.appendChild(downDiv2); //<a href="/tag/shengcheng/" target="_blank" class="keywords">生成</a>下方的管道</p>
<p>jsWrapBg.appendChild(this.upDivWrap);<br />
jsWrapBg.appendChild(this.downDivWrap);<br />
};</p>
<p>this.moveBlock = function() { //控制管道移动的<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a><br />
this.upDivWrap.style.left = this.upDivWrap.offsetLeft - 3 + "px";<br />
this.downDivWrap.style.left = this.downDivWrap.offsetLeft - 3 + "px";<br />
};<br />
}</p>
</pre>
</div>
<p>公共对象<a href="/tag/wenjian/" target="_blank" class="keywords">文件</a> ba<a href="/tag/SEO/" title="SEO">SEO</a>bj.js ，用来提供<a href="/tag/suiji/" target="_blank" class="keywords">随机</a>数，和两个矩形div的碰撞检测
</p>
<div class="jb51code">
<pre class="brush:js;">
var baseObj = {
//随机数
randomNum: function(min,max) {
return parseInt(Math.random() * (max - min + 1) + min);
},//两个矩形元素之间的碰撞检测
rectangleCrashExamine: function (obj1,obj2) {
var obj1Left = obj1.offsetLeft;
var obj1Width = obj1.offsetLeft + obj1.offsetWidth;
var obj1Top = obj1.offsetTop;
var obj1Height = obj1.offsetTop + obj1.offsetHeight;
<p>var obj2Left = obj2.offsetLeft;<br />
var obj2Width = obj2.offsetLeft + obj2.offsetWidth;<br />
var obj2Top = obj2.offsetTop;<br />
var obj2Height = obj2.offsetTop + obj2.offsetHeight;</p>
<p>if (!(obj1Left > obj2Width || obj1Width < obj2Left || obj1Top > obj2Height || obj1Height < obj2Top)) {<br />
return true;<br />
}<br />
return false;<br />
},};</p>
</pre>
</div>
<p>下面我的想法是在start按钮点击的时候创建一个block，把这个block存储到数组 blocksArr 中，在 landTimer 定时器的<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a> landRun 中检查此数组的长度，如果数组不为空数组，那么就让数组中所有的block移动。
检查最后一个block离开的距离，达到一定距离，就重新new 一个block，<a href="/tag/tianjia/" target="_blank" class="keywords">添加</a>到数组。
检查第一个block，一旦达到一定位置，就在结构中移除downDivWrap 和 upDivWrap，同时在数组中<a href="/tag/shanchu/" target="_blank" class="keywords">删除</a>。
</p>
<div class="jb51code">
<pre class="brush:js;">
var landTimer = setInterval(landRun,30); //让草地动起来的定时器
function landRun() {
if (jsGrassLand1.offsetLeft <= -343) {
jsGrassLand1.style.left = "343px";
}
if (jsGrassLand2.offsetLeft <= -343) {
jsGrassLand2.style.left = "343px";
}
jsGrassLand1.style.left = jsGrassLand1.offsetLeft - 3 + "px";
jsGrassLand2.style.left = jsGrassLand2.offsetLeft - 3 + "px";
<p>if (blocksArr.length) {<br />
for (var i = 0; i < blocksArr.length; i++) {<br />
blocksArr[i].moveBlock();<br />
var x =baseObj.rectangleCrashExamine(blocksArr[i].downDivWrap,bird.div);<br />
var y = baseObj.rectangleCrashExamine(blocksArr[i].upDivWrap,bird.div);<br />
var z = bird.div.offsetTop >= 390;<br />
if (x || y || z) {<br />
window.clearInterval(landTimer);//清除landTimer定时器<br />
bird.fallSpeed = 0; //小鸟下落<br />
jsWrapBg.onclick = null; //消除点击事件</p>
<pre><code> }
}
if (blocksArr[blocksArr.length - 1].downDivWrap.offsetLeft < (450 - blockDistance)) {
blockDistance = ba<a href="/tag/SEO/" title="SEO">SEO</a>bj.randomNum(130,250);
var newBlock = new Block();
newBlock.createBlock();
blocksArr.push(newBlock);
}
if (blocksArr[0].downDivWrap.offsetLeft < -50) {
jsWrapBg.removeChild(blocksArr[0].downDivWrap);
jsWrapBg.removeChild(blocksArr[0].upDivWrap);
blocksArr.shift(blocksArr[0]);
}</code></pre>
<p>}<br />
}</p>
</pre>
</div>
<p>当前的游戏<a href="/tag/xiaoguo/" target="_blank" class="keywords">效果</a></p>
<p style="text-align: center"><p class="pic_center"><img id="theimg" alt="" src="https://files.jb51.cc/file_images/article/201612/20161215103308867.gif?20161115103318" /></p></p>
<p style="text-align: center">play02.gif
</p>
<p><span style="color: #800000"><h3>3.3 计分器
</h3></p>
<p>游戏中的计分器相对较好实现</p>
<div class="jb51code">
<pre class="brush:xhtml;">
<div id="<a href="/tag/score/" target="_blank" class="keywords">score</a>">
<div id="num1"></div>
<div id="num2"></div>
<div id="num3"></div>
</div>
var js<a href="/tag/score/" target="_blank" class="keywords">score</a> = document.getElementById("<a href="/tag/score/" target="_blank" class="keywords">score</a>");
var jsNum1 = document.getElementById("num1");
var jsNum2 = document.getElementById("num2");
var jsNum3 = document.getElementById("num3");
var <a href="/tag/score/" target="_blank" class="keywords">score</a> = 0;
</pre>
</div>
<p>今天先这样了，改天再写。哈哈</p>
<p>以上就是本文的全部<a href="/tag/neirong/" target="_blank" class="keywords">内容</a>，希望对大家的学习有所帮助，也希望大家多多<a href="/tag/zhichi/" target="_blank" class="keywords">支持</a>编程之家。</p></div>
<div class="topcard-tags"><a href="/tag/Bird/" class="tag_link" target="_blank">Bird</a><a href="/tag/Fly/" class="tag_link" target="_blank">Fly</a><a href="/tag/jsp/" class="tag_link" target="_blank">js</a><a href="/tag/xiaoyouxi/" class="tag_link" target="_blank">小游戏</a></div>
<ul class="list-group">
<li class="list-group-item"><a href="/js/43514.html" title="JS中对数组元素进行增删改移的方法总结">上一篇：JS中对数组元素进行增删改移的方法</a><a href="/js/43512.html" title="canvas 画布在主流浏览器中的尺寸限制详细介绍" class="text-muted pull-right">下一篇：canvas 画布在主流浏览器中的尺寸限</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/1005688.html" title="重装系统软件怎么保留文件" target="_blank">· 重装系统软件怎么保留文件</a><span class="text-muted pull-right">12-02</span></dd>
<dd><a href="/win11/1005687.html" title="重装系统保留软件：简单教程" target="_blank">· 重装系统保留软件：简单教程</a><span class="text-muted pull-right">12-02</span></dd>
<dd><a href="/win11/1005686.html" title="如何重装系统并保留软件" target="_blank">· 如何重装系统并保留软件</a><span class="text-muted pull-right">12-02</span></dd>
<dd><a href="/win11/1005685.html" title="如何重装系统软件并保留数据" target="_blank">· 如何重装系统软件并保留数据</a><span class="text-muted pull-right">12-02</span></dd>
<dd><a href="/win11/1005684.html" title="如何重装系统软件并保留网络设置" target="_blank">· 如何重装系统软件并保留网络设置</a><span class="text-muted pull-right">12-02</span></dd>
<dd><a href="/win11/1005683.html" title="如何重装台式电脑系统" target="_blank">· 如何重装台式电脑系统</a><span class="text-muted pull-right">12-02</span></dd>
<dd><a href="/win11/1005682.html" title="如何重装系统并保留原有软件" target="_blank">· 如何重装系统并保留原有软件</a><span class="text-muted pull-right">12-02</span></dd>
<dd><a href="/win11/1005681.html" title="如何重装Lenovo电脑系统" target="_blank">· 如何重装Lenovo电脑系统</a><span class="text-muted pull-right">12-02</span></dd>
<dd><a href="/win11/1005680.html" title="重装系统保留数据：轻松恢复系统，保留重要文件" target="_blank">· 重装系统保留数据：轻松恢复系统，保留重要文件</a><span class="text-muted pull-right">12-02</span></dd>
<dd><a href="/win11/1005679.html" title="无法正常开机，如何重装系统" target="_blank">· 无法正常开机，如何重装系统</a><span class="text-muted pull-right">12-02</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>
