jQuery实现简单的打字游戏功能

原创于 2017-07-05 18:41:35 发布 · 520 阅读

0 ·

CC 4.0 BY-SA版权

jQuery 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何利用jQuery和CSS实现一个简单的字母下落特效，通过动态生成带有随机字符的div元素，并控制其从顶部逐渐向下移动直至消失。同时，用户可以通过键盘输入来消除对应的字符元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css:
<style>
	*{
		padding:0px;
		margin:0px
		}
	#main{
		width:1000px;
		height:600px;
		}
	.div{
		width:20px;
		line-height:0px
	
		
	}
</style>
jQuery:
<script>
    	
		$(function(){
		var i=1;
		var zd;
		function show(){
		clearTimeout(a);
		var zm=parseInt(Math.random()*25);
		zd=String.fromCharCode(zm+65);
		var wy=Math.random()*500;//设置偏移量
		var a=setTimeout(show,1000);
		$("#main").append($("<div class='div' name='"+zd+"' id='a"+i+"'>"+zd+"</div>"));
		$("div[id='a"+i+++"']").offset({ top: 0, left: wy}).animate({top:600},10000,function() {
			
			$(this).remove();
			});
		}show();
		
		$(window).keydown(function(event){
  			var value=event.keyCode;
			var re=String.fromCharCode(value);
			if(re!=null){
				$("div[name='"+re+"']").remove();
				}
		});
		})
    </script>

不加line-height:0px,会导致字母消失时,其他的字母向上回升