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

<!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. SDE用户密码到期

    系统使用Arcsde for oracle 11g ,一直使用正常,突然有一天客户打电话说系统中地图不显示了.登陆GIS服务器,发现sde数据已经无法链接,错误提示:“ [ORA-28002: the ...

  2. ajax传递数组到后台

    //实体类 public class Person { private int ID{get;set;} private string Name{get;set;} private int Age{g ...

  3. icePDF去水印方法

    原文:http://www.cnblogs.com/pcheng/p/5711660.html 1.首先下载到icepdf的架包. 2.用解压缩软件,对该jar文件进行解压,得到名为icepdf-co ...

  4. 中文字号VS英文字号(磅)VS像素值

    中文字号VS英文字号(磅)VS像素值八号＝5磅(5pt) ==(5/72)*96=6.67 =6px 七号＝5.5磅 ==(5.5/72)*96=7.3 =7px 小六＝6.5磅 ==(6.5/72) ...

  5. cs11_c++_lab3

    Matrix.hh class Matrix { int row; int col; int *p; void copy(const Matrix &m); void clearup(); p ...

  6. sellsa

    我看见天空很蓝 就像你在我身边的温暖 生命有太多遗憾 人越成长越觉得孤单 我很想飞 多远都不会累 才明白爱得越深心就会越痛 我只想飞 在我的天空飞 我知道你会在我身边 回忆的画面 记录的语言 爱始终是 ...

  7. 41个Web开发者JavaScript实用小技巧

    1. 将彻底屏蔽鼠标右键 oncontextmenu="window.event.returnValue=false" < table border oncontextmen ...

  8. Convert HTML to Text(转载)

    原文地址:http://www.blackbeltcoder.com/Articles/strings/convert-html-to-text  Download Source Code Intro ...

  9. CSS背景 顶上 顶下之类详解

    background: url(../images/img17.jpg)no-repeat 0px opx ; 背景的第一个属性石左右值,第二个数字是上下值 举个案例,比如图片只有1400宽300高, ...

  10. android 音频焦点

    音频焦点分为两种 1永久占用((AudioManager) getSystemService(AUDIO_SERVICE)) .requestAudioFocus(null, AudioManager ...