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 = `<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 } } });
