C1-04计算机程序逻辑

最新推荐文章于 2023-04-16 12:08:34 发布

凡杰飞-

最新推荐文章于 2023-04-16 12:08:34 发布

阅读量180

点赞数

分类专栏： C1认证任务

本文链接：https://blog.csdn.net/fan_jf/article/details/116865937

版权

C1认证任务专栏收录该内容

5 篇文章 0 订阅

订阅专栏

生成广告图片（单张）

在这里插入图片描述
附上源码

<html>
<head>
    <style>
        img{
            width: 600px;
            height: 200px;
        }
    </style>
</head>
<body>
<div id="img"></div>

</body>
<script>
    window.onload = function () {
        var imgs = ["https://img-blog.csdnimg.cn/20210515224311367.png","https://img-blog.csdnimg.cn/20210515225107474.png"];
        var imgContent = document.getElementById('img');
        imgContent.style.marginLeft = ((document.body.clientWidth / 2) - 300) + "px";
        imgContent.style.marginTop = ((document.body.clientHeight / 2) - 100) + "px";
        var img = document.createElement("img");
        img.setAttribute("src",imgs[0]);
        imgContent.appendChild(img);
    }
	
	// 窗口改变监听，实时改变图片宽高度
    window.addEventListener("resize", e =>{
        var imgContent = document.getElementById('img');
        imgContent.style.marginLeft = ((document.body.clientWidth / 2) - 300) + "px";
        imgContent.style.marginTop = ((document.body.clientHeight / 2) - 100) + "px";
    })
</script>
</html>

水平间距图片

核心点：
在css样式中
对img的外部div使用样式中displays布局使用flex属性
然后在justify-content中使用space-around，可将div中的容器进行均匀水平分布排列

在这里插入图片描述
附上源码

<html>
<head>
</head>
<body>
<div id="img"></div>

</body>
<script>
    window.onload = function () {
        var imgs = ["https://img-blog.csdnimg.cn/20210515224311367.png", "https://img-blog.csdnimg.cn/20210515224311367.png", "https://img-blog.csdnimg.cn/20210515224311367.png","https://img-blog.csdnimg.cn/20210515225107474.png"];
        var imgContent = document.getElementById('img');
        imgContent.style.display = "flex";
        imgContent.style.justifyContent = "space-around";
        for(var i = 0;i< imgs.length;i++){
            var img = document.createElement("img");
            img.setAttribute("src",imgs[i]);
            // 统一每张图片的宽高度
            img.style.width = "200px";
            img.style.height = "100px";
            imgContent.appendChild(img);
        }
    }
</script>
</html>

轮播图

这里直接放一下源码，核心是通过设置定时器对img标签的src进行修改

<html>
<head>
    <style>
        img{
            width: 600px;
            height: 200px;
        }
    </style>
</head>
<body>
<div id="img"></div>

</body>
<script>
    var num = 0;
    var timer = null;
    window.onload = function () {
        var imgs = ["https://img-blog.csdnimg.cn/20210515224311367.png","https://img-blog.csdnimg.cn/20210515225107474.png", "https://img-blog.csdnimg.cn/20210515224311367.png","https://img-blog.csdnimg.cn/20210515225107474.png", "https://img-blog.csdnimg.cn/20210515224311367.png"];
        var imgContent = document.getElementById('img');
        imgContent.style.marginLeft = ((document.body.clientWidth / 2) - 300) + "px";
        imgContent.style.marginTop = ((document.body.clientHeight / 2) - 100) + "px";
        var img = document.createElement("img");
        img.setAttribute("id", "picture")
        img.setAttribute("src",imgs[0]);
        imgContent.appendChild(img);
    };
	
	// 定时器，每3秒更改一次图片
    timer = setInterval(() => {
        var imgContent = document.getElementById('picture');
        var imgs = ["https://img-blog.csdnimg.cn/20210515224311367.png","https://img-blog.csdnimg.cn/20210515225107474.png", "https://img-blog.csdnimg.cn/20210515224311367.png","https://img-blog.csdnimg.cn/20210515225107474.png", "https://img-blog.csdnimg.cn/20210515224311367.png"];
        imgContent.src = imgs[(num++) % 5];
    }, 3000);
