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);}
2原子化 CSS
/* 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 = `${content}${d.toLocaleString()}`;div.appendChild(deleteBtn);return div;}
5.美食蛋白质揭秘
不同食物的蛋白质占比不同食物的蛋白质占比
鸡胸肉 30 {{datasource.name datasource.value}} const { ref, onMounted } = Vue;constMockURL ='./mock/data.json'const app = {setup() {let datasourcefunction 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");
6.营业状态切换
function useToggle(state) {// TODO:待补充代码// const [state, setState] = useState(initialState);// return trueconst 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}}});