记录刷题笔记:
2、新鲜的蔬菜
利用绝对定位居中了之后,需要 -50% -50%
/* TODO:待补充代码 */
#box1 {
display: flex;
justify-content: center;
align-items: center;
}
#box2 {
position: relative;
}
#box2 .item:nth-child(2) {
position: absolute;
right: 0;
bottom: 0;
}
#box3 {
position: relative;
}
#box3 .item:nth-child(2) {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
#box3 .item:nth-child(3) {
position: absolute;
right: 0;
bottom: 0;
}
3、水果消消乐
// TODO:请补充代码
function startGame() {
let scoreCount = 0;
let scoreVO = document.querySelector("#score");
scoreVO.innerHTML = scoreCount; //这是一个 给分数赋值的操作
const imgArr = document.querySelectorAll(".img-box img"); //
document.querySelector(".btn").style.display = "none"; //让按钮消失
for (const item of imgArr) {
item.style.display = "block";
}
delayCloseImg(imgArr); //
let imgCheckArr = []; //长度为2 就判断为真 然后就可以清除
let boxVisibility = [];
document.querySelector(".container").addEventListener("click", function(event) {
//这里得判断一下,不能点自己 还没做
imgCheckArr.push(event.target.children[0].alt); //存储进去
boxVisibility.push(event.target);
//点击的时候,img会显示出来
event.target.children[0].style.display = "block"; //显示出来
if (imgCheckArr.length === 2) {
if (imgCheckArr[0] === imgCheckArr[1]) {
scoreCount += 2;
delayCloseBox(boxVisibility);
} else {
scoreCount -= 2;
}
delayCloseImg(imgArr);
scoreVO.innerHTML = scoreCount; //给分数赋值
imgCheckArr = []; //数组清除
boxVisibility = []; //盒子清除
}
});
}
function delayCloseImg(imgArr) {
setTimeout(() => {
for (const item of imgArr) {
item.style.display = "none";
}
}, 800);
}
function delayCloseBox(boxVisibility) {
setTimeout(() => {
for (const item of boxVisibility) {
item.style.visibility = "hidden";
}
}, 800);
}
4、用什么来做计算
正则全局 遇到x和÷ 就替换 然后就是灵性的eval函数 这个函数可以自动计算字符串里面的运算符
// TODO:请补充代码
let formula = document.querySelector("#formula");
let result = document.querySelector("#result");
let formulaVO = "";
document.querySelector(".calculator").addEventListener("click", function (event) {
//先实现重置AC功能
if (event.target.textContent == 'AC') {
console.log("重置功能执行");
formula.value = null
result.value = null
formulaVO = "";//这个也需要 要不然字符串重叠
return;
}
//如果是等于号,不添加,并且返回结果
if (event.target.textContent == '=') {
console.log("等号功能执行");
//eval这个函数是可以直接计算的 但是x是* ÷是 所以需要写一个替换
let temp = formula.value;//缓存
let regExp = /x/g;
let regExp2 = /÷/g;
temp = temp.replace(regExp, "*"); //这个不是改变,而是弄出一个新的字符串
temp = temp.replace(regExp2, "/");
console.log(temp);
let res = eval(temp)
result.value = res;
return;
}
//如果是开根号,也是跟上面差不多
if (event.target.textContent == '√') {
let res = Math.sqrt(formula.value);
result.value = res;
return;
}
//但是点击除了按钮之外,也会有东西 得注意一下
formulaVO += event.target.textContent;//可以拿到里面
//接着就需要赋值上去了
formula.value = formulaVO
})
5、开学礼物大放送
这个,就纯粹的CSSHTML绘制网站页面了,有点痛苦,还是喜欢写JS。
<div class="container">
<div class="banner-bg">
<div class="banner-title"></div>
<div class="left"></div>
<div class="part1-bg">
<div class="btn1"></div>
</div>
<div class="right"></div>
</div>
</div>
6、权限管理
$(function () {
// 使用 ajax 获取 userList.json 数据并渲染到页面
getData();
let left = document.querySelector("#leftSelect");
let right = document.querySelector("#rightSelect")
// let options = document.querySelectorAll("#leftSelect option")
// 为按钮添加事件
$("#add").click(function () {
// TODO:补充代码,实现功能
let SelectOptions = [];
for (let i = 0; i < left.options.length; i++) {
if (left.options[i].selected) { //选中的为true咯
SelectOptions.push(left.options[i].value)
//直接在里面做删除和添加就行了.
let option = document.createElement("option")
option.value = left.options[i].value
option.innerHTML = `${left.options[i].value}`
right.appendChild(option)
left.options[i].remove()
}
}
console.log(SelectOptions);
});
$("#addAll").click(function () {
// TODO:补充代码,实现功能
for (let i = 0; i < left.options.length; i++) {
let option = document.createElement("option")
option.value = left.options[i].value
option.innerHTML = `${left.options[i].value}`
right.appendChild(option)
}
left.innerHTML = ""//清空
});
$("#remove").click(function () {
// TODO:补充代码,实现功能
});
$("#removeAll").click(function () {
// TODO:补充代码,实现功能
});
});
/**
* 修改权限
* @param {Object} right 要修改的权限
* @param {Object} changeList 要修改权限的用户列表
*/
function changeAccess(right, changeList) {
// TODO:补充代码,实现功能
}
// 异步获取数据
function getData() {
// TODO:补充代码,实现功能
var xhr = new XMLHttpRequest();
xhr.open("GET", "./js/userList.json", true);
xhr.responseType = "json";
xhr.onload = function () {
let result = xhr.response;
// 获取 userList.json 数据并渲染到页面
let table = document.querySelector("#userList");
for (const item of result) {
let tr = document.createElement("tr");
tr.innerHTML = `<td>${item.name}</td>
<td>${item.right?"管理员":"普通用户"}</td>`;
table.appendChild(tr);
}
};
xhr.send(); //需要发送
}
7、一起会议吧
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>一起会议吧</title>
<link rel="stylesheet" type="text/css" href="./css/index.css" />
<link rel="stylesheet" href="./css/iconfont/iconfont.css" />
</head>
<body>
<div id="app">
<!-- TODO:请在下面实现需求 -->
<!-- 登录/注销窗口 -->
<div class="login">
<div class="left-tools">
<a class="close-btn"></a>
<a class="shrink-btn"></a>
</div>
<h3>{{loginStatus?'注销':'登录'}}</h3>
<p v-if="!loginStatus">
选择用户:<select id="selectUser" v-model="loginName">
<option :value="item.name" v-for="item in user" :key="item.id">
{{ item.name }}
</option>
</select>
</p>
<p v-if="loginStatus">当前用户为:{{loginName}}</p>
<a class="login-btn" @click="login">{{loginStatus?'注销':'登录'}}</a>
</div>
<!-- 右侧显示用户列表窗口按钮 -->
<button id="show" class="right-btn" v-if="active==3" @click="activeChange(2)">
<span class="iconfont icon-left-arrow" ></span>
</button>
<!-- 用户列表窗口 -->
<!-- v-if="loginStatus" -->
<div class="user-dialog" v-if="loginStatus && dialogStatus">
<!-- 用户列表窗口上侧工具栏 -->
<ul class="tools">
<li class="tools-left">
<button :class="active==0?'active':''" @click="activeChange(0)">
<span class="iconfont icon-close"></span>
</button>
<button :class="active==1?'active':''" @click="activeChange(1)">
<span class="iconfont icon-dialog"></span>
</button>
<button :class="active==2?'active':''" @click="activeChange(2)" >
<span class="iconfont icon-list"></span>
</button>
</li>
<li class="tools-right" @click="closeTools">
<button class="show-list">
<span class="iconfont icon-retract"></span>
</button>
</li>
</ul>
<!-- 用户列表 -->
<ul class="say-list">
<li>
<span class="iconfont icon-microphone"></span>
</li>
<li class="line"></li>
<li>正在讲话:{{loginName}};</li>
</ul>
<ul class="user-list" v-if="active == 1">
<li v-for="item in user" :key="item.id" v-if="item.name == loginName">
<img class="header" :src="item.name == loginName?item.imgPath:null" />
<div class="user-name">
<span class="iconfont icon-user header-icon"></span>
<span class="iconfont icon-microphone"></span>
{{ loginName }}
</div>
</li>
</ul>
<ul class="user-list" v-if="active == 2">
<li v-for="item in user" :key="item.id" >
<img class="header" :src="item.imgPath" />
<div class="user-name">
<span class="iconfont icon-user header-icon"></span>
<!-- item.name == loginName -->
<span class="iconfont icon-microphone" v-if="item.isHost"></span>
{{ item.name }}
</div>
</li>
</ul>
</div>
</div>
<script type="text/javascript" src="./js/vue.js"></script>
<script type="text/javascript" src="./js/axios.min.js"></script>
<script type="text/javascript">
// TODO:请在下面实现需求
new Vue({
el: "#app",
data: {
user: [],
loginName:"Tom",
loginStatus:false,
dialogStatus:false,
active:1, //默认选登录用户信息
},
methods: {
closeTools(){
this.active = 3;
this.dialogStatus = false;
},
activeChange(statusNumber){
this.active = statusNumber
this.dialogStatus = true;
},
getData() {
axios.get("./js/userList.json").then((res) => {
this.user = res.data;
});
},
login() {
//需要将登录用户排在第一位,就数组吧。
for (let i = 0; i < this.user.length; i++) {
if (this.loginName == this.user[i].name) {
let temp = this.user[i];
this.user.splice(i,1); //删除遍历到的这个,然后放在最前面
// this.user.unshift(temp)
this.user.splice(0,0,temp);
}
}
this.loginStatus = !this.loginStatus;
this.dialogStatus = this.loginStatus;
}
},
mounted() {
this.getData(); //调用函数都是在钩子函数
},
});
</script>
</body>
</html>
10、天气趋势
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>天气趋势</title>
<meta
name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
/>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="./js/axios.js"></script>
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script
src="js/echarts.min.js"
type="text/javascript"
charset="utf-8"
></script>
</head>
<body>
<div id="app">
<div class="top-bar">2022年 Y 城全年温度统计图</div>
<!-- 主体 -->
<div class="container">
<!-- 月份 -->
<div class="month">
<ul>
<!-- TODO:待补充代码 在下面的 li 标签中完成 12个月份 (即 monthList) 的渲染 -->
<li
:class="monthActive==item ? 'active':''"
v-for="(item,index) in monthList"
@click="clickActive($event.target.textContent,index)"
>{{item}}</li>
</ul>
</div>
<div class="chart">
<!-- TODO:待补充代码 -->
<!-- currentMonth 未来七天和本月 tab 切换,只有当前月才显示 -->
<div id="currentMonth">
<div class="title">
<h3>{{typeTitle}}</h3>
<div class="type">
<span
id="seven"
:class="typeTitle=='未来7天天气'?'active':''"
@click="sevenDay($event.target.textContent)"
>未来7天</span
>
<span
id="current"
:class="typeTitle=='本月天气'?'active':''"
@click="sevenDay($event.target.textContent)"
>本月</span
>
</div>
</div>
</div>
<div id="chart"></div>
</div>
</div>
</div>
</body>
</html>
<script>
// TODO:待补充代码
var vm = new Vue({
el: "#app",
data: {
chart: null, // 图表
chartOptions: null, // 图表配置项
typeTitle: "本月天气",
monthList: {
January: "1月",
February: "2月",
March: "3月",
April: "4月",
May: "5月",
June: "6月",
July: "7月",
August: "8月",
September: "9月",
October: "10月",
November: "11月",
December: "12月",
},
monthActive: "1月",
xData: [],
yData: [],
menuList: [],
TwoArray: [],
},
mounted: function () {
// 初始化 echarts
this.$nextTick(() => {
this.initChart();
this.getData();
});
},
methods: {
getFutureDates() {
const dates = [];
const today = new Date(); // 获取当前日期
for (let i = 0; i < 7; i++) {
const futureDate = new Date(today);
futureDate.setDate(today.getDate() + i);
const month = futureDate.getMonth() + 1;
const day = futureDate.getDate();
const formattedDate = `${month}/${day}`;
dates.push(formattedDate);
}
return dates;
},
sevenDay(event) {
let date = new Date();
let Month = date.getMonth() + 1;
switch (Month) {
case 1:
this.clickActive("1月", "January");
break;
case 2:
this.clickActive("2月", "February");
break;
case 3:
this.clickActive("3月", "March");
break;
case 4:
this.clickActive("4月", "April");
break;
case 5:
this.clickActive("5月", "May");
break;
case 6:
this.clickActive("6月", "June");
break;
case 7:
this.clickActive("7月", "July");
break;
case 8:
this.clickActive("8月", "August");
break;
case 9:
this.clickActive("9月", "September");
break;
case 10:
this.clickActive("10月", "October");
break;
case 11:
this.clickActive("11月", "November");
break;
case 12:
this.clickActive("12月", "December");
break;
}
if (event === "本月") {
this.typeTitle = "本月天气";
} else {
this.typeTitle = "未来7天天气";
const futureDates = this.getFutureDates(); //未来七天日期的数组
this.xData = [];//初始化
for (const item of futureDates) { //这个是循环七次
this.xData.push(item)
}
this.yData = [];
for (let i = 0; i < 7; i++) {
this.yData.push(`${this.TwoArray[date.getMonth()][date.getDate() - 1]}`)
date.setTime(date.getTime() + 1000 * 60 * 60 * 24)
}
}
this.initChart(); //初始化一下表
},
clickActive(event, index) {
this.monthActive = event; //激活active的
for (const item of this.menuList) {
for (const key in item) {
if (key == index) {
this.xData = []; //初始化一下
this.yData = [];
for (let i = 1; i <= item[key].length; i++) {
this.xData.push(i);
}
for (const temperature of item[key]) {
this.yData.push(temperature);
}
}
}
}
this.initChart(); //初始化一下表
},
getData() {
axios.get("./js/weather.json").then((res) => {
this.menuList = res.data;
this.clickActive("1月", "January"); //默认点击月份是1
for (const item of this.menuList) { //转换为二位数组
let key = Object.keys(item);
this.TwoArray.push(item[key[0]])
}
console.log(this.TwoArray);
});
},
initChart() {
// 初始化图表
this.chart = echarts.init(document.getElementById("chart"));
// 配置项
this.chartOptions = {
grid: {
top: 35,
bottom: 5,
left: 10,
right: 10,
containLabel: true,
},
tooltip: {
trigger: "axis",
axisPointer: {
lineStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(255,255,255,0)",
},
{
offset: 0.5,
color: "rgba(255,255,255,1)",
},
{
offset: 1,
color: "rgba(255,255,255,0)",
},
],
global: false,
},
},
},
},
xAxis: [
{
type: "category",
boundaryGap: false,
axisLabel: {
formatter: "{value}",
fontSize: 12,
margin: 20,
textStyle: {
color: "#bfbfbf",
},
},
axisLine: {
lineStyle: {
color: "#e9e9e9",
},
},
splitLine: {
show: true,
lineStyle: {
color: "#f7f7f7",
},
},
axisTick: {
show: false,
},
// x 轴显示的数据,日期
data: this.xData,
},
],
yAxis: [
{
boundaryGap: false,
type: "value",
axisLabel: {
textStyle: {
color: "#bfbfbf",
},
formatter: `{value}\u2103`,
},
nameTextStyle: {
color: "#fff",
fontSize: 12,
lineHeight: 40,
},
splitLine: {
lineStyle: {
color: "#f7f7f7",
},
},
axisLine: {
show: true,
lineStyle: {
color: "#e9e9e9",
},
},
axisTick: {
show: false,
},
},
],
series: [
{
name: "天气",
type: "line",
smooth: false,
showSymbol: false,
symbolSize: 0,
zlevel: 3,
itemStyle: {
color: "#ff6600",
borderColor: "#a3c8d8",
},
lineStyle: {
normal: {
width: 3,
color: "#ff6600",
},
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "#ff6600",
},
{
offset: 0.8,
color: "#ff9900",
},
],
false
),
},
},
// Y 轴显示的数据,即温度数据
data: this.yData,
},
],
};
// 调用此方法设置 echarts 数据
this.chart.setOption(this.chartOptions);
},
},
//axios请求
});
</script>
接下来是职业组的一些题目:
5、传送门
$(window).scroll(function (event) {
// 页面滚动到指定范围,对应的侧边按钮字体变色
// TODO:请补充代码实现功能
let distanceFromTop = window.scrollY; //因为是Y轴,拿到到顶部的距离
// console.log(distanceFromTop);
const lift = document.querySelectorAll(".default-color");
for (const item of lift) {
item.classList.remove("active-color")
}
if (distanceFromTop < 960) {
lift[0].classList.add("active-color")
} else if (distanceFromTop < 1920) {
lift[1].classList.add("active-color")
} else if (distanceFromTop >= 1920) {
lift[2].classList.add("active-color")
}
});
/**
* @param {Object} scrollTopVal:到达指定位置需要滚动的高度
* 点击按钮,滚动到指定位置
*/
function toFunction(scrollTopVal) {
// TODO:请补充代码实现功能
window.scroll({
top:scrollTopVal,
behavior:'smooth'
})
}
6、小兔子找萝卜
// TODO:游戏开始
function start() {
document.querySelector("#start").style.display = "none";//开始按钮隐藏
document.querySelector("#move").style.display = "block";//移动按钮显示
}
// TODO:重置游戏
function reset() {
let result = document.querySelector(".result");
result.innerHTML = "";//清除提示;
document.querySelector("input").value = null
document.querySelector("#start").style.display = "block";//开始按钮显示
document.querySelector("#move").style.display = "none";//移动按钮隐藏
document.querySelector("#reset").style.display = "none";//重置按钮隐藏
//小兔子要回到原处
let box = document.querySelectorAll(".container div");
for (let i = 0; i < box.length; i++) {
box[i].classList.remove("active");
}
box[0].classList.add("active");
}
// TODO:移动
function move() {
let moveValue = document.querySelector("input").value;
let result = document.querySelector(".result");
let box = document.querySelectorAll(".container div");
if (moveValue == 1 || moveValue == 2) {
for (let i = 0; i < box.length; i++) {
if (box[i].className.includes("active")) {
box[i].classList.remove("active");
box[i+ parseInt(moveValue)].classList.add("active");
break;
}
}
result.innerHTML = "";//清除提示;
if (box[12].className.includes("active")) {//如果踩到第13块草坪上的炸弹就结束
document.querySelector("#move").style.display = "none";//移动按钮隐藏
document.querySelector("#reset").style.display = "block";//重置按钮显示
result.innerHTML = "哎呀!兔子踩到炸弹了,游戏结束!"
}
if (box[23].className.includes("active")) {
document.querySelector("#move").style.display = "none";//移动按钮隐藏
document.querySelector("#reset").style.display = "block";//重置按钮显示
result.innerHTML = "小兔子吃到胡萝卜啦,游戏获胜!"
}
} else {
result.innerHTML = "输入的步数不正确,请重新输入。"
}
}
7、猜硬币
/**
* @param {*} input_values input 框中输入的值
* @returns Array 将输入的值中 1-9 组成一个数组
*/
// 将输入的值中 1-9 组成一个数组
function findNum(input_values) {
// TODO:待补充代码
let numberArr = [];//设置好数组,记得字符串要转换为number然后push
for (const item of input_values) {
if (item >= '0' && item <= '9') {
numberArr.push(Number(item));
}
}
console.log(numberArr);
return numberArr;
}
// 将 1-9 中三个不重复的随机数放入数组中,并返回这个数组
let randomCoin = () => {
let randomNumArr = [];
// TODO:待补充代码
while (true) {
let number1 = randomNumber(1, 9);
let number2 = randomNumber(1, 9);
let number3 = randomNumber(1, 9);
if (number1 !== number2 && number1 !== number3 && number2 !== number3) {
randomNumArr.push(number1);
randomNumArr.push(number2);
randomNumArr.push(number3);
break;
}
}
console.log(randomNumArr);
return randomNumArr;
};
function randomNumber(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min); //返回随机数
}
// 请勿删除和修改下面代码
try {
module.exports = { randomCoin, findNum };
} catch (e) {}
8、阅读吧
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>阅读吧</title>
<link rel="stylesheet" href="./css/iconfont/iconfont.css" />
<link rel="stylesheet" type="text/css" href="./css/index.css" />
</head>
<body>
<div id="app">
<!-- TODO:请在下面实现需求 -->
<!-- 设置按钮图标 -->
<a class="iconfont icon-setting" @click="changeToolStatus(true)"></a>
<!-- 头部工具栏 -->
<transition name="fade" v-if="toolStatus">
<div class="header">
<ul class="tools">
<li class="container">
<div class="left">阅读主题</div>
<!-- 设置主题的圆形色块 -->
<div class="right" id="setBG">
<a
style="background-color: #f6edd4"
:class="index==1?'iconfont icon-selected':''"
@click="selectColor(1)"
></a>
<a
style="background-color: #ebf4ea"
:class="index==2?'iconfont icon-selected':''"
@click="selectColor(2)"></a>
<a
style="background-color: #e9f2f5"
@click="selectColor(3)"
:class="index==3?'iconfont icon-selected':''"></a>
<a
style="background-color: #f6e8e4"
:class="index==4?'iconfont icon-selected':''"
@click="selectColor(4)"></a>
<a
style="background-color: #000000"
:class="index==5?'iconfont icon-selected':''"
@click="selectColor(5)"></a>
</div>
</li>
<li class="container">
<div class="left">字体大小</div>
<!-- 设置字体大小的按钮 -->
<div class="set-font">
<a class="prev" @click="FontSizeChange(0)">A-</a><b></b> <span class="lang">{{ fontSize }}</span
><b></b>
<a class="next" @click="FontSizeChange(1)">A+</a>
</div>
</li>
<li class="container">
<!-- 关闭 x 图标 -->
<a
class="iconfont icon-close"
@click="changeToolStatus(false)"
></a>
</li>
</ul>
</div>
</transition>
<!-- 阅读区 -->
<p
class="text-content"
:style="customStyle"
>
汪淼觉得,来找他的这四个人是一个奇怪的组合:两名警察和两名军人,如果那两个军人是武警还算正常,但这是两名陆军军官。<br /><br />
汪淼第一眼就对来找他的警察没有好感。其实那名穿警服的年轻人还行,举止很有礼貌,但那位便衣就让人讨厌了。这人长得五大三粗,一脸横肉,穿着件脏兮兮的皮夹克,浑身烟味,说话粗声大嗓,是最令汪淼反感的那类人。<br /><br />
“汪淼?”那人问,直呼其名令汪淼很不舒服,况且那人同时还在点烟,头都不抬一下。不等汪淼回答,他就向旁边那位年轻人示意了一下,后者向汪淼出示了警官证,他点完烟后就直接向屋里闯。<br /><br />
“请不要在我家里抽烟。”汪淼拦住了他。<br /><br />
“哦,对不起,汪教授。这是我们史强队长。”年轻警官微笑着说,同时对姓史的使了个眼色。<br /><br />
“成,那就在楼道里说吧。”史强说着,深深地吸了一大口,手中的烟几乎燃下去一半,之后竟不见吐出烟来。“你问。”他又向年轻警官偏了一下头。<br /><br />
“汪教授,我们是想了解一下,最近你与‘科学边界’学会的成员有过接触,是吧?”<br /><br />
“‘科学边界’是一个在国际学术界很有影响的学术组织,成员都是著名学者。这样一个合法的学术组织,我怎么就不能接触了呢?”<br /><br />
“你看看你这个人!”史强大声说,“我们说它不合法了吗?我们说不让你接触了吗?”他说着,刚才吸进肚子里的烟都喷到汪淼脸上。<br /><br />
“那好,这属于个人隐私,我没必要回答你们的问题。”<br /><br />
“还啥都成隐私了,像你这样一个著名学者,总该对公共安全负责吧。”史强把手中的烟头扔掉,又从压扁了的烟盒里抽出一根。<br /><br />
“我有权不回答,你们请便吧。”汪淼说着要转身回屋。<br /><br />
“等等!”史强厉声说,同时朝旁边的年轻警官挥了一下手,“给他地址和电话,下午去走一趟。”<br /><br />
“你要干什么!”汪淼愤怒地质问,这争吵引得邻居们也探出头来,想看看出了什么事。<br /><br />
“史队!你说你――”年轻警官生气地将史强拉到一边,显然他的粗俗不止是让汪淼一人不适应。<br /><br />
<label>————— 文章摘自著名科幻小说《三体》</label>
</p>
</div>
<script type="text/javascript" src="./js/vue.js"></script>
<script type="text/javascript">
// TODO:请在下面实现需求
new Vue({
// 注意:请勿修改 data 选项中已提供的数据!!!
el: "#app",
data: {
bgList: ["#f6edd4", "#ebf4ea", "#e9f2f5", "#F6E8E4", "#000000"], // 阅读主题色列表(与设置主题的圆形色块一一对应)
toolStatus: true,
Bcolor:'#f6edd4',
color:'#000000',
fontSize: 18,
lineHeight: 28,
index:1,
},
methods: {
changeToolStatus(status) {
//实现头部工具栏显隐功能。
this.toolStatus = status;
},
selectColor(index) {
this.index = index;
this.Bcolor = this.bgList[index - 1];
if (index - 1 == 4) {
this.color = '#ffffff'
} else {
this.color = '#333333'
}
},
FontSizeChange(flag) {
if (flag == 1 && this.fontSize < 48) {
this.fontSize += 2;
this.lineHeight += 2;
} else if (flag == 0 && this.fontSize > 12) {
this.fontSize -= 2;
this.lineHeight -= 2;
}
}
},
computed:{
customStyle() {
return {
backgroundColor: this.Bcolor,
color: this.color,
fontSize: this.fontSize + 'px',
lineHeight: this.lineHeight + 'px'
}
}
}
});
</script>
</body>
</html>
9、新增地址
// 初始化省份下拉列表内容
function provinceInit() {
var province = document.getElementById("param_province");
province.length = provinces.length;
for (var i = 0; i < provinces.length; i++) {
province.options[i].text = provinces[i];
province.options[i].value = provinces[i];
}
}
// 选择省份后对应城市下拉列表内容渲染
function provincechange(event) {
// TODO:请补充代码实现功能
//console.log(event.target.value); //需要拿到索引值 citys是可以直接在data.js调用
let flag = 0;
for (var i = 0; i < provinces.length; i++) {
if (event.target.value == provinces[i]) {
flag = i;
break;
}
}
let cityOptions = document.getElementById("param_city");
cityOptions.length = citys[flag].length;
for (var i = 0; i < cityOptions.length; i++) {
cityOptions.options[i].text = citys[flag][i];
cityOptions.options[i].value = citys[flag][i];
}
}
/**
* 为标签绑定单击事件。
* 事件效果为:
* 1、鼠标点击该标签后该标签样式显示 class=active;
* 2、其他已选标签的 active 样式被移除;
* 3、将选中的标签对应下标(即选择器为 “mark a” 选中的标签对应的下标)更新到 id=param_mark 的隐藏的 input 中。
*/
function addClick() {
// TODO:请补充代码实现功能
let labels = document.querySelectorAll(".mark a");
labels.forEach(label => {
label.addEventListener('click', (event) => {
labels.forEach(e => {e.classList.remove("active")})
event.target.classList.add("active")
let index = 0;
labels.forEach(e => {
if (e.className == 'active') {
document.getElementById("param_mark").value = index;
return;
}
index++;
})
});
});
}
// 提交信息后,读取并显示在页面中
function saveInfo() {
// TODO:请补充代码实现功能
let address = document.getElementById("param_address").value;
let name = document.getElementById("param_name").value;
let phone = document.getElementById("param_phone").value;
let city = document.getElementById("param_city").textContent.trim();
if (city == '请选择城市' || address.trim() === '' || name.trim() === '' || phone.trim() === '') {
document.querySelector(".warning-dialog").style.display = "block";
} else {
//成功之后,那么就需要打开到地址管理的页面
document.querySelector(".address").style.display = "none";
document.querySelector(".user-info").style.display = "none";
document.querySelector(".address-list").style.display = "block";
document.getElementById("main_title").innerHTML = "地址管理";
//还需要将表达数据渲染到原有数据的首位
let indexClass = document.getElementById("param_mark").value;
let lableText = "家";
let lableClass = "home";
if (indexClass == 1) {
lableText = "公司";
lableClass = "company";
} else if(indexClass == 2) {
lableText = "学校";
lableClass = "school"
}
let province = document.getElementById("param_province").options.selectedIndex;
let city = document.getElementById("param_city").options.selectedIndex;
//拿到了索引 记得city 是从0开始的 没有请选择的slot
let provinceName = provinces[province];
let cityName = citys[province][city];
let addressName = document.querySelector("#param_address").value;
let Name = document.querySelector("#param_name").value;
let phone = document.querySelector("#param_phone").value;
let li = document.createElement('li');
li.innerHTML = `<div class="show-area">
<label class=${lableClass}>${lableText}</label>
<span>${provinceName + cityName}</span>
</div>
<div class="show-address">
<span>${addressName}</span>
<a><img src="./images/edit.png" /></a>
</div>
<div class="show-info">
<span>${Name}</span>
<span>${phone}</span>
</div>`
let parent = document.querySelector(".address-list");
let firstChild = parent.firstChild;
parent.insertBefore(li, firstChild);//放在这个子元素前面
}
}
// 切换新增地址和地址管理的显隐
function back() {
if (document.getElementById("main_title").innerHTML == "地址管理") {
document.getElementById("main_title").innerHTML = "新增地址";
document.querySelector(".address-list").style.display = "none";
document.querySelector(".address").style.display = "block";
document.querySelector(".user-info").style.display = "block";
}
}
// 页面加载后的初始化操作
function init() {
// 初始化省份下拉列表内容
provinceInit();
// 为标签绑定单击事件
addClick();
}
window.onload = function () {
// 初始化
init();
};