水果拼盘
flex-direction: column;
flex-wrap: wrap;
展开你的扇子
思路：
- 鼠标悬浮在元素上，元素会展开。所以会用到：hover伪类
- 增加当鼠标经过时的样式。css3中的2D转换之旋转rotate
#box:hover #item1{
transform: rotate(-60deg);
}
#box:hover #item2{
transform: rotate(-50deg);
}
#box:hover #item3{
transform: rotate(-40deg);
}
#box:hover #item4{
transform: rotate(-30deg);
}
#box:hover #item5{
transform: rotate(-20deg);
}
#box:hover #item6{
transform: rotate(-10deg);
}
#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);
}
手机的相处时间
其实这道题目x坐标的数据取到series中的数据，没取到x本身的数据，改下对换下x和y的类型就行
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",
},
],
};
灯的颜色
这道题考察点就是定时器，3秒后执行一个定时器，六秒执行下一个定时器，并且在调用定时器后，完成响应的显示与隐藏
// TODO：完善此函数 显示红色颜色的灯
const defaultlight = document.querySelector('#defaultlight')
const redlight = document.querySelector('#redlight')
const greenlight = document.querySelector('#greenlight')
function red() {
setTimeout(()=>{
defaultlight.style.display = 'none'
redlight.style.display = 'inline-block'
},3000)
}
// TODO：完善此函数 显示绿色颜色的灯
function green() {
setTimeout(()=>{
redlight.style.display='none'
greenlight.style.display = 'inline-block'
},6000)
}
// TODO：完善此函数
function trafficlights() {
red()
green()
}
trafficlights();
冬奥大抽奖
let rollTime; // 定义定时器变量用来清除定时器
let time = 0; // 转动次数
let speed = 300; // 转动时间间隔
let times; // 总转动次数
// 开始按钮点击事件后开始抽奖
$("#start").on("click", function () {
$("#award").text(""); //清空中奖信息
times = parseInt(Math.random() * (20 - 30 + 1) + 20, 10); // 定义总转动次数，随机20-30次
rolling();
});
// TODO：请完善此函数
function rolling() {
$('.li'+((time+1)%8!=0?(time+1)%8:8)).addClass('active').siblings().removeClass('active')
time++; // 转动次数加1
clearTimeout(rollTime);
rollTime = setTimeout(() => {
window.requestAnimationFrame(rolling); // 进行递归动画
}, speed);
// time > times 转动停止
if (time > times) {
clearInterval(rollTime);
$('#award').html(`恭喜你抽中${
$('.li'+(time%8)).html()}!!!`)
time = 0;
return;
}
}
蓝桥杯知识网
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>蓝桥知识网</title>
<link rel="stylesheet" href="./css/style.css" />
</head>
<body>
<div class="lan-header">
<div class="header">
<div class="header-top">
<div class="header-top-left">
蓝桥知识网
</div>
<div class="header-top-right">
<ul>
<li>首页</li>
<li>热门技术</li>
<li>使用手册</li>
<li>知识库</li>
<li>练习题</li>
<li>联系我们</li>
<li>更多</li>
</ul>
</div>
</div>
<div class="header-buttom">
<div class="header-buttom-1">蓝桥云课</div>
<div class="header-buttom-2">随时随地丰富你的技术栈</div>
<div class="header-buttom-3">
<p>加入我们</p>
</div>
</div>
</div>
</div>
<div class="lan-footer">
<div class="footer">
<div class="footer-top">
<div class="footer-top-title">
<div>人工智能</div>
<p>人工智能亦称智械、机器智能，指由人制造出来的机器所表现出来的智能。通常人工智能是指通过普通计算机程序来呈现人类智能的技术。
</p>
</div>
<div class="footer-top-title">
<div>前端开发</div>
<p>前端开发是创建 WEB 页面或 APP 等前端界面呈现给用户的过程，通过 HTML，CSS 及 JavaScript 以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。
</p>
</div>
<div class="footer-top-title">
<div>后端开发</div>
<p>后端开发是实现页面的交互逻辑，通过使用后端语言来实现页面的操作功能，例如登录、注册等。
</p>
</div>
<div class="footer-top-title">
<div>信息安全</div>
<p>ISO（国际标准化组织）的定义为：为数据处理系统建立和采用的技术、管理上的安全保护，为的是保护计算机硬件、软件、数据不因偶然和恶意的原因而遭到破坏、更改和泄露。
</p>
</div>
</div>
</div>
</div>
<div class="lan-top">
<div class="footer-buttom">
<div class="footer-buttom-top">© 蓝桥云课 2022</div>
<div class="footer-buttom-buttom">京公网安备 11010102005690 号 | 京 ICP 备 2021029920 号</div>
</div>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
.lan-header {
display: flex;
flex-direction: column;
align-items: center;
background-color: #a6b1e1;
}
.header {
margin-top: 13px;
height: 473px;
width: 1024px;
}
.header-top {
display: flex;
height: 46px;
justify-content: space-between;
align-items: center;
}
.header-top-left {
font-size: 18px;
color: white;
}
.header-top-right {
width: 524px;
height: 46px;
}
.header-top-right ul {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.header-top-right ul li {
list-style: none;
font-size: 16px;
color: white;
}
.header-buttom {
height: 427px;
display: flex;
flex-direction: column;
align-items: center;
}
.header-buttom-1 {
margin-top: 30px;
font-size: 45px;
color: black;
}
.header-buttom-2 {
margin-top: 62px;
font-weight: 200;
color: white;
font-size: 21px;
}
.header-buttom-3 {
margin-top: 36px;
width: 120px;
height: 40px;
border-radius: 2px;
box-shadow: inset 0 0 0 2px #efbfbf;
}
.header-buttom-3 p {
color: #efbfbf;
font-size: 18px;
line-height: 40px;
text-align: center;
}
.lan-footer {
display: flex;
flex-direction: column;
align-items: center;
}
.footer {
margin-top: 74px;
width: 1024px;
height: 376px;
}
.footer-top {
width: 100%;
height: 302px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.footer-top-title {
height: 144px;
width: 502px;
}
.footer-top-title div {
font-size: 30px;
font-weight: 200;
color: black;
}
.footer-top-title p {
font-size: 18px;
color: #aaa;
line-height: 1.4em;
}
.lan-top {
border-top: 1px solid black;
height: 80px;
display: flex;
justify-content: center;
}
.footer-buttom {
width: 100%;
height: 80px;
display: flex;
align-items: center;
flex-direction: column;
}
.footer-buttom-top {
margin-top: 30px;
font-size: 14px;
color: #aaa;
}
.footer-buttom-buttom {
margin-top: 10px;
font-size: 14px;
color: #aaa;
}
布局切换
<div id="app" v-cloak>
<!-- TODO：请在下面实现需求 -->
<div class="bar">
<a class="grid-icon" :class="{active:isTrue1}" @click="getClick1"></a>
<a class="list-icon" :class="{active:isTrue2}" @click="getClick2"></a>
</div>
<!--grid 示例代码，动态渲染时可删除-->
<ul class="grid" v-show="isTrue1">
<li v-for="good in goodsList" :key="good.title">
<a :href="good.href" target="_blank"> <img :src="good.image.large" /></a>
</li>
</ul>
<ul class="list" v-show="isTrue2">
<li v-for="good in goodsList" :key="good.title">
<a :href="good.href" target="_blank"> <img :src="good.image.large" /></a>
<p>{
{good.title}}</p>
</li>
</ul>
</div>
var vm = new Vue({
el: "#app",
data: {
goodsList: [],
isTrue1:true,
isTrue2:false
},
mounted() {
// TODO：补全代码实现需求
axios({
method:'get',
url:'./goodsList.json'
}).then(res=>{
console.log(res.data);
this.goodsList = res.data
})
},
methods:{
getClick1(){
this.isTrue1 = true
this.isTrue2 = false
},
getClick2(){
this.isTrue2 = true
this.isTrue1 = false
}
}
});
购物车
methods:{
addToCart(goods){
// TODO：修改当前函数，实现购物车加入商品需求
if(!goods.num){
goods.num = 1;
this.cartList.push(goods);
}else{
this.cartList.forEach(item=>{
if(item.id == goods.id){
item.num = ++goods.num
}
})
}
this.cartList = JSON.parse(JSON.stringify(this.cartList));
console.log(this.goodsList);
},
removeGoods(goods){
// TODO：补全代码实现需求
this.cartList.forEach((item,index)=>{
if(item.id == goods.id){
item.num == --goods.num
if(item.num == 0){
this.cartList.splice(index,1)
this.goodsList.forEach(ele=>{
if(ele.id == goods.id){
ele.num = 0
}
})
}
}
})
}
}
寻找小狼人
// 返回条件为真的新数组
Array.prototype.myarray = function (cb) {
// TODO：待补充代码
// cb (item) => item.category == "werewolf"
let arr = []
console.log(this);
this.forEach(item=>{
if(cb(item)) arr.push(item)
})
return arr
};
课程列表
let pageNum = 1; // 当前页码，默认页码1
let maxPage; // 最大页数
// TODO：待补充代码
let data;
let pagination = document.querySelector('#pagination')
let list_group = document.querySelector('.list-group')
//请求数据
axios.get('./js/carlist.json').then(res=>{
data = res.data
console.log(data);
maxPage = Math.ceil( data.length/5)
update(data)
})
//切片处理
function update(data){
let arr = data.slice((pageNum-1)*5,pageNum*5)
list_group.innerHTML=''
for(let i = 0 ; i < arr.length ;i++){
list_group.innerHTML += ` <a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">${
arr[i].name}</h5>
<small>${
(arr[i].price/100).toFixed(2)+'元'}</small>
</div>
<p class="mb-1">
${
arr[i].description}
</p>
</a>`
}
}
function pre(){
if(pageNum <= 1){
pageNum = 1
prev.classList.add('disabled')
}else{
prev.classList.remove('disabled')
}
}
function yeshu(){
pagination.innerHTML = `共${
maxPage} 当前${
pageNum}页`
}
function nex(){
if(pageNum >= 4){
pageNum = 4
next.classList.add('disabled')
}else{
next.classList.remove('disabled')
}
}
// 点击上一页
let prev = document.getElementById("prev");
prev.onclick = function () {
// TODO：待补充代码
pageNum--
pre()
nex()
yeshu()
update(data)
};
// 点击下一页
let next = document.getElementById("next");
next.onclick = function () {
// TODO：待补充代码
pageNum++
pre()
nex()
yeshu()
update(data)
};