WordPress导航栏主题seo实战技巧
太复杂了，就是简单的添加数据，如果数据量大于0就取出第一个数据并删除，写2个函数就行
以下是使用 JavaScript 实现的两个函数，一个用于添加数据，另一个用于在数据量大于 0 时取出并删除第一个数据：
在上述代码中，addData 函数会将传入的数据添加到 dataArray 数组的末尾。removeAndGetFirstData 函数会先检查数组的长度是否大于 0，如果满足条件，就使用 shift 方法取出并删除数组的第一个元素，若不满足则返回 null。
写2个按钮实现写入和读取，，一个文本框用于输入添加的内容，一个TEXTAREA控件用于显示每次操作后余下的数据条数和所有数据
我将创建一个 HTML 页面，其中包含两个按钮（写入和读取）、一个文本框用于输入添加的内容，以及一个 TEXTAREA 控件用于显示每次操作后余下的数据条数和所有数据。以下是完整的代码：
上述代码创建了一个简单的 HTML 页面，包含输入框、两个按钮和一个文本区域。通过 JavaScript 实现了添加和读取数据的功能，并在每次操作后更新文本区域的显示内容。你可以运行代码查看效果。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Data Operations</title><script src="https://unpkg.com/@tailwindcss/browser@4"></script><link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet"><style>body {font-family: 'Inter', sans-serif;}</style>
</head><body class="bg-gray-100 flex justify-center items-center h-screen"><div class="bg-white p-8 rounded shadow-md w-full max-w-md"><h1 class="text-2xl font-bold mb-4">Data Operations</h1><input type="text" id="inputData" class="border border-gray-300 p-2 w-full mb-4 rounded"placeholder="Enter data to add"><button id="addButton"class="bg-blue-500 text-white p-2 rounded hover:bg-blue-600 transition-colors mr-2">Write</button><button id="removeButton"class="bg-red-500 text-white p-2 rounded hover:bg-red-600 transition-colors">Read</button><textarea id="displayArea" rows="10" class="border border-gray-300 p-2 w-full mt-4 rounded" readonly></textarea></div><script>// 初始化一个数组来存储数据let dataArray = [];// 添加数据的函数function addData(data) {dataArray.push(data);updateDisplay();}// 取出并删除第一个数据的函数function removeAndGetFirstData() {if (dataArray.length > 0) {const removedData = dataArray.shift();updateDisplay();return removedData;}return null;}// 更新显示区域的函数function updateDisplay() {const displayArea = document.getElementById('displayArea');const dataCount = dataArray.length;const dataString = dataArray.join(', ');displayArea.value = `Data count: ${dataCount}\nData: ${dataString}`;}// 绑定按钮点击事件const addButton = document.getElementById('addButton');const removeButton = document.getElementById('removeButton');const inputData = document.getElementById('inputData');addButton.addEventListener('click', () => {const data = inputData.value;if (data) {addData(data);inputData.value = '';}});removeButton.addEventListener('click', () => {removeAndGetFirstData();});// 初始更新显示区域updateDisplay();</script>
</body></html>