1.创意广告牌
.billboard {
position: relative;
background-color: #8e6534;
color: #fff;
padding: 20px;
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
background-size: cover;
/* TODO：待补充代码 设置圆角 10px，背景图片为woodiness.jpg */
background-image: url(../images/woodiness.jpg);
border-radius: 10px;
}
.top-sign {
position: relative;
width: 200px;
height: 100px;
background-color: #a87f4a;
display: flex;
justify-content: center;
align-items: center;
font-size: 1rem;
/* TODO：待补充代码 上面两个角是圆角 15px，下面两个角是直角 元素 x 轴倾斜 20度*/
border-radius: 15px 15px 0px 0px ;
transform: skewX(-20deg);
}
/* TODO: 实现原子化 flex */
div {
display: flex;
flex-direction: column;
}
3神秘咒语
4. 朋友圈
document.addEventListener("DOMContentLoaded", function() {
// TODO: 请在此补充页面加载时缓存检查的代码
const savedText = localStorage.getItem('savedText');
// if (savedText!=null&&savedText!=undefined) {
// document.getElementById('text').value = savedText;
// }
});
// 当文本框输入内容改变时，动态地设置localStorage缓存，并根据有没有文本改变按钮状态
// 此处使用了防抖函数，避免太过频繁地更新缓存
document.getElementById("text").addEventListener(
"input",
debounce(function() {
// 提示正在保存中
document.getElementById("prompt").textContent = "正在保存中...";
// TODO: 请在此补充用户输入时设置缓存和调整按钮状态的代码
const text = this.value;
localStorage.setItem('savedText', text);
// TODO-END
// 过一段时间后提示保存完成，模拟上传数据至后台的效果
setTimeout(function() {
document.getElementById("prompt").textContent = "内容已保存";
}, 750);
}, 200)
);
document.getElementById("post").addEventListener("click", function() {
const content = document.getElementById("text").value;
const element = createContent(content);
document.querySelector(".contents").appendChild(element);
document.getElementById("prompt").textContent = "";
// TODO: 请在此补充用户点击“发表”按钮时清空文本框和缓存的代码
// 清空输入框中的内容
document.getElementById('text').value = '';
// 移除 localStorage 内缓存的文本数据
localStorage.removeItem('savedText');
if(!document.getElementById("text").value){
// 禁用按钮
document.getElementById("post").disabled=true
}else{
document.getElementById("post").disabled=false
}
});
// 防抖工具函数
/**
* @param {function} fn - 回调函数
* @param {string} delay - 函数执行延迟，单位为ms
*/
function debounce(fn, delay) {
//return fn; // 这一行是为了确保页面正常运行，可以去掉
// TODO: 请实现函数防抖的功能
let timeoutId;
clearTimeout(timeoutId);
timeoutId=setTimeout(()=>{
fn.apply()
},delay)
}
// 用户点击“发表”后，创建一条新信息的DOM元素
function createContent(content) {
const div = document.createElement("div");
const d = new Date();
const deleteBtn = document.createElement("button");
deleteBtn.textContent = "删除";
deleteBtn.addEventListener("click", function() {
div.remove();
});
div.innerHTML = `<div><span class="content">${content}</span><span class="date">${d.toLocaleString()}</span></div>`;
div.appendChild(deleteBtn);
return div;
}
5. 美食蛋白质揭秘
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>不同食物的蛋白质占比</title>
<script src="./lib/vue3.global.js"></script>
<script src="./lib/echarts.min.js"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="app">
<h2>不同食物的蛋白质占比</h2>
<div class="protein-container" >
<!-- TODO:待补充代码，渲染获取的数据 -->
<div class="protein-container">
<div class="protein-item" v-for="item in datasource">鸡胸肉 30 {{datasource.name datasource.value}}</div>
</div>
</div>
<div class="echarts" id="main"></div>
</div>
<script>
const { ref, onMounted } = Vue;
const MockURL = './mock/data.json'
const app = {
setup() {
let datasource
function echartsInit(data) {
const main = document.getElementById("main");
const myChart = echarts.init(main);
myChart.setOption({
legend: {
data:data,
orient: "vertical",
top: "26%",
right: "2%",
icon: "circle",
textStyle: {
fontSize: 20,
rich: {
one: {
width: 80,
},
two: {
width: 80,
},
three: {
width: 80,
},
},
},
formatter: (name) => {
var total = 0;
var target;
let formateData = data;
for (var i = 0; i < formateData.length; i++) {
if (formateData[i].value) {
total += formateData[i].value;
if (formateData[i].name === name) {
target = formateData[i].value;
}
}
}
var v = ((target / total) * 100).toFixed(2);
let row;
if (name === '表头') row = `食物 含量 占比`;
else row = `{one|${name}} {two|${target}} {three|${v}%}`;
return row;
},
},
color: ["#baf", "#bfa", "#cde",'#f90',"#0c9"],
series: [
{
type: "pie",
radius: ["30%", "50%"],
center: ["32%", "40%"],
data: data
},
],
});
}
async function fetchData() {
// TODO:待补充代码
var xhr = new XMLHttpRequest();
xhr.open('GET', MockURL, true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
datasource = JSON.parse(xhr.responseText);
renderProteinData(datasource);
}
};
xhr.send();
console.log(datasource);
}
return {
echartsInit,
datasource
};
},
};
const vm = Vue.createApp(app);
const mountedApp = vm.mount("#app");
</script>
</body>
</html>
6. 营业状态切换
function useToggle(state) {
// TODO:待补充代码
// const [state, setState] = useState(initialState);
// return true
const toggle = () => {
setState(!state);
};
// 返回状态和切换状态函数的数组
return [state, toggle];
}
const app = Vue.createApp({
setup() {
const [isWorking, toggleWorking] = useToggle(false) // 使用自定义的useToggle函数创建状态和切换函数
const workImage = './images/open.jpg' // 营业状态的图片路径
const restImage = './images/close.jpg' // 打烊状态的图片路径
return {
isWorking,
toggleWorking,
workImage,
restImage
}
}
});
