C1-04

最新推荐文章于 2022-04-10 21:07:10 发布

乘风测码

最新推荐文章于 2022-04-10 21:07:10 发布

阅读量64

点赞数

本文链接：https://blog.csdn.net/alibabaad/article/details/118404463

版权

说明

大多数小公司的工程师需要处理的数据量很少，只要完成业务功能就可以，学不学数据结构和算法没有任何差别。大厂就完全不同了—-大厂的工程师可能会面对几千万甚至几亿的注册用户，开发的是TB、PB级别的数据处理系统，需要利用各种中间件整合衔接多个上下游系统―—可用性、健壮性、响应速度这些最基本的性能指标是工程师时时刻刻都要关注和解决的问题。一个看似简单的使用ArrayList还是LinkedList的决定，就可能会造成系统几千倍的性能差别—―这既是整个计算机科学最让人着迷的地方，也是最能体现思维模式、开发水平、动手能力的领域。

任务：生成广告图片

一、页面正中央生成一幅图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="wu.css" />
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .pic {
            width: 400px;
            height: 300px;
            padding: 20px;
            margin: auto;
            text-align: center;
        }
    </style>

    <!-- <script src="script.js"></script> -->
    <script type="text/javascript">
        window.onload = function(){
            var pic = document.getElementsByClassName('pic')[0];

            //页面首次加载时设置居中
            setCenter();

            //窗口调整时，调整图片居中
            window.onresize = setCenter;

            //设置图片居中的函数
            function setCenter(){
                //获取图片高度和浏览器可见窗口高度，设置垂直居中
                var winH = document.documentElement.clientHeight;
                pic.style.marginTop = (winH - pic.clientHeight)/2 + "px";
                
            }
        };
    </script>

</head>
<body>
    <div id="bg" class='pic'>
        <img src="01.jpg" height="300" width="400"/>
    </div>
</body>
</html>

2、保持图片间距相同

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>让图片保持相同间距</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
  
    </style>
    <script type="text/javascript">
        window.onload = function () {
            var bg = document.getElementById("bg")
            //这里存的其实是读取图片的路径
            var imgs = ["01.jpg","02.jpg","03.jpg","04.jpg","05.jpg"];

            var imgWidth = 0;
            for(var i = 0; i < imgs.length;i++){
                var img = document.createElement("img");
                var src = imgs[i];
                img.src = src;
                bg.appendChild(img);
                img.style.width = "100px";
                img.style.display = "inline-block";
                imgWidth += img.clientWidth;
            }

            //页面加载时调整间距
            setMargin();
            //浏览器窗口变化时，调整间距
            window.onresize = setMargin;

            function setMargin() {
                var winWidth  = document.documentElement.clientWidth;
                var imgObjs = document.querySelectorAll("img");
                var imgMargin = (winWidth - imgWidth)/(imgObjs.length+1);
                for(var i = 0; i < imgObjs.length;i++){
                    imgObjs[i].style.marginLeft = imgMargin + "px";
                    imgObjs[i].style.marginTop = imgMargin + "px";
                }
            }
        }
    </script>
</head>
<body>
    <div id="bg" class='pic'></div>
</body>
</html>

3、轮播效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播效果</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        #bg {
            width: 400px;
            height: 340px;
            padding: 20px;
            margin: auto;
            background-color: bisque;
            text-align: center;
        }
    </style>
    <script type="text/javascript">
        window.onload = function(){
            var bg = document.getElementById("bg");

            //页面首次加载时设置居中
            setCenter();

            //窗口调整时，调整图片居中
            window.onresize = setCenter;

            //设置图片居中的函数
            function setCenter(){
                //获取图片高度和浏览器可见窗口高度，设置垂直居中
                var winH = document.documentElement.clientHeight;
                bg.style.marginTop = (winH - bg.clientHeight)/2 + "px";
            }

            var imgs = ["01.jpg","02.jpg","03.jpg","04.jpg","05.jpg"];

            //轮播
            var pic = document.getElementById("pic");
            var info = document.getElementById("info");
            var count = 1;
            var play = document.getElementById("play");
            var stop = document.getElementById("stop");
            play.addEventListener("click",function (){
                var timer = setInterval(()=>{
                    if(count > imgs.length-1){
                        count = 0;
                    }
                    pic.src = imgs[count++];
                    info.innerText = `一共 ${ imgs.length }图，这是第${ count }张。`;
                },3000);

                stop.addEventListener("click",()=>{
                    clearInterval(timer);
                },false);
            },false);
        };
    </script>
