当前位置：首页 > news >正文

用网页JS实现数据添加和取出的操作，链表

news 2025/7/7 7:43:45

太复杂了，就是简单的添加数据，如果数据量大于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>

查看全文

http://www.dtcms.com/a/122598.html