用jquery简单实现打字游戏

首先html部分
<input type="button" id="btn1" value="开始游戏"/>
<span class="score">0</span>
其次简单css样式
 .score{
            display: none;
            position: absolute;
            top:0;
            right: 0;
        }
        .letter{
            position: absolute;
            top:0;
            left: 0;
            width: 20px;
            height: 20px;
            background-color: red;
        }
最后jquery实现打字游戏
 $(function(){
        var score1=0;
        $("#btn1").click(function(){
            $(this).hide();
            $(".score").show();
            createSpan();
        });
        function createSpan(){
            var k=Math.floor(Math.random()*26)+65;
            var ch=String.fromCharCode(k);
            var i=parseInt(Math.random()*255);
            var j=parseInt(Math.random()*255);
            var m=parseInt(Math.random()*255);
            var co=i+","+j+","+m;
            var span=$("<span class='letter letter"+k+"'>"+ch+"</span>");
            span.css("left",parseInt(Math.random()*document.documentElement.clientWidth));
            span.css("top",parseInt(Math.random()*document.documentElement.clientHeight));
            span.css("background-color","rgb("+co+")");
            $("body").append(span);
            setTimeout(createSpan,500);
        }
        $(document).keydown(function(e){
            var clientheight=(document.documentElement.clientHeight+200);
            $(".letter"+ e.keyCode).animate({top:clientheight+"px"},1000,function(){
                $(this).remove();
                score1+=10;
                $(".score").html(score1);
            });
        })
    })

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以使用 jQuery 的 `setInterval` 方法来实现动态打字效果。具体实现步骤如下: 1. 在 HTML 中创建一个包含文本内容的元素,例如一个 `div` 元素。 2. 在 JavaScript 中使用 jQuery 选择该元素,并将要显示的文本内容保存到一个变量中。 3. 使用 jQuery 的 `text` 方法将该元素的文本内容清空。 4. 定义一个 `index` 变量,表示当前要显示的字符在文本内容中的位置,初始值为 0。 5. 使用 `setInterval` 方法循环执行一个函数,该函数每次将文本内容中的下一个字符添加到元素中,并将 `index` 变量加 1,直到显示完全部文本内容为止。 以下是示例代码: HTML: ```html <div id="text"></div> ``` JavaScript: ```javascript $(document).ready(function() { var text = "这是要显示的文本内容。"; var index = 0; var intervalId = setInterval(function() { if (index < text.length) { $('#text').text($('#text').text() + text[index]); index++; } else { clearInterval(intervalId); } }, 100); // 每隔 100 毫秒执行一次函数 }); ``` 在上面的示例代码中,`text` 变量保存要显示的文本内容,`index` 变量表示当前要显示的字符在文本内容中的位置,`intervalId` 变量保存 `setInterval` 方法返回的 ID,用于在显示完全部文本内容后停止循环执行函数。`setInterval` 方法每隔 100 毫秒执行一次函数,该函数每次将文本内容中的下一个字符添加到 `div` 元素中,并将 `index` 变量加 1,直到显示完全部文本内容为止。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值