</head>
<body>
<div id="bg">
    <p id="info">图片信息</p>
    <img src="01.jpg" id="pic">
    <button id="play">播放</button><button id="stop">停止</button>
</div>
</body>
</html>

4、省市区多级联动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>「省市区多级联动下拉菜单」</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .nav{
        width: 400px;
        margin: 100px auto;
        text-align: center;
    }
    select{
        width: 100px;
        height: 30px;
        /*内容居中*/
        text-align-last:center;
    }
</style>
<script type="text/javascript">
    window.onload = function () {
        //存储省、市、区信息，省、市为JSON形式，区信息为Array形式
        var data = {
            "北京市":{
                "市直辖":["东城市","西城市","朝阳区","海淀区","房山区","通州区","昌平区","丰台区","石景山区","门头沟区"]
            },
            "台湾省":{
                "特别行政省":["。。。"]
            },
            "湖南省":{
                "长沙市":["芙蓉区","天心区","岳麓区","开福区","雨花区","望城区"],
                "株洲市":["荷塘区","芦淞区","石峰区","天元区","渌口区"],
                "湘潭市":["雨湖区","岳塘区"],
                "衡阳市":["珠晖区","雁峰区","石鼓区","蒸湘区"]
            }
        };

        //首先加载省份
        var province = document.getElementById("province");
        var proOption = "";
        for(var provin in data){
            proOption += `<option value="${provin}">${provin}</option>`;
        }
        province.innerHTML +=proOption;

        var city = document.getElementById("city");
        var country = document.getElementById("country");
        //点击省份，后加载city
        province.onchange = function () {
            //清空上一次province变动加载的city
            clearInsert(city,"city","-市-");
            // city.innerHTML = `<option value="city">-市-</option>`;

            //清空上一次city变动加载的country
            clearInsert(country,"country","-区-");
            // country.innerHTML = `<option value="country">-区-</option>`;

            //获取province的value值
            var cities = data[province.value];
            //如果cities为undefined，则说明选择的province不在data内，停止后续操作
            if( cities == null ){
                return;
            }

            //根据上一步的value值加载city对象
            var cityOption = "";
            for(var ci in cities){
                cityOption += `<option value="${ci}">${ci}</option>`;
            }

            //将新增的option标签内容添加到city的selection中
            city.innerHTML += cityOption;

            //点击city，后加载country
            city.onchange = function () {
                //清空上一次city变动加载的country
                clearInsert(country,"country","-区-");
                //获取city的value值，根据value值加载country对象
                var countries = cities[city.value];
                //如果countries为undefined，则说明选择的city不在data内，停止后续操作
                if( countries == null){
                    return;
                }
                var countryOption = "";
                for(var i = 0; i < countries.length;i++){
                    countryOption += `<option value="${countries[i]}">${countries[i]}</option>`;
                }

                //将新增的option标签内容添加到country的selection中
                country.innerHTML += countryOption;
            }
        }

        function clearInsert(handle,valueInfo,text) {
            handle.innerHTML = `<option value=${valueInfo}>${text}</option>`;
        }
    }
</script>
<body>
<div class="nav">
    <select name="province" id="province">
        <option value="province">-省份-</option>
    </select>
    <select name="city" id="city">
        <option value="city">-市-</option>
    </select>
    <select name="country" id="country">
        <option value="country">-区-</option>
    </select>
</div>
</body>
</html>

5、冒泡排序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
            var num = [0,9,12,1,6,3,7,11];
            bubbleSort(num);
            console.log(num); //[0, 1,  3,  6, 7, 9, 11, 12]
            function bubbleSort(num) {
            for(var i = 1;i < num.length;i++){
                for(var j = 0 ; j < num.length-i ; j++){
                    if(num[j] > num[j+1]){
                        [num[j],num[j+1]] = [num[j+1],num[j]];
                    }
                }
            }
        }

    </script>
</head>
<body>
    按F12，看console.
</body>
</html>

乘风测码

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
C1-04

目录说明任务：生成广告图片一、页面正中央生成一幅图片小测说明大多数小公司的工程师需要处理的数据量很少，只要完成业务功能就可以，学不学数据结构和算法没有任何差别。大厂就完全不同了—-大厂的工程师可能会面对几千万甚至几亿的注册用户，开发的是TB、PB级别的数据处理系统，需要利用各种中间件整合衔接多个上下游系统―—可用性、健壮性、响应速度这些最基本的性能指标是工程师时时刻刻都要关注和解决的问题。一个看似简单的使用ArrayList还是LinkedList的决定，就可能会造成系统几千倍的性能差别—―这既是整个计
复制链接

扫一扫