第十四届蓝桥杯（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-tableref="singleTable"highlight-current-row:data="tableData"stripeborderstyle="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">
第十四届蓝桥杯（Web应用开发）模拟赛1期-大学组相关推荐
- 第十四届蓝桥杯Web应用开发—模拟赛3期--网页PPT--蓝桥校园一卡通--心愿便利贴
文章目录 1:网页PPT (5分) ✔✔✔ 2:蓝桥校园一卡通 (10分)✔✔✔ 3:心愿便利贴 (15分) ✔✔✔ 1:网页PPT (5分) ✔✔✔ switchPage( ) switchPage ...
- 2023年第十四届蓝桥杯Web应用开发(职业院校组)省赛真题
前言: 因博主申请的线上考试所以留下了真题,本篇文章只有题目没有答案,因博主技术有限(请理解一下),博主只拿了省二 蓝桥杯真题网盘地址: 链接:https://pan.baidu.com/s/1x_J ...
- 蓝桥杯 Web 应用开发模拟赛首次公开！参赛选手速进！
第十三届蓝桥杯大赛报名通道正式开启,你行动起来了吗? 很多细心的小伙伴一定看到了,这届蓝桥杯大赛中新增了 Web 应用开发组.这是 Web 应用开发首次出现在杯赛中,所以没有历年真题可以供参赛选手刷题 ...
- 【蓝桥杯Web】第十四届蓝桥杯Web模拟赛 3 期 | 精品题解（上）
- 第十四届蓝桥杯（Web 应用开发）模拟赛 1 期-职业院校组-知识点题解
这个题解是参考了"海底烧烤店ai"一位非常优秀的全栈领域创作者的博主写的,自己在看的时候发现个人知识点比较欠缺,所以就在题解下面添加了一些知识点,便于理解. 原博主的文章链接如下: ...
- 第十四届蓝桥杯（Web 应用开发）模拟赛 3 期-职业院校组题解
第十四届蓝桥杯(Web 应用开发)模拟赛 3 期-职业院校组题解 友情链接 第十四届蓝桥杯(Web 应用开发)模拟赛 3 期-大学组 第十四届蓝桥杯(Web 应用开发)模拟赛 3 期-职业院校组 第十 ...
- 第十四届蓝桥杯要开始了（2022年）
今天来安利一个计算机类的算法比赛,不能说是"安利",因为基本上每一个计算机专业的学生都知道这个比赛. 这个比赛的名气大到根本不需要我安利.... 1.多去参加一些竞赛或者社团活动 ...
- 2022 第十四届蓝桥杯模拟赛第一期（题解与标程）
第十四届蓝桥杯模拟赛第一期 1. 二进制位数 问题描述 答案提交 参考答案 2. 晨跑 问题描述 答案提交 参考答案 3. 调和级数 问题描述 答案提交 参考答案 程序验证 4. 山谷 问题描述 答案 ...
- 第十四届蓝桥杯第一期模拟赛 python
第十四届蓝桥杯python第一期模拟赛 文章目录 第十四届蓝桥杯python第一期模拟赛 1. 二进制位数 问题描述 答案提交 思路 参考答案 2. 晨跑 问题描述 答案提交 思路 参考答案 3. 调 ...
- 第十四届蓝桥杯第三期模拟赛 C/C++ B组 原题与详解
本篇文章对第十四届蓝桥杯第三期模拟赛所有的题目进行了详细解析.如果大家还想刷题的话,我给大家整理出了第十二届的省赛真题:第十二届省赛C/C++ B组真题.推荐大家可以去做一下. 文章目录 一.填空题 ...
最新文章
- 在Ubuntu 14.04 64bit上安装lua5.2
- ibatis源码浅析- 初探
- 欠薪解决新途径：劳动者可向法院申请支付令。(拖欠工资就是违法)
- 【机器学习基础】关于异常检测的分享！
- 强烈推荐几个我常置顶阅读清华、哈工大的平台公众号!
- Qt添加对Android的OpenSSL支持
- Win8Metro(C#)数字图像处理--2.33图像非线性变换
- 3.10 触发字检测
- [asp.net mvc]自定义filter
- 微星主板黑苹果_记一次黑苹果PC装机全过程
- 普通的Shader-序列帧相关
- ColorUI 微信小程序 商品详情页模板，仿微信胶囊
- wxpython控件旋转_wxPython修改文本框颜色过程解析
- JavaScript ES6新特性
- UG区域拉伸和零件透明在装配中不显示
- 通过Java向数据库存和取图片
- java将map根据key分组_Java将List中的实体类按照某个字段进行分组并存放至Map中操作代码...
- linux去重复程序,Linux下大文件的排序和去重复
- Groovy~Groovy的方法
- Linux操作系统安装
热门文章