第十四届蓝桥杯（Web应用开发）模拟赛1期-大学组
Posted H-rosy
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了第十四届蓝桥杯（Web应用开发）模拟赛1期-大学组相关的知识，希望对你有一定的参考价值。
数据类型检测
请看这篇数据类型检测
渐变色背景生成器
html
<!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" />
<link rel="stylesheet" href="styles.css" />
<title>Gradient Generator</title>
</head>
<body>
<div class="controls">
<input id="color1" type="color" name="color1" value="#00dbde" />
<input id="color2" type="color" name="color2" value="#fc00ff" />
</div>
<div class="gradient"></div>
<script src="index.js"></script>
</body>
</html>
css
/* 注意这里定义的 CSS 变量，它们会用于生成渐变色背景 */
:root
--color1: #00dbde;
--color2: #fc00ff;
body
width: 100vw;
height: 100vh;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: #222;
.controls
width: 500px;
height: 100px;
display: flex;
justify-content: space-between;
input[type="color"]
-webkit-appearance: none;
border: none;
width: 60px;
height: 60px;
border-radius: 5px;
input[type="color"]::-webkit-color-swatch-wrapper
padding: 0;
margin: 0;
input[type="color"]::-webkit-color-swatch
border: none;
border-radius: 5px;
transform: scale(1.1);
.gradient
width: 500px;
height: 500px;
border-radius: 5px;
background: linear-gradient(45deg, var(--color1), var(--color2));
js
const inputs = document.querySelectorAll(".controls input");
/**
* 上面已经选取了两个取色器
* 请添加相应的 JS 事件处理函数并绑定到合适的事件监听器上（提示：change 事件）
* 这样我们就可以用取色器选取颜色来生成下方的渐变色背景啦
* */
let root=document.querySelector(":root");
inputs[0].addEventListener('change',function()
root.style.setProperty("--color1", this.value);
console.log(this.value);
,false)
inputs[1].addEventListener('change',function()
root.style.setProperty("--color2", this.value);
console.log(this.value);
,false)
// console.log(inputs[0])
// console.log(inputs[0])
水果叠叠乐
看这篇：水果叠叠乐
element-ui 组件二次封装
就考了这个知识点 label 的值与value的值相同则会被选定。 label绑定的值就是Radio 的 value。我这里选定label与日期绑定。也可以和地址绑定，仔细观察数据。可以发现每一行都是不一样的。然后给radio绑定了一个change事件。通过与这个事件绑定的方法使得label 的值与value的值一致。一致则被选中
<template>
<div class="main">
<el-table
ref="singleTable"
highlight-current-row
:data="tableData"
stripe
border
style="width: 100%"
>
<el-table-column label="单选" width="80">
<!-- TODO：完善单选按钮组件，实现需求（DOM 结构不能修改） -->
<template slot-scope="scope">
<el-radio :label=scope.row.date v-model="currentRow" @change="changeRadio(scope.row)" > </el-radio>
</template>
</el-table-column>
<el-table-column label="日期" width="180">
<template slot-scope="scope">
📅<span style="margin-left: 10px"> scope.row.date </span>
</template>
</el-table-column>
<el-table-column prop="name" label="姓名" width="180"> </el-table-column>
<el-table-column prop="address" label="地址"> </el-table-column>
</el-table>
<div class="tools">
<el-button @click="setCurrent(tableData[1])">选中第二行</el-button>
<el-button @click="setCurrent()">取消选择</el-button>
</div>
</div>
</template>
<script>
module.exports =
props:
tableData:
type: Array,
default: () => [],
,
,
data()
return
currentRow: null,
;
,
methods:
setCurrent(row)
console.log(this.$refs.singleTable.setCurrentRow);
this.$refs.singleTable.setCurrentRow(row); // 设置当前选中行
,
changeRadio(row)
//console.log(row);
this.currentRow=row.date
,
;
</script>
<style scoped>
.main
width: 60%;
margin: 0 auto;
.tools
margin-top: 20px;
text-align: center;
</style>
http应用
就是基础的node.js
// TODO: 待补充代码
const http=require('http')
const server =http.createServer()
server.on('request',function(req,res)
res.end("hello world")
)
server.listen(8080,function()
console.log('8080启动成功');
)
新课上线啦
写完这个题我真的明白了屎山是如何造出来的。
这题没什么好讲的,就是根据它提供的参数去实现效果就行啦,纯纯切图仔。但是我写的还是很乱的，css样式有许多重复的部分，不够整洁，并且在设计结构的时候没有考虑好就直接写了。最好的是在下面那一层在包一个div，免得里面的子元素一直需要使用left：360px。所以我觉得写的是屎山 。仅供参考
css
/* TODO：待补充代码 */
*
margin: 0;
.head
height: 500px;
width: 1920;
background: url("../images/bg.png") no-repeat;
#img1
margin-top: 100px;
margin-bottom: 61px;
margin-left: 520px;
margin-right: 520px;
.span1
font-family: PingFangSC-Medium;
font-size: 18px;
color: #333333;
letter-spacing: 0;
margin-top: 13px;
display: inline-block;
.span2
font-family: PingFangSC-Semibold;
font-size: 18px;
color: #1E5EF5;
letter-spacing: 0;
text-align: justify;
line-height: 18px;
font-weight: 600;
display: inline-block;
/* 手指 */
.shouz
font-family: PingFangSC-Semibold;
font-size: 20px;
color: #1E5EF5;
line-height: 20px;
font-weight: 600;
margin-left: 10px;
.erweima
width: 84px;
height: 84px;
margin-top: 18px;
position: absolute;
right: 169px;
top: 18px;
.main
background: #F8FAFB;
position: relative;
width: 1920px;
height: 1197px;
.div1
background-image: url("../images/small-bg.png");
width: 1200px;
height: 120px;
position: absolute;
top: -60px;
left: 360px;
/* margin-left: 360px;
margin-top: 440px; */
.div1_1
margin-left: 174px;
margin-top: 34px;
/* top: -34px;
margin-left: 360px; */
.course
font-family: PingFangSC-Semibold;
font-size: 26px;
color: #1E5EF5;
letter-spacing: 0;
line-height: 26px;
font-weight: 600;
text-align: center;
position: absolute;
left: 908px;
top: 120px;
.course::after
top: 128px;
margin-left: 18.94px;
height: 10.67px;
width: 16.06px;
background: url("../images/right.png") no-repeat;
content: '';
display: inline-block;
.course::before
top: 128px;
margin-right: 18.94px;
height: 10.67px;
width: 16.06px;
background: url("../images/left.png") no-repeat;
content: '';
display: inline-block;
.div2
width: 1200px;
height: 456px;
position: absolute;
left: 360px;
top: 181px;
background: #FFFFFF;
box-shadow: 0px 2px 10px 0px rgba(30, 94, 245, 0.08);
border-radius: 10px;
.day
float: left;
width: 390px;
height: 211px;
margin-top: 48px;
overflow: hidden;
.div2_1
margin-left: 200px;
margin-right: 24px;
.title
background: #1E5EF5;
border-radius: 8px 8px 0px 0px;
font-family: PingFangSC-Medium;
font-size: 18px;
color: #FFFFFF;
letter-spacing: 0;
/* text-align: center; */
line-height: 40px;
font-weight: 500;
width: 100%;
height: 40px;
padding-left: 16px;
overflow: hidden;
display: block;
.aside
width: 76.2px;
height: 137px;
background: #E1EAFF;
float: left;
.aside ul
list-style: none;
/* ul默认的起始位置是为40px */
padding-inline-start: 0px;
.aside ul li
height: 32.75px;
font-family: PingFangSC-Regular;
font-size: 14px;
color: #1E5EF5;
letter-spacing: 0;
line-height: 32.75px;
font-weight: 400;
text-align: center;
.list
background: #F5F8FF;
width: 313.8px;
height: 137px;
float: left;
ul
list-style: none;
/* ul默认的起始位置是为40px */
padding-inline-start: 0px;
ul li
margin-left: 12.39px;
height: 32.75px;
font-family: PingFangSC-Regular;
line-height: 32.75px;
font-weight: 400;
font-family: PingFangSC-Regular;
font-size: 14px;
color: #333333;
letter-spacing: 0;
line-height: 32.75px;
font-weight: 400;
.footer
width: 390px;
height: 40px;
background: #FFF7F1;
border-radius: 0px 0px 9.5px 9.5px;
margin-top: 137px;
.img11
margin-top: 9px;
.sp5
display: inline-block;
font-family: PingFangSC-Regular;
font-size: 14px;
color: #333333;
letter-spacing: 0;
margin-top: 13px;
font-weight: 400;
text-align: center;
.foot
width: 804px;
height: 106px;
background-color: pink;
position: absolute;
top: 488px;
left: 560px;
.foot .title
padding-left: 0px;
.bys
width: 68px;
height: 22px;
position:absolute;
right: 312px;
bottom: 92px;
.aside1
width: 76.2px;
height: 69px;
background: #E1EAFF;
float: left;
.list1
background: #F5F8FF;
width:727.8px;
height: 69px;
float: left;
html 页面
<!DOCTYPE 第十四届蓝桥杯（web应用开发）模拟赛2期 -大学组
蓝桥杯Web第十四届蓝桥杯（Web 应用开发）模拟赛 1 期-职业院校组 | 精品题解
蓝桥杯Web第十四届蓝桥杯Web模拟赛 3 期 | 精品题解（下）
蓝桥杯Web第十四届蓝桥杯Web模拟赛 3 期 | 精品题解（上）