JavaScript解决问题

以你的姓名作为字符串常量，设计一个对象LuckyMan，对象中包含姓名和幸运数两个属性，并创建一个方法将信息以合适的方式显示出来。创建10个LuckyMan的实例，姓名可以相同，幸运数随机以示区别，并将这10个实例放入数组data中。遍历数组将相关信息通过列表的方式在网页中显示出来。
设计相关的网页界面，根据用户输入的字符串来生成LuckyMan的实例并添加到网页的列表中，点击列表项可以在网页其他位置显示相关实例的信息。进一步要求网页列表中显示的数据与data数组一致。

答案参考Chatgpt解答
以下是一个示例的HTML代码，它包含一个表单用于输入姓名和幸运数，并具有一个按钮用于生成LuckyMan的实例。生成的实例将以列表的形式显示在页面上。点击列表项将显示所选实例的详细信息。

<!DOCTYPE html>
<html>
<head>
    <title>LuckyMan</title>
    <style>
        ul {
            list-style-type: none;
            padding: 0;
        }

        li {
            margin-bottom: 10px;
            cursor: pointer;
        }

        .details {
            margin-top: 20px;
            font-weight: bold;
        }
    </style>
    <script>
        // 数据数组
        var data = [];

        // 生成 LuckyMan 实例
        function generateLuckyMan() {
            var name = document.getElementById("name").value;
            var luckyNumber = Math.floor(Math.random() * 100) + 1; // 随机生成幸运数
            var luckyMan = {
                name: name,
                luckyNumber: luckyNumber
            };
            data.push(luckyMan);
            displayLuckyManList();
        }

        // 在网页中显示 LuckyMan 的列表
        function displayLuckyManList() {
            var listContainer = document.getElementById("list-container");
            listContainer.innerHTML = ""; // 清空列表
            var ul = document.createElement("ul");

            for (var i = 0; i < data.length; i++) {
                var li = document.createElement("li");
                li.textContent = data[i].name;
                li.setAttribute("onclick", "displayDetails(" + i + ")");
                ul.appendChild(li);
            }

            listContainer.appendChild(ul);
        }

        // 显示所选 LuckyMan 的详细信息
        function displayDetails(index) {
            var detailsContainer = document.getElementById("details-container");
            var luckyMan = data[index];
            detailsContainer.innerHTML = "姓名：" + luckyMan.name + "<br>幸运数：" + luckyMan.luckyNumber;
        }
    </script>
</head>
<body>
    <h1>LuckyMan</h1>
    <form>
        <label for="name">姓名：</label>
        <input type="text" id="name" required>
        <button type="button" onclick="generateLuckyMan()">生成</button>
    </form>
    <div id="list-container">
        <!-- 这里将显示生成的 LuckyMan 列表 -->
    </div>
    <div id="details-container" class="details">
        <!-- 这里将显示所选 LuckyMan 的详细信息 -->
    </div>
</body>
</html>

这段代码实现了以下功能：

用户可以在文本框中输入姓名。
点击生成按钮后，会随机生成幸运数并将姓名和幸运数组成一个LuckyMan实例。
生成的实例将以列表的形式显示在页面上，并且每个列表项都可以被点击。
点击列表项后，所选LuckyMan的详细信息将显示在页面上。

请将上述代码保存为一个HTML文件，然后在浏览器中打开该文件，即可查看并测试网页的功能。每次点击生成按钮时，将生成一个新的LuckyMan实例并添加到列表中。点击列表项将显示所选实例