位置: IT常识 - 正文

蓝桥杯web开发-5道模拟题让你信心满满(蓝桥杯web开发 618)

编辑:rootadmin
蓝桥杯web开发-5道模拟题让你信心满满 📋 个人简介💖 作者简介:大家好,我是阿牛,全栈领域新星创作者。😜📝 个人主页:馆主阿牛🔥🎉 支持我:点赞👍+收藏⭐️+留言📝📣 系列专栏:硬泡 javascript🍁💬格言:迄今所有人生都大写着失败,但不妨碍我继续向前!🔥

推荐整理分享蓝桥杯web开发-5道模拟题让你信心满满(蓝桥杯web开发 618),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:蓝桥杯web开发14届,蓝桥杯web开发 618,蓝桥杯web开发都考什么知识?,蓝桥杯web开发考什么,蓝桥杯web开发14届,蓝桥杯web开发应用一等奖,蓝桥杯web开发含金量,蓝桥杯web开发含金量,内容如对您有帮助,希望把文章链接给更多的朋友!

前些天发现了一个比较好的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。

点击跳转到网站:人工智能学习

上期传送门: 👉四行js代码让别人无法复制你的网站文字,八行程序员都哭了 👉这些前端案例看似很简单(内附动图) 👉前端实现tab栏切换,这么常见的案例你学会了吗?


目录📋 个人简介🍅前言🍓卡片化标签页(排他思想)🍇题目要求🍇题目分析🍇题解代码🍓随机数生成器(随机数小算法)🍇题目要求🍇题目分析🍇题解代码🍓学生成绩统计(echarts)🍇题目要求🍇题目分析🍇题解代码🍓水果摆盘(flex布局)🍇题目要求🍇题目分析🍇题解代码🍓小兔子爬楼梯(斐波纳切数列)🍇题目要求🍇题目分析🍇题解代码🍅结语🍅前言

距离蓝桥杯已经不到5天了,今天总结一下做过的5道简单的web开发组模拟题来增加信心,你只管努力学习,剩下的交给天意!!!

🍓卡片化标签页(排他思想)🍇题目要求

选项卡功能在前端开发中特别常见,作为设置选项的模块,每个选项卡代表一个活动的区域,点击不同的区域,即可展现不同内容,这样既能节约页面的空间又能提升页面性能。本题需要在已提供的基础项目中使用js完成选项卡功能的编码,最终实现切换选项卡可以显示对应内容的效果。

文件结构如下: 我们只需补充index.js文件就行。

要实现的效果:

🍇题目分析

这是一个很简单的web开发题,就是一个前端实现tab栏切换的一个小demo,基本还是排他思想(干掉所有人,留下我自己),在我的博客里写过这样的案例。 通过分析,我们可以看到tabs里的选项div的样式是由active属性控制的,因此我们可以通过点击去掉所有选项div属性值active(干掉所有人),然后给当前点击的选项div添加class值active(留下我自己)就可以实现点击改变选项的背景色了。

同时我们可以看到tabs里的div的class属性和下面的content里的div的id属性一样,都是one,two…,我们可以利用这个实现选项和内容的对应,点击上面的选项,下面content里的所有div隐藏,让选项对应的div显示(干掉所有人,留下我自己)。

🍇题解代码// 实现选项卡功能function init() { // TODO 待补充代码 var tabs = document.querySelector(".tabs"); var tabList = tabs.children; var cnt = document.querySelectorAll("#content div"); // console.log(cnt); var ids = ['one','two','three','four']; //数组里存放选项里的class值 for (var i=0;i<tabList.length;i++){ tabList[i].onclick = function(){ for(var i=0;i<tabList.length;i++){ //干掉所有人,即去掉tabs下所有的div的class属性值active tabList[i].className = ids[i]; } var s = this.className; //把这个点击的class值保存下来和下面的content里的对应的div的id值对应 this.className = s + ' active'; //留下我自己,即为点击的选项添加class属性值active(注意多属性中间有空格) for (var i=0;i<cnt.length;i++){ cnt[i].style.display = 'none'; //干掉所有人 } document.querySelector('#' + s).style.display = 'block'; //留下我自己 } }}init();🍓随机数生成器(随机数小算法)🍇题目要求

