第26天，地址联动，div转圈

19年9月

发布日期: 2019-09-08

阅读次数:

地址联动选择：

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>JS</title>
    <style>

    </style>
</head>

<body>
    <h1>表单事件--onchange 地址联动效果</h1>
    <hr> 请选择您的地址：
    <select id="pro"></select>
    <select id="city"></select>

    <script>
        //声明数组， 省的信息
        var proList = ['江苏', '浙江', '安徽', '江西', '福建'];
        //城市的信息
        var cityList = new Array();
        cityList[0] = ['南京', '苏州', '常州', '扬州', '徐州'];
        cityList[1] = ['杭州', '嘉兴', '绍兴', '衢州', '宁波'];
        cityList[2] = ['合肥', '安庆', '马鞍山', '黄山', '芜湖'];
        cityList[3] = ['南昌', '赣州', '九江', '景德镇', '上饶'];
        cityList[4] = ['福州', '泉州', '漳州', '厦门', '晋江'];
        //获取select
        var pro = document.getElementById('pro');
        var city = document.getElementById('city');
        //第一个 select 框 中输出 省的信息
        for (var i = 0; i < proList.length; i++) {
            pro.add(new Option(proList[i], i));
        }
        //绑定 change事件
        pro.onchange = function() {
                //情况以前的选型
                city.options.length = 0;
                //获取 选择的option
                var index = pro.value;
                //根据索引值取出 对应的城市 信息
                var citys = cityList[index];
                //遍历
                for (var i = 0; i < citys.length; i++) {
                    city.add(new Option(citys[i], i));
                }
            }
            //手工出发 change事件
        pro.onchange();
    </script>

</body>

</html>

div转圈圈：

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>正方形</title>
    <style>
        #box {
            width: 400px;
            height: 400px;
            background: #eee;
            margin: 100px auto;
            position: relative;
        }
        
        #point {
            width: 10px;
            height: 10px;
            background: red;
            position: relative;
        }
    </style>
</head>

<body>
    <div id="box">
        <div id="point" style="top:0;left:0">

        </div>
    </div>
</body>
<script>
    setInterval(run, 1);
    //run()
    var x = 0; //top
    var y = 0; //left
    function run() {
        if (x < 390 && y == 0) {
            down()
        }
        if (x == 390 && y < 390) {
            right()
        }
        if (y == 390 && x > 0) {
            up()
        }
        if (x == 0 && y > 0) {
            left()
        }
    }

    function down() {
        point.style.top = x + 'px';
        x++;
    }

    function right() {
        point.style.left = y + 'px';
        y++;
    }

    function up() {
        point.style.top = x + 'px';
        x--;
    }

    function left() {
        point.style.left = y + 'px';
        y--;
    }
</script>

</html>