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.appendChild(deleteBtn);
return div;
}
5. 美食蛋白质揭秘
不同食物的蛋白质占比
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
}
}
});
推荐链接
您阅读本篇文章共花了：
发表评论