2022第十三届蓝桥杯web组题解
2024-05-19 12:57:22
文章目录
- 01水果拼盘
- 题目
- 解答
- 02展开你的扇子
- 题目
- 解答
- 03和手机相处的时光
- 题目
- 解答
- 04灯的颜色变化
- 题目
- 解答
- 05冬奥大抽奖
- 题目
- 解答
- 06蓝桥知识网
- 题目
- 解答
- 07布局切换
- 题目
- 解答
- 08 购物车
- 题目
- 09 寻找小狼人
- 题目
- 解答
- 10 课程列表
- 题目
- 解答
01水果拼盘
题目
解答
- 用flex布局
/* TODO：待补充代码 */
#pond {display: flex;flex-direction: column; //主轴为y轴 水果都在y轴上flex-wrap: wrap; //允许换行
}
02展开你的扇子
题目
解答
- 用到了css动画知识 ,
transform: rotate(deg)deg是单位
/*TODO：请补充 CSS 代码*/#box:hover #item7 {transform: rotate(10deg);
}#box:hover #item8 {transform: rotate(20deg);
}#box:hover #item9 {transform: rotate(30deg);
}#box:hover #item10 {transform: rotate(40deg);
}#box:hover #item11 {transform: rotate(50deg);
}#box:hover #item12 {transform: rotate(60deg);
}#box:hover #item6 {transform: rotate(-10deg)
}#box:hover #item5 {transform: rotate(-20deg)
}#box:hover #item4 {transform: rotate(-30deg)
}#box:hover #item3 {transform: rotate(-40deg)
}#box:hover #item2 {transform: rotate(-50deg)
}#box:hover #item1 {transform: rotate(-60deg)
}
03和手机相处的时光
题目
解答
- 原代码xAxis的type值和yAxis的type值颠倒了 , 下面是改正过来的
var option = {title: {text: "一周的手机使用时长",},xAxis: {type: "category",data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],},yAxis: {type: "value",},series: [{data: [2.5, 2, 2.6, 3.2, 4, 6, 5],type: "line",}, ],};
04灯的颜色变化
题目
解答
- 用到了计时函数
// TODO：完善此函数 显示红色颜色的灯
function red() {const defaultlight = document.querySelector('#defaultlight')const redlight = document.querySelector('#redlight')clearTimeout(redTime)var redTime = setTimeout(() => {defaultlight.style.display = 'none'redlight.style.display = 'inline-block' //注意这里是inlin-block 根据原文件的css值写的}, 3000);
}// TODO：完善此函数 显示绿色颜色的灯
function green() {const redlight = document.querySelector('#redlight')const greenlight = document.querySelector('#greenlight')clearTimeout(greenTime)var greenTime = setTimeout(() => {redlight.style.display = 'none'greenlight.style.display = 'inline-block'}, 6000);
}// TODO：完善此函数
function trafficlights() {red()green()
}trafficlights();
05冬奥大抽奖
题目
解答
- 观察html可知 , 需要变黄的div按着顺序写了class , 那么让相应类名依次添加.active类同时其他移除.active类即可
// TODO：请完善此函数
function rolling() {time++; // 转动次数加1clearTimeout(rollTime);rollTime = setTimeout(() => {let className = `.li${time % 8}`if (time % 8 === 0) {className = `.li8`}$(`${className}`).addClass("active").siblings().removeClass("active")window.requestAnimationFrame(rolling); // 进行递归动画}, speed);
06蓝桥知识网
题目
解答
- 考察html和css , 按照要求写就行了
html代码
<!--TODO：请补充代码--><div class="canter"><div class="header"><div class="nav"><span>蓝桥知识网</span><div class="nav_c"><span>首页</span><span>热门技术</span><span>使用手册</span><span>知识库</span><span>练习题</span><span>联系我们</span><span>更多</span></div></div><div class="header_text"><p class="title_header">蓝桥云课</p><p class="title_p">随时随地丰富你的技术栈！</p><div class="join">加入我们</div></div></div></div><div class="conter"><div class="item"><span>人工智能</span><p>人工智能亦称智械、机器智能，指由人制造出来的机器所表现出来的智能。通常人工智能是指通过普通计算机程序来呈现人类智能的技术。</p></div><div class="item"><span>前端开发</span><p>前端开发是创建 WEB 页面或 APP 等前端界面呈现给用户的过程，通过 HTML，CSS 及 JavaScript 以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。</p></div><div class="item"><span>后端开发</span><p>后端开发是实现页面的交互逻辑，通过使用后端语言来实现页面的操作功能，例如登录、注册等。</p></div><div class="item"><span>信息安全</span><p>ISO（国际标准化组织）的定义为：为数据处理系统建立和采用的技术、管理上的安全保护，为的是保护计算机硬件、软件、数据不因偶然和恶意的原因而遭到破坏、更改和泄露。</p></div></div><div class="footer"><div class="footer_text"><span>© 蓝桥云课 2022</span><p>京公网安备 11010102005690 号 | 京 ICP 备 2021029920 号</p></div></div>
css代码
TODO：请补充代码
*/* {margin: 0;padding: 0;box-sizing: border-box;
}.canter {background-color: #a6b1e1;
}.header {width: 1024px;margin: 0 auto;height: 440px;padding-top: 13px;
}.nav {display: flex;/* justify-content: space-between; */align-items: center;height: 46px;padding: 0 10px;
}.nav>span {font-size: 18px;color: white;margin-right: 365px;font-weight: 600;
}.nav_c span {font-size: 16px;color: white;margin-right: 28px;font-weight: 600;
}.nav_c span:nth-child(7) {margin-right: 0px;
}.header_text {display: flex;align-items: center;flex-direction: column;margin-top: 30px;
}.title_header {font-size: 45px;color: black;margin-bottom: 62px;
}.title_p {font-size: 21px;font-weight: 200;color: white;margin-bottom: 36px;
}.join {color: #efbfbf;border-radius: 2px;font-size: 18px;display: flex;align-items: center;justify-content: center;padding: 15px;box-shadow: inset 0 0 0 2px #efbfbf;
}.conter {width: 1024px;margin: 74px auto 0 auto;display: flex;justify-content: space-between;flex-wrap: wrap;height: 302px;
}.conter .item {height: 144px;width: 502px;display: flex;flex-direction: column;justify-content: space-around;
}.conter .item span {font-size: 30px;font-weight: 200;color: black;
}.conter .item p {font-size: 18px;color: #aaa;line-height: 1.4em;
}.footer {width: 100%;height: 80px;border-top: 2px solid #aaa;
}.footer_text {width: 1024px;margin: 0 auto;text-align: center;font-size: 14px;color: #aaa;padding-top: 30px;
}.footer_text p {margin-top: 10px;
}
07布局切换
题目
解答
08 购物车
题目
09 寻找小狼人
题目
解答
10 课程列表
题目
解答
2022第十三届蓝桥杯web组题解相关推荐
- 2022.4.9第十三届蓝桥杯web组省赛个人题解
2022第十三届蓝桥杯第一次开放了web组赛道,博主作为一名前端小白,参加了这次比赛.一共十个题目,目的均是实现特定的网页效果,考点包含三件套.jQuery和vue,这里简单的进行一下个人的题解记录. ...
- 2022第十三届蓝桥杯JAVAB组省赛总结
2022年第十三届蓝桥杯JAVAB组省赛 蓝桥杯准备了好久,毕竟学校还是认可,如果能进国赛还能有保研加分. 今年真是可惜了,题太难了,从去年买了Acwing的课,一直在学,没想到到最后是这么个情况. ...
- 【蓝桥杯Web】2022年第十三届蓝桥杯Web大学组国赛真题解析
前言 省赛真题解析见: 2022年第十三届蓝桥杯Web大学组省赛真题解析(完整版) 2022年第十三届蓝桥杯Web大学组省赛真题解析(精华版) 更多蓝桥杯题解请查阅专栏:蓝桥杯 之前写省赛解析时篇幅过 ...
- 2022年十三届蓝桥杯国赛（C/C++大学B组）个人题解
2022年十三届蓝桥杯国赛(C/C++大学B组)个人题解 更新:成绩出来了,估分50分左右,最后拿了个国二,还差点到国一,有点出乎意料,挺满意了挺满意了. 去年国赛基本都是暴力,最后国三都没拿到(我是 ...
- 2022 第十三届蓝桥杯省赛 C/C++ B组 试题与个人题解
2022 第十三届蓝桥杯省赛 C/C++ B组 试题与个人题解 试题A: 九进制转十进制 本题总分:5分 [问题描述] 九进制正整数 (2022), 转换成十进制等于多少? [答案提交] 这是一道结果 ...
- 第十三届蓝桥杯Java-C组2022年考题个人解析
目录 前言 第一题-排序字母 第二题-特殊时间 第三题-纸张尺寸 第四题-求和 第五题-矩形拼接(未解决) 第六题-选数异或 第七题-GCD 第八题-青蛙过河(未解决) 第九题-因数平方和 第十题-最 ...
- 十三届蓝桥杯单片机组省赛真题程序解析
第一次参加蓝桥杯,线上比赛,记录一下 比赛刚开始了十分钟才做上客观题,做上了之后才发现看一次题警告一次,当时就蚌埠住了,随便做了做就交了,手册也没怎么查(查一下直接给了3次黄牌,就没敢查了)其实老师1 ...
- 【蓝桥系列】——十三届蓝桥杯PythonB组第五题E题蜂巢（AC代码）
大家好,我是普通小明,初入学习博客,一起加油! 首先,感谢 小蓝刷题 对我的鼓励,我也希望加入学习算法这个大家庭. 第一篇文章,有些不完美,还请多多指教. 目录 (好像我并不会用锚点T-T) 省赛心得 ...
- 第十三届蓝桥杯Web应用开发（大学组）
文章目录 前言 01.水果盘 **题目:** **解答:** 02.展开你的扇子 题目 解答: 03.和手机相处的时光 题目 解答 04.灯的颜色变化 题目 解答 05.冬奥大抽奖 题目 解答 06蓝 ...
最新文章
- 校园二手平台的开发和利用
- C++中头文件的命名规则
- 解析Vue.js中的computed工作原理
- java 8中 predicate chain的使用
- axios请求拦截器错误_Axios使用拦截器全局处理请求重试
- hive 动态分区实现 （hive-1.1.0）
- 使用反射调用构造器创建对象
- 面试官：你知道怎么求素数吗？
- Arrays.asList 方法注意事项
- 几款常用的ble调试app（nRF Connect、BLE调试助手、LightBlue）
- 天才数学家连续拿下菲尔兹奖、新视野奖，专攻“最难的简单问题”，生活中还是个社牛...
- 淘宝客做不下去怎么办？
- vs2008设置选中 高亮
- 【资源】DNW驱动，Win7 64位可用
- BGP学习笔记更新版
- Linux系统安装过程详解
- 5G NR LDPC码（2）—— 5G NR中的LDPC码标准化内容
- DOCTYPE与怪异模式
- 自动化基本策略及成熟度定义
- Latex 设置标题等字号