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>
  • 相关阅读:
    ORACLE数据库概念
    禅道环境搭建手册
    SQL语句实例
    selenium+Python(三)键盘和鼠标操作
    Python 学习网站
    【CSS】display: inline-block,内联元素
    【JS】学习18天Jquery Moblie的总结笔记。
    【.NET】Cookie操作类
    【.NET】转载:使用FileStream批量上传文件。
    【.NET】XML文件的创建,修改,删除
  • 原文地址:https://www.cnblogs.com/forever-xuehf/p/9033028.html
Copyright © 2011-2022 走看看