蓝桥杯web组第二次线上模拟复习版
这里写目录标题
-
- 选项卡
- 随机数生成
- Echarts图表
- 学习echarts
- 给页面化妆
- 小兔子爬楼梯
- 时间管理大师
选项卡
// 实现选项卡功能
function init() {
// TODO 待补充代码
var content=document.querySelectorAll('#content div' )
console.log(content)//原生的js里面没有.siblings函数，不能用此求兄弟节点这是jq的语法
var options=document.querySelectorAll('.tabs div')
console.log(options)
for(let i=0;i<4;i++){//注意for循环中的i var定义的为全局作用域，let为块级作用域，
options[i].onclick=function(){ //不用let的话使i总表示为循环的最后一位数
// console.log(this)
for(let a=0;a<4;a++){
//console.log(options[item] )
options[a].classList.remove('active')
content[a].classList.remove('active')
}
this.className+=' active' //记住这两个类名添加函数，必考
content[i].classList.add('active')
console.log(content[i])
console.log(this.className)
}
}
}
init();
随机数生成
/**
* 封装函数，函数名 getRandomNum(min,max,countNum)
* 生成 min~max 范围的 countNum 个不重复的随机数，存入数组并返回
*/
//生成指定数目和范围的随机数
const getRandomNum = function (min, max, countNum) {
var arr = [],data=0;
// 在此处补全代码
for(var i=0;i<countNum;i++){
data=Math.floor(Math.random()*(max-min))+min //生成随机数
//Math.floor()向下取整函数 此处也可以用paseInt（）
console.log(data)
if(arr.length==0){//初始的时候直接存入不用判断重复
arr.push(data);
}else{
for(let a=0;a<arr.length;a++){//遍历判断
if(data==arr[a]){
i--;
break;//一定要退出循环
}else){
arr.push(data);
break//一定要退出循环
}}
}
}
console.log(arr)
return arr;
};
module.exports = getRandomNum; //请勿删除
Echarts图表
<!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: {/* 例：trigger:'axis' 触发方式：坐标轴 */},
//图例组件
legend: {
data: ["成绩"],
},
// TODO:待补充修改代码，定义x轴数据,并让数据正确显示
xAxis:
{
data:["张三","李四","王五","贺八","杨七","陈九"]
//boundaryGap:fals 线条与y轴是否有缝隙
}
,
// y轴
yAxis: {
type:'value',//表示数值轴
min:0,
max:100,
},
//系列图表配置，决定显示图表类型
series: [
{
name: "成绩",
type: "bar",//图标样式 柱状图
data: [55, 90, 65, 70, 80, 63],
},
],
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
学习echarts
设置ecahrts大小
myChart.resize({
width: 800,
height: 400
});
或者
var myChart = echarts.init(document.getElementById(‘main’), null, {
width: 600,
height: 400
});
调色盘
option = {
// 全局调色盘。
color: [
'#c23531',
'#2f4554',
'#61a0a8',
'#d48265',
'#91c7ae',
'#749f83',
'#ca8622',
'#bda29a',
'#6e7074',
'#546570',
'#c4ccd3'
],
series: [
{
type: 'bar',
// 此系列自己的调色盘。
color: [
'#dd6b66',
'#759aa0',
'#e69d87',
'#8dc1a9',
'#ea7e53',
'#eedd78',
'#73a373',
'#73b9bc',
'#7289ab',
'#91ca8c',
'#f49f42'
]
// ...
},
{
type: 'pie',
// 此系列自己的调色盘。
color: [
'#37A2DA',
'#32C5E9',
'#67E0E3',
'#9FE6B8',
'#FFDB5C',
'#ff9f7f',
'#fb7293',
'#E062AE',
'#E690D1',
'#e7bcf3',
'#9d96f5',
'#8378EA',
'#96BFFF'
]
// ...
}
]
};
坐标轴相关系数
‘value’ ：数值轴，适用于连续数据。
‘category’ ：类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。
‘time’ ：时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
‘log’ ：对数轴。适用于对数数据
给页面化妆
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: azure;
background-size: cover;
color: #fff;
height: 945;
width: 1920;
}
.nav-bar {
display: flex;
align-items: center;
justify-content: flex-end;
height: 55px;
}
.nav-bar p {
font-size: large;
color: cornflowerblue;
margin: 15px;
}
/*TODO：请补充代码*/
.form{
width:450px ;
height: 600px;
background-color: rgba(0, 0, 0, .45);
margin: auto;
border-radius: 10px;
text-align: center;
padding-top: 170px;
}
img{
width: 200px;
height: 200px;
border-radius: 50%;
position: absolute;
z-index: 10;
margin-top: -40px;
margin-left: 44%;
}
h2{
font-size: 45px;
font-weight: 800;
margin-bottom: 30px;
}
button{
width: 80px;
height: 30px;
border-color: #041c32;
background-color: #2d4263;
font-size: 16px;
color: white;
margin-right: 10px;
}
input{
font-size: 20px;
border-radius: 5px;
width: 300px;
margin-bottom: 20px;
}
.btns{
margin-bottom: 20px;
}
.text{
position: absolute;
bottom: 35%;
left: 46.6%;
}
a{
color: white;
text-decoration: none;
}
小兔子爬楼梯
const climbStairs = (n) => {
// TODO：请补充代码
return (n <= 2) ? n : climbStairs(n - 1) + climbStairs(n - 2);
//观察楼梯与方法次数规律，从2以后期方法数为n-1与n-2的和
}
module.exports = climbStairs;
时间管理大师
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>任务管理器title>
<link type="text/css" href="css/style.css" rel="stylesheet" />
head>
<body>
<div id="box">
<div class="head">
<h2>Todosh2>
<p>罗列日常计划，做一个时间管理大师！p>
<div class="input">
<span>内容span>
<input type="text" v-model="sear" placeholder="请输入你要做的事" />
<span id="add" @click="add">确认span>
div>
div>
<ul class="list">
<li v-show="datalist.length==0">暂无数据li>
<li v-show="datalist.length!=0" v-for="(item,index ) in datalist" >
<span class="xh">{{index+1}}span>
<span>{{item}}span>
<span class="qc" @click="remove(index)">span>
li>
<li>
<b> {{datalist.length}} b>
<b id="clear" @click="removeAll">清除b>
li>
ul>
div>
<script src="js/vue.js">script>
<script>
var top = new Vue({
el: "#box",
// 在此处补全代码，实现所需功能
data:{datalist:[],
sear:''
},
methods:{
add(){
this.datalist.push(this.sear)
},
remove(index){
this.datalist.splice(index,1)//splice函数删除第index个位置开始的n个元素
},//在（index,n,data1,data2）在n后面添加数据表示代替原删除的位置
removeAll(){
this.datalist=[]
}
}
});
script>
body>
html>