*{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找不到它，就报你看到的错。
