垒房子的小游戏，还没加上得分选项，这是自己的练习笔记，留作笔记随时查看。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>垒房子</title>
        <style type="text/css">
            body,ul,li{
                margin: 0;
                padding:0;
            }
            #wrap{
                width: 600px;
                height: 700px;
                border: 1px solid red;
                /*box-sizing: border-box;*/
                margin: 20px auto;
                position: relative;
                background: greenyellow;
            }
            ul{
                position: absolute;
                /*box-sizing: border-box;*/
                left: 0px;
                bottom: 0;
            }
            ul:after{
                content:'';
                display: block;
                clear: both;
            }
            li{
                list-style: none;
                width: 20px;
                height: 20px;
                border: 1px solid white;
                background: orange;
                box-sizing: border-box;
                float: left;
            }
        </style>
    </head>
    <body>
        <div id="wrap">
            
        </div>
    </body>
    <script type="text/javascript">
        var wrap = document.getElementById('wrap');
        //创建ul及li
        var a = 0;//当前ul的bottom值
        function createUl (a,num) {
            var oul = document.createElement('ul');
            for(var i = 0; i < num; i++){
                var li = document.createElement('li');
                oul.appendChild(li);
            }
            wrap.appendChild(oul);
            console.log(oul.offsetHeight)
            oul.style.bottom = a * oul.offsetHeight + 'px';
            var timer;
            oul.move = function() {
                var offleft = oul.offsetLeft;
                var b = 20;//每次移动的距离
                timer = setInterval(function(){
                    
                    oul.style.left = offleft + 'px';
                    offleft += b;
                    console.log(wrap.offsetWidth)
                    if (offleft == wrap.offsetWidth - oul.offsetWidth - 2) {
                        b *= -1;
                    }else if(offleft == 0){
                        b *= -1;
                    }
                },300)
            }
            oul.move();
            oul.stop = function() {
                clearInterval(timer);
            }
            return oul;
        }
        function deletli (before,content) {
            var offL = content.offsetLeft - before.offsetLeft;
            //左边
            if (offL < 0) {
                var num = Math.floor(Math.abs(offL / 20));
                if (num >= content.children.length) {
                    alert('结束')
                    renturn;
                }
                for (var i = 0; i < num; i++) {
                    content.children[0].remove();
                }
                content.style.left = num * 20 + content.offsetLeft + 'px';
            }else{
                var num = Math.floor(Math.abs(offL / 20));
                if (num >= content.children.length) {
                    alert('结束')
                    renturn;
                }
                for (var i = 0; i < num; i++) {
                    content.children[0].remove();
                }
            }    
        }
        var first = createUl(a,20)
        a++;
        wrap.onclick = function(){
            first.stop();
            var uls = document.querySelectorAll('ul');
            if (uls.length > 1) {
                deletli(uls[uls.length-2],first)
            }
            var myul = createUl(a,first.offsetWidth/20);
            first = myul
            a++;
        }
    </script>
</html>

// = content.children.length) {
alert('结束')
renturn;
}
for (var i = 0; i = content.children.length) {
alert('结束')
renturn;
}
for (var i = 0; i 1) {
deletli(uls[uls.length-2],first)
}
var myul = createUl(a,first.offsetWidth/20);
first = myul
a++;
}

// ]]>

JS--垒房子的更多相关文章

  1. Kafka消费异常处理

    org.apache.kafka.clients.consumer.CommitFailedException: Commit cannot be completed since the group ...

  2. html-css-js基本理解和简单总结

    目录 一.对于网页的基本理解 1.网页是一种数据展示和信息交互的载体 2.网页组成部分 3.支撑一个网页的技术模块 二.html的理解和技术笔记 1.html理解 2.html技术笔记-html标签 ...

  3. js返回顶部效果

    当用户浏览的网页过于长的时候,用户在浏览到网页底部想要在返回顶部需要滚动好几次滚轮才能返回顶部,不仅麻烦,而且用户体验也会很差.现在的大多是页面都会在页面顶部或者是页面的可见区域的某一位置固定一个按钮 ...

  4. JS入门学习，编写一个简易月历

    //今天最头疼的地方在于 getElementsByClassName()的 [] ~~ //错了N遍后只能说有点点头绪,如果不加[] 查找的就是全部吧 加上[]能精确控制的标签或者class < ...

  5. D3.js学习记录

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 全国城市三级联动 html+js

    全国城市三级联动,没有css,所以屏幕的自适应必须自己想办法,手机端慎用(最好不要用,因为有些我也说不出的展示问题). html页面 <!DOCTYPE html> <html> ...

  7. js 简繁体字转换

    有些项目需要用到简体和繁体两种字体,在js前台进行转换比较方便而且显示速度没有延时 是一个比较好的解决方案. var _isFT_CS = 0// 简体 var _isFT_CT = 1// 繁体 v ...

  8. 常用JS效果 需要时更新。。。

    1.手风琴效果 JS: $(function() {     var aMenuOneLi = $(".menu-one > li");     var aMenuTwo = ...

  9. 通过JS实现网站繁体简体互换

    html部分 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

随机推荐

  1. sybase ODBC驱动

    windows64位系统ODBC数据源管理器位置 64位 C:\Windows\System32\odbcad32.exe 32位 C:\Windows\SysWOW64\odbcad32.exe s ...

  2. 安卓工程 Installation error：INSTALL_PARSE_FAILED_MANIFEST_MALFORMED的解决办法

    解决办法:把包名首字母改成小写就好了.

  3. spi can't create GMem lock

    管理员身份启动cmd,输入下方命令 netsh winsock reset Successfully之后重启电脑就解决了

  4. win7删除一些顽固的文件夹

    创建一个记事本,键入以下命令: DEL /F /A /Q \\?\%1 RD /S /Q \\?\%1 然后保存为bat文件,然后将要删除的文件或文件夹拖入bat的文件图标上,既可以强力删除一些无法删 ...

  5. mysql 忘记root 密码的解决方法

    LINUX 1.切换root 用户 2.停止mysqld 服务 /etc/inid.d mysqld stop 3.跳过验证登录 mysqld_safe --skip-grant-tables &am ...

  6. Ansible playbook API 开发 调用测试

    Ansible是Agentless的轻量级批量配置管理工具,由于出现的比较晚(13年)基于Ansible进行开发的相关文档较少,因此,这里通过一些小的实验,结合现有资料以及源码,探索一下Ansible ...

  7. 使用VideoToolbox硬编码H.264<转>

    文/落影loyinglin(简书作者)原文链接:http://www.jianshu.com/p/37784e363b8a著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. ======= ...

  8. jquery实现旋转木马的插件slick

    旋转木马的是一般网站上都会有的图片轮播效果, html: <section id="features" class="blue" style=" ...

  9. XML文件中CDATA的作用

    操作XML文件时,如果允许用户输入内容,例如∶"< ".">"."/".""等,当生成XML时,会破坏了XM ...

  10. C# MVC ( 将控制器的实体类注册到视图 )

    (1)控制器  代码 using System; using System.Collections.Generic; using System.Linq; using System.Web; usin ...