在index.js文件中补全函数 getRandomNum 中的代码,最终将根据指定条件生成的随机数显示在页面中。 具体需求如下: 1.封装函数 getRandomNum ( min , max , countNum )。 2.生成 min ~ max 范围的 countNum 个不重复的随机数,最终这些随机数以一个数组的形式返回。

文件结构如下: 我们只需补充index.js文件就行。

蓝桥杯web开发-5道模拟题让你信心满满(蓝桥杯web开发 618)

最终实现效果如下:

🍇题目分析

这道题很简单,主要考察javascript中的内置对象Math以及生成随机数的小算法,在我的博客里写过这个小算法,就一行代码。 Math.floor(Math.random()*(max-min)) + min;

🍇题解代码/** * 封装函数,函数名 getRandomNum(min,max,countNum) * 生成 min~max 范围的 countNum 个不重复的随机数,存入数组并返回 *///生成指定数目和范围的随机数const getRandomNum = function (min, max, countNum) { var arr = []; // 在此处补全代码 for (var i =0;i<countNum;i++){ var s= Math.floor(Math.random()*(max-min)) + min; //生成随机数的算法 arr.push(s); } return arr;};module.exports = getRandomNum; //请勿删除🍓学生成绩统计(echarts)🍇题目要求

随着大数据的发展,数据统计在很多应用中显得不可或缺, echarts 作为一款基于 JavaScript 的数据可视化图表库,也成为了前端开发的必备技能,下面我们一起来用 echarts 开发一个学生数据统计的柱形图。

文件结构如下: 其中index.html中有我们要修改的js代码。

要实现的效果:

🍇题目分析

原题目文档已说明清楚,这个题出现报错的原因是没有定义x轴的原因,并且让我们参照已经写好的y轴写x轴,只要你稍微对echarts文档熟悉一点,看着人家给出的y轴,照猫画虎定义一个x轴就行,很简单。 定义x轴,把对应的x轴数据写进xAxis就行。

🍇题解代码<!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>学生成绩统计</title> <script src="./echarts.js"></script> </head> <body> <div id="main" style="width: 600px; height: 400px"></div> <script type="text/javascript"> // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById("main")); // 指定图表的配置项和数据 var option = { title: { text: "学生成绩统计", }, tooltip: {}, legend: { data: ["成绩"], }, // TODO:待补充修改代码,定义x轴数据,并让数据正确显示 xAxis: { data: ["张三", "李四", "王五", "贺八", "杨七", "陈九"], }, // y轴 yAxis: {}, series: [ { name: "成绩", type: "bar", data: [55, 90, 65, 70, 80, 63], }, ], }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body></html>🍓水果摆盘(flex布局)🍇题目要求

目前css3中新增的 Flex 弾性布局已经成为前端页面布局的首选方式,这次试题将利用 Flex 实现经典布局效果。

文件结构如下: index.css文件是我们要修改的。 打开index.html,结果是这样的: 使用 flex 布局中的 align-self 和 order 完善 index.css 中的代码,把对应的水果放在对应的盘子里面,最终效果如下:

🍇题目分析

这个题考察flex布局中子项常见属性,首先我们要通过给菠萝的css添加order:1;(默认值为0)属性改变默认的排列顺序,让这两个菠萝排列到草莓的后面。 然后再对菠萝的css添加align-self:flex-end,让菠萝从下往上排,即可完成图示结果。

🍇题解代码/* 菠萝 TODO 待补充代码 */.yellow { align-self: flex-end; order: 1;}🍓小兔子爬楼梯(斐波纳切数列)🍇题目要求

小兔子想去月球上旅行,假设小免子拥有一个 n 阶梯子,当你爬完 n 层就可以到达月球,小兔子每次可以跳1或者2个台阶,小免子有多少种跳法可以到达月球呢?

🍇题目分析

通过这样列举一点,可以找出规律,很明显这是一个斐波纳切数列,一个很简单小算法的,后面一项等于前两项的和,对应到本题中就是后一阶梯子的跳法是前两阶梯子跳法的和,对于菲波那切数列,我们最常见的就是用递归解决。

