zoukankan      html  css  js  c++  java
  • jQuery实例

    看书看到的一个jQuery小例子,分享给大家。(jquery引入可以选择下载引入或者在jQuery官网找CDN)

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>单机游戏</title>
    </head>
    <body>
        <div id="container"></div>
        <script src="js/jquery.min.js"></script>
        <script>
            var width=$(window).width(),height=$(window).height(),//首先使用jq获取窗口尺寸
                    countdown=20, countup=0;//定义两个变量分别存放剩下要显示的方块数和用户已单击的方块数
            var nextElement=function(){//定义nextElement函数,每调用一次,就添加一个方块到页面中
                if(countdown==0){//剩下要点击的方块数为0时游戏结束
                    gameOver();
                    return;
                }//未结束时,添加创建一个50*50的方块生成随机的xy位置并且样式化
                var x=Math.random ()*(width-50),y=Math.random ()*(height-50);
                $("<div>").css({
                    position:'absolute',
                    left:x,top:y,
                    50,height:50,
                    backgroundColor:'red'
                }).appendTo("#container");
                countdown--;
             };
            var gameOver=function(){//定义gameOver函数
                clearInterval (timer);//首先清除间隔定时器,然后弹出一个提醒消息输赢
                if(countup>15){
                    alert("You won!");
                }else{
                    alert("You lost!");
                }
            };
            var timer=setInterval (nextElement,500);//指向setInterval的调用,每500毫秒创建一个新方块
            $("#container").on('mousedown','div',function(e){//$(selector).on调用,游戏捕获#container元素内部的所有<div>的所有mousedown事件
                countup++;
                $(this).fadeOut();
            });
        </script>
    </body>
    </html>
  • 相关阅读:
    代码块
    hp g6 2328tx 加装ssd 机械硬盘安装到光驱位置 问题小结
    thinking java
    命令设计模式
    内部类
    模板方法模式
    UIAlertController
    一个基于qml的网络封装库
    qml package 的使用
    一个QMLListView的例子--
  • 原文地址:https://www.cnblogs.com/forever-xuehf/p/9033028.html
Copyright © 2011-2022 走看看