蓝桥杯Web组 蓝桥云课真题解析 (6~10)

刷题网址：https://www.lanqiao.cn/problems/?first_category_id=2&second_category_id=11

---

6、个人博客

	1、使用flex布局，可以很轻松的完成
	
	2、代码
	
	/* TODO: main-wrapper 通过设置main-wrapper 布局方式 让.main-left  .main-right 正确显示 */
	.main-wrapper {
	  margin: 1.5rem auto 0 auto;
	  max-width: 1100px;
	  padding: 0 0.9rem;
	  box-sizing: border-box;
	  position: relative;
	
	  display: flex;
	}
	
	/*/* TODO 宽度自适应 居左显示 */
	.main-wrapper .main-left {
	  justify-content: left;
	  width:auto;
	}
	
	/* 宽 245px 居右显示 */
	.main-wrapper .main-right>* {
	  box-sizing: border-box;
	  width:245px;
	  justify-content: right;
	}
	

7、水果摆盘

	1、根据提示，需要使用align-self和order（没学，汗流浃背了）
	
	2、解析（学完了）：
	    order:用于定义项目的排列顺序，数值越小，排列越靠前
	    align-self：允许单个项目与其他项目有不同的对齐方式，可覆盖align-item
	    //另外将其他的一些也贴上吧
	    flex-grow：定义项目的放大比例
	    flex-shrink：定义项目的缩小比例
	    
	3、代码
	    .yellow {
	        order:1;
	        align-self: flex-end;
	    }
	    

8、新年贺卡

	1、难点
	    随机数的应用
	        Math.floor(Math.random()*5)
	2、代码
	    // 随机数函数 从 greetings 随机取一个值并返回
	    function writeGreeting() {
	        // TODO 带补充代码  
	        return Math.floor(Math.random()*greetings.length)
	    }
	    
	    /*
	     * @param {*} greetingDisplay  要显示内容的dom元素
	     */
	    //  show 将 writeGreeting 函数中返回的内容显示在 greetingDisplay 元素中
	    function show(greetingDisplay) {
	        // TODO 待补充代码
	        greetingDisplay.innerText = greetings[writeGreeting()]
	    }
	    

9、随机数生成器

	1、难点有两个，一个是数组方法的应用，一个是随机数的应用
	    
	2、常见数组方法列举
	    push()：尾部添加
	    pop()：尾部移除
	    
	    shift()：首部添加
	    unshift()：首部移除
	    
	    splice()：拥有删除、插入和替换三种功能
	    (1)删除：指定两个参数，起始位置和要删除的数量
	    (2)插入：指定三个参数，起始位置、0和要插入的项
	    (3)替换：指定三个参数，起始位置、被替换的项目数、要插入的项
	    
	    indexOf()：接收两个参数，要查找的项，和起始位置(可选)，若没找到则返回-1
	    
	    forEach()：对数组进行循环遍历，对每一项执行指定的函数，没有返回值
	    map()：对每一项允许执行函数，返回结果组成的数组
	    
	    filter()：对数组进行过滤
	    
	    every()：若数组中的每一项都符合条件则返回true
	    some()：若有一项满足条件就返回true
	    
	    join()：将数组以给出的分隔符分离
	    
	3、代码
	    for(let i=0;i<countNum;){
	        let ranMath = Math.floor(Math.random()*(max-min+1)+min)
	        //因为random是从0开始的，所以要+1
	        if(arr.indexOf(ranMath) === -1)
	        {
	            arr.push(ranMath)
	            i++
	        }
	    }
	    

10、学生信息统计

	1、本题主要考验echarts的用法
	    根据题目可以看到，y轴显示数据，x轴显示图例
	    所以我们需要将y轴的type设置为value，并且将数组移动到x轴
	    
	2、代码
	        xAxis:{
	            data:['张三', '李四', '王五', '贺八', '杨七', '陈九']
	        },
	        // y轴
	        yAxis: {
	            type:'value'
	        },