2021-06-22

任务一：生成广告图片
首先，可以用HTML+CSS+JavaScript在页面生成一幅广告图片

<style>
    img {
        width: 480px;
        height: 270px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -240px;
        margin-top: -135px;
    }
</style>
<div>
    <img src="image/1.jpeg" id="img">
</div>

代码预览图：

其次，用javascript数组在页面上放置多个图片，并动态计算不同广告位置的布局，实现水平间距布局。

<style>
    body{
        margin: 0;
    }
</style>
<script>
    var imgArr=new Array("image/0.jpeg","image/1.jpeg","image/2.jpeg","image/3.jpeg","image/4.jpeg");
    var window_width=1920;
    var mar=40;
    var mor=mar;
    for (var i in imgArr){
        var img_width=(window_width-mar*(imgArr.length+1))/imgArr.length;
        window.document.write(`<img src="${imgArr[i]}" style="width: ${img_width}px;margin:0 ${mar}px 0 ${mor}px;">`);
        if (mor===mar){
            mor=0;
        }
    }
</script>

到此为止只是实现了间距相等，当浏览器的页面大小变化时，并不能保持间距不变。
修改后的代码：

<style>
    body{
        margin: 0;
    }
</style>
<script>
    window.onresize=imageArray();
    function imageArray() {
        var imgArr=new Array("image/0.jpeg","image/1.jpeg","image/2.jpeg","image/3.jpeg","image/4.jpeg");
        var window_width=document.documentElement.clientWidth
        var mar=40;
        var mor=mar;
        for (var i in imgArr){
            var img_width=(window_width-mar*(imgArr.length+1))/imgArr.length;
            window.document.write(`<img src="${imgArr[i]}" style="width: ${img_width}px;margin:0 ${mar}px 0 ${mor}px;">`);
            if (mor===mar){
                mor=0;
            }
        }
    }
</script>

效果图1：

效果图2：

定时轮播图片：
实现代码：

<style>
    img{
        width: 480px;
        height: 270px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -240px;
        margin-top: -135px;
    }
    .box{
        width: 480px;
        height: 280px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -55px;
        margin-top: +95px;
    }
</style>
<div class="">
    <img src="image/1.jpeg" id="img">
    <div class="box">
        <input id="radio1" type="radio" name="small" checked="checked"/>
        <input id="radio2" type="radio" name="small"/>
        <input id="radio3" type="radio" name="small"/>
        <input id="radio4" type="radio" name="small"/>
        <input id="radio5" type="radio" name="small"/>
    </div>
</div>
<script>
    window.onload=function () {
        var changeSecond=1000*3;
        var changeIndex=0;
        var imgSrc=document.getElementById('img');
        var radio=document.getElementsByName('small');
        function changeImg() {
            if (changeIndex>4){
                changeIndex=0;
            }
            imgSrc.src='image/'+changeIndex+".jpeg";
            radio[changeIndex++].checked='checked';
            // changeSecond++;
        }
        v=window.setInterval(changeImg,changeSecond);
    }
</script>

任务二：程序逻辑训
任务扩展：多级联动菜单

代码实现如下：

<?php
?>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- jQuery and JavaScript Bundle with Popper -->
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--<script src="china-area-data/data.js"></script>-->
<div class="container">
    <form id="china">

        <label for="location_depth"></label>
        <input type="text" hidden id="location_depth" value="1">
    </form>
    <button class="btn-block btn alert-warning">submit</button>
    <script>
        function add_select_location(data,location,depth=0) {
            // id of append select
            var fa=location+'_'+depth;
            // append select item
            $(`#china`).append(`<select id='${fa}' name='${depth}' class="custom-select alert-success" required="required"><option selected></option></select>`);
            // add option
            for(var key in data[`${location}`]){
                var value1=data[`${location}`][`${key}`];
                $(`#${fa}`).append(`<option id='${key}'>${value1}</option>`);
            }
            var counter=0;
            $(`#${fa}`).change(function () {
                var value=$(`#${fa} option:selected`).attr('id');
                var location_depth=$('#location_depth').val();
                if (value===undefined){
                    for (var i=1;i<=location_depth;i++){
                        $(`select[name="${i}"]`).remove();
                    }
                    $('#location_depth').attr('value',1);
                }
                if (data.hasOwnProperty(value)){
                    if (counter===1){
                        var val=$(`#${fa}`).attr('name');
                        ++val;
                        for (var i=val;i<=location_depth;i++){
                            $(`select[name="${i}"]`).remove();
                        }
                        add_select_location(data,value,val);
                        $('#location_depth').attr('value',++val);
                    }else {
                        add_select_location(data,value,++depth);
                        counter++;
                        $('#location_depth').attr('value',++location_depth)
                    }
                }
            });
        }
        $.get("china-area-data/data.json",function(json,status){
            if (!status){
                alert('lost data.json');
            }
            var jsonStr = JSON.stringify(json);
            var data=eval('('+jsonStr+')');
            add_select_location(data,'86');
        });
    </script>
</div>

使用了jquery 、bootstrap 和来自airyland的china-area-data

效果图1：
效果图2：

效果图3：

效果图4：