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

<!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. 洛谷P3392 涂国旗

    P3392 涂国旗 107通过 507提交 题目提供者kkksc03 标签 难度普及- 提交  讨论  题解 最新讨论 直接读字符会wa WA?-- 为什么不对... 跪求找错 快点给钱 这不就是荷兰 ...

  2. V8 data struct

    参考: [1]. 使用 Google V8 引擎开发可定制的应用程序: http://www.ibm.com/developerworks/cn/opensource/os-cn-v8engine/ ...

  3. md5算法

    md5算法 不可逆的:原文-->密文.用系统的API可以实现: 123456 ---密文 1987 ----密文: 算法步骤: 1.用每个byte去和11111111做与运算并且得到的是int类 ...

  4. JavaScript笔记:函数

    函数是定义一次但却可以调用或执行任意多次的代码块. 一.函数定义 javascript中的函数使用function关键字来定义,常用的函数定义分为三种形式: 声明式函数定义 function sum( ...

  5. xml 配置文件规范 校验

    背景:做的数据同步框架,数据同步种类通过xml配置文件添加.为了系统的稳定性,我们只能认为将来写这个运行配置xml的人是一个傻瓜,那么对xml格式校验就很重要. 通过dom4j,是可以完成对xml格式 ...

  6. mysql优化笔记

    query_cache_size 查询缓存 query_cache_type缓存是否打开 OFF/ON read_buffer_size读缓存SET GLOBAL query_cache_size=1 ...

  7. Nancy+BUI+SQLite自动更新服务端和客户端保护更新程序

    写了一个自动更新服务网站和自动更新客户端.基本功能测试完毕.记录下 项目地址:https://github.com/TeemoHQ/AutoUpdate 需求 自动集成,回退版本,守护进程,服务端操作 ...

  8. 页面可见生Page Visibility

    Page Visibility 会在浏览器的 document 对象上添加两个属性 hidden 和 visibilityState .如果当前的标签被激活了,那么 document.hidden 的 ...

  9. linux系统PXE+Kickstart自动安装系统

    一.PXEPXE(Pre-boot Execution Environment,预启动执行环境)是由Intel公司开发的最新技术,工作于Client/Server的网络模式,支持工作站通过网络从远端服 ...

  10. web前端之性能优化

    作为一个前端工作人员,而且只会写点HTML5和CSS3的“假”前端工程师,为了能更好地理解一下前端的花花世界,最近拜读了<高性能网站建设指南>一书,对作者提出的前端性能优化的14个规则获益 ...