</script>
</html>

拓展

在这里插入图片描述
附上源码

<html>
<head>
    <script>

        data = [
            {
                "name":"广东省",
                "city":[
                    {
                        "name":"汕头市",
                        "country":[
                            {
                                "name":"龙湖区",
                            },
                            {
                                "name":"金平区",
                            },
                            {
                                "name":"濠江区",
                            },
                            {
                                "name":"潮阳区",
                            },
                            {
                                "name":"潮南区",
                            },
                            {
                                "name":"澄海区",
                            },
                            {
                                "name":"南澳县",
                            },
                        ]
                    },
                    {
                        "name":"广州市",
                        "country":[
                            {
                                "name":"越秀区",
                            },
                            {
                                "name":"荔湾区",
                            },
                            {
                                "name":"海珠区",
                            },
                            {
                                "name":"天河区",
                            },
                            {
                                "name":"白云区",
                            },
                            {
                                "name":"黄埔区",
                            },
                            {
                                "name":"花都区",
                            },
                            {
                                "name":"番禺区",
                            },
                            {
                                "name":"南沙区",
                            },
                            {
                                "name":"增城区",
                            },
                            {
                                "name":"从化区",
                            },
                        ]
                    }
                ]
            },

        ];
		// 初始化加载省份
        window.onload = function () {
            var province = document.getElementById("province");
            for (let i = 0; i < data.length; i++) {
            	// 渲染所选省份的城市
                var option = new Option(data[i].name, data[i].name);
                province.options.add(option);
            }
        }


        function provinceChange(){
            const index = document.getElementById("province").options[ document.getElementById("province").selectedIndex].index;
            const city = document.getElementById("city");
            // 重置城市选择框
            city.length= "";
            city.options.add(new Option("请选择城市", "-1"));
            const country = document.getElementById("country");
            // 重置区县选择框
            country.length= "";
            country.options.add(new Option("请选择区县", "-1"));

            if (index !== 0) {
                const cityData = data[index - 1].city;
                for (let i = 0; i < cityData.length; i++) {
                	// 渲染所选省份的城市
                    var option = new Option(cityData[i].name, cityData[i].name);
                    city.options.add(option)
                }
            }
        }

        function cityChange(){
            const index = document.getElementById("province").options[ document.getElementById("province").selectedIndex].index;
            const index1 = document.getElementById("city").options[ document.getElementById("city").selectedIndex].index;
            const country = document.getElementById("country");
            // 重置区县选择框
            country.length= "";
            country.options.add(new Option("请选择区县", "-1"));

            if (index !== 0) {
                const countryData = data[index - 1].city[index1 - 1].country;
                for (let i = 0; i < countryData.length; i++) {
                	// 渲染所选城市的区县
                    var option = new Option(countryData[i].name, countryData[i].name);
                    country.options.add(option)
                }
            }
        }

        function submit() {
            const province = document.getElementById("province").value;
            const city = document.getElementById("city").value;
            const country = document.getElementById("country").value;
            alert("你的选择是：" + province + city + country);
        }
    </script>
</head>
<body>
<select id="province" onchange="provinceChange()">
    <option value="-1">请选择省份</option>
</select>
<select id="city" onchange="cityChange()">
    <option>请选择城市</option>
</select>
<select id="country">
    <option>请选择区县</option>
</select>
<button onclick="submit()">提交</button>

</body>
</html>

凡杰飞-

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
C1-04计算机程序逻辑

目录生成广告图片（单张）水平间距图片轮播图拓展生成广告图片（单张）附上源码<html><head> <style> img{ width: 600px; height: 200px; } </style></head><body><div id="img"></div></body>&
复制链接

扫一扫