用JQuery和js写一个类似金山打字上的打气球的游戏，每隔3秒生成一个气球，但是生成的气球总是闪

JavaScript025

用JQuery和js写一个类似金山打字上的打气球的游戏，每隔3秒生成一个气球，但是生成的气球总是闪,第1张

<style>

*{margin: 0padding: 0}

.wrap{width: 500pxheight: 500pxborder: 1px solid #cccbackground: #eeemargin: 30px autoposition: relativeoverflow: hidden}

.box{position: absolutetop: 510pxwidth: 50pxheight: 50pxtext-align: centerline-height: 50pxfont-size: 22pxfont-weight: boldcolor: #666}

</style>

<div class="wrap">

</div>

<script src="http://code.jquery.com/jquery-1.11.1.js"></script>

<script>

var qiqiu={

num:0,

wrap: $(".wrap"),

box:null,

createStr: function(){

var s = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()-_ []{}<>~`+=,.:/?|\""

return s[parseInt(s.length*Math.random())]

},

create: function(){

var ele = $("<div class='box' />").appendTo(this.wrap)

ele.html(this.createStr())

ele.data("code",ele.html().charCodeAt(0))

ele.css({

"left": (this.wrap.width()-50)*Math.random()

})

if(!this.box){

this.box = ele

}else {

this.box = this.box.add(ele)

}

setTimeout(function(){

qiqiu.create()

},2000)

},

move: function(){

this.timer = setInterval(function(){

qiqiu.box.css({

top: "-=3"

})

},25)

},

stop: function(){

clearInterval(this.timer)

},

destroy: function(inx){

this.box.eq(inx).css({

"color":"red",

"background":"#ffe"

}).fadeOut(100,function(){

qiqiu.box.eq(inx).remove()

})

},

hit: function(s){

this.box.each(function(inx,ele){

if($(this).data("code")===s){

qiqiu.destroy(inx)

return false

}

})

},

init: function(){

$(document).on({

"keypress": function(e){

qiqiu.hit(e.which)

return false

}

})

this.create()

this.move()

}

}

qiqiu.init()

</script>

参考下，亲测chrome

javascript(js代码)要跟网页结合起来实现某个功能，比如做一个下拉菜单，

要用js脚本去控制网页代码里面的带有某个标记的菜单区域切换，以达到显示隐藏菜单的效果，假设这个菜单有一个标记编号是id="nav"，那么js脚本执行时就要去网页代码中查找这个元素，而你网页里面并没写这个元素的话，js找不到它，就报你看到的错。