思路如下: 1.当阶梯数为0时,只有0种方法;当阶梯数为1时,只有1种方法;当阶梯数为2时,只有2种方法,所以 阶梯数 n 小于等于2时,可以直接返回值。 2.如果阶梯数大于2,就递归。

🍇题解代码const climbStairs = (n) => { // TODO:请补充代码 if(n == 0 || n== 1 || n==2 || n==3){ return n; }else{ return climbStairs(n-1) + climbStairs(n-2); }};module.exports = climbStairs;🍅结语

👉题目文件在这里取: 链接:https://pan.baidu.com/s/1CB7Zz2heHBfkJklcXtAwdQ 提取码:waan

陆陆续续写了很多前端基础知识和小demo了,这些对初学者都很有用,尤其这前两题,在我的硬泡javascript专栏中都有写过,赶紧关注一手学习吧!这些专栏正在持续更新中。精心打造的软磨硬泡系列哦!

🏰系列专栏 👉软磨 css 👉硬泡 javascript 👉前端实用小demo

本文链接地址:https://www.jiuchutong.com/zhishi/297341.html 转载请保留说明!

上一篇:如何在 Vue.js 中使用 Axios(vue.js in action)

下一篇:Java Web中文乱码,解决方法!!(java中文乱码解决总结)

  • 钉钉远程控制电脑怎么操作(钉钉远程控制电脑怎么结束)

    钉钉远程控制电脑怎么操作(钉钉远程控制电脑怎么结束)

  • 高德地图电子狗功能在哪里(高德地图电子狗没声音)

    高德地图电子狗功能在哪里(高德地图电子狗没声音)

  • 苹果天气添加的城市怎么删除(苹果天气添加的城市自动改变)

    苹果天气添加的城市怎么删除(苹果天气添加的城市自动改变)

  • 一个手机号怎么注册两个支付宝(一个手机号怎么注册两个微信)

    一个手机号怎么注册两个支付宝(一个手机号怎么注册两个微信)

  • 300ppi分辨率是多少(300ppi分辨率是多少英寸)

    300ppi分辨率是多少(300ppi分辨率是多少英寸)

  • 赞赏码可以随便给别人吗(赞赏码可以随便发给别人吗)

    赞赏码可以随便给别人吗(赞赏码可以随便发给别人吗)

  • 快手提现短信为什么发不出去(快手提现短信为啥收不到)

    快手提现短信为什么发不出去(快手提现短信为啥收不到)

  • 苹果手机删除的软件能恢复吗(苹果手机删除的软件在哪里可以恢复过来)

    苹果手机删除的软件能恢复吗(苹果手机删除的软件在哪里可以恢复过来)

  • 订单编号可以查到什么(订单编号可以查别人买了什么吗)

    订单编号可以查到什么(订单编号可以查别人买了什么吗)

  • acer电脑开不了机怎么办(acer电脑开不了机)

    acer电脑开不了机怎么办(acer电脑开不了机)

  • 三星tf卡红色和橙色区别(三星tf卡红黄黑区别)

    三星tf卡红色和橙色区别(三星tf卡红黄黑区别)

  • 微信怎么加置顶语(微信怎么加置顶备注)

    微信怎么加置顶语(微信怎么加置顶备注)

  • 主频和混频哪个电压大(主频和混频哪个好)

    主频和混频哪个电压大(主频和混频哪个好)

  • vivo重启键在哪里(vivo手机重启按哪个键)

    vivo重启键在哪里(vivo手机重启按哪个键)

  • 华为应用内支付在哪里找(华为应用内支付取消人脸验证)

    华为应用内支付在哪里找(华为应用内支付取消人脸验证)

  • 趣步为啥置换不了(趣步置换500个需要等多久)

    趣步为啥置换不了(趣步置换500个需要等多久)

  • 韩剧tv在哪切换线路(韩剧tv在哪切换会员)

    韩剧tv在哪切换线路(韩剧tv在哪切换会员)

  • 拼多多下单时怎么留言(拼多多下单时怎么取消优惠券)

    拼多多下单时怎么留言(拼多多下单时怎么取消优惠券)

  • vivox21快充怎么设置(vivox21快充怎么开启功能在哪里)

    vivox21快充怎么设置(vivox21快充怎么开启功能在哪里)

  • iphone8为什么开不了(苹果8开不了机是什么原因)

    iphone8为什么开不了(苹果8开不了机是什么原因)

  • 苹果前置呼吸灯在哪里设置(苹果前置呼吸灯闪烁在哪里设置)

    苹果前置呼吸灯在哪里设置(苹果前置呼吸灯闪烁在哪里设置)

  • 全脑开发耳机有效果吗(全脑开发耳机有什么用)

    全脑开发耳机有效果吗(全脑开发耳机有什么用)

  • ps不小心关了没保存(ps不小心关了没保存在哪里找到)

    ps不小心关了没保存(ps不小心关了没保存在哪里找到)

  • vuevlog怎么加音乐(vue视频怎么后期加语音)

    vuevlog怎么加音乐(vue视频怎么后期加语音)

  • php包装迭代器如何理解(php生成器和迭代器理解)

    php包装迭代器如何理解(php生成器和迭代器理解)

  • 消费税到底是什么
  • 存货被盗的会计分录
  • 税务季报利润表的本年累计可以更改吗
  • 给中间人回扣犯罪吗
  • 自来水税率是9%还是3%
  • 普通发票专用发票每张最高限额
  • 预付房租在资产负债表里为什么属于资产
  • 进行利润分配时必须遵循的原则
  • 固定资产出租的收入计入什么科目
  • 国有资产划转如何做账
  • 资本溢价是
  • 筹建期发生的费用
  • 其他贷款服务的内容包括
  • 福利费可以抵扣个税吗
  • 公司购买6个月的保险
  • 加了一年的油
  • 企业税审要钱吗
  • 银行支票怎么用
  • 小规模纳税人不开票收入填在哪里
  • 汽车厂家金融贴息 是贴利息的还是贴车价
  • 工商局打印公司章程介绍信
  • 归还法人前期垫付款项
  • 出售废品收入
  • 没有原始凭证可以审计吗
  • 0x000000a5蓝屏代码是什么意思
  • 以前年度损益调整结转到本年利润吗
  • 在win10系统中,如何限制孩子玩原神游戏
  • php utf8转gb2312
  • 安装adsl modem必须安装什么协议
  • php integer
  • ati2sgag.exe进程安全吗 ati2sgag进程信息查询
  • 若依框架好用吗
  • 政府补助的会计处理分录
  • 长期股权投资初始投资成本和入账价值
  • 耕地使用税的征收标准
  • 不动产固定资产标识牌
  • 对于小型微利企业的建议
  • 科研项目财政拨款多少
  • 阿尔卑斯山环保
  • 小企业的费用包括生产成本吗
  • Error in render: “TypeError: Cannot read properties of undefined (reading ‘length‘)“,深层次数据处理报错????
  • thinkphp yii
  • ntpq命令详解
  • 工会捐款怎么账务处理
  • 日常公用经费包括资本性支出吗
  • 税前扣除 发票
  • 汽车4s店厂家返修流程
  • 物流辅助服务属于什么科目
  • 在零售环节征收消费税的是哪些
  • 库存现金挂账多久
  • 普票红冲要不要去收回发票联?
  • 补发以前年度工资怎么做账
  • 清算期间的坏账会计分录
  • 坏账损失的会计核算方法
  • 企业购买设备抵税
  • 产品质量监督检查的重点是
  • 企业如果为员工缴纳社保
  • 电子承兑汇票是24小时签收吗
  • 财政登记证取消了吗
  • 补充资本金有哪些途径
  • 进项税有什么相关要求
  • 职工福利费核算要求
  • mysql分表命令
  • sql语句压缩
  • ubuntu系统安装教程详细
  • 2021年win10累积更新
  • ubuntu双显卡驱动安装
  • avgserv9.exe是什么进程 avgserv9进程的详细介绍
  • linux安装编译工具
  • 在linux系统中
  • codeblocks视频教程
  • 批处理bat
  • [置顶]bilinovel
  • get调用接口
  • sell脚本
  • easyui框架的优缺点
  • shell 执行sh
  • [置顶]公主大人接下来是拷问时间31
  • 江苏省无犯罪证明
  • 履职提醒函与督办函区别
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设