python 小案例87

zg1g2023-09-23 11:22

下面是一个简单的动态网页案例，展示了如何创建一个基本的动态网页应用：

步骤1: 创建HTML文件（index.html）

go 复制代码

<!DOCTYPE html>
<html>
<head>
    <title>动态网页案例</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>动态网页案例</h1>
    <p id="message">点击按钮显示消息</p>
    <button id="button">显示消息</button>

    <script src="script.js"></script>
</body>
</html>

步骤2: 创建CSS文件（style.css）

go 复制代码

h1 {
    font-size: 24px;
    color: blue;
}

p {
    font-size: 16px;
    color: green;
}

button {
    background-color: yellow;
    font-size: 16px;
    font-weight: bold;
}

步骤3: 创建JavaScript文件（script.js）

go 复制代码

window.onload = function() {
    var messageElement = document.getElementById("message");
    var buttonElement = document.getElementById("button");

    buttonElement.addEventListener("click", function() {
        messageElement.innerHTML = "点击了按钮，显示了新的消息！";
    });
};

在这个案例中，当页面加载完成后，JavaScript代码会获取按钮和消息元素，并添加一个点击事件监听器。当按钮被点击时，消息元素的内容会被修改为"点击了按钮，显示了新的消息！"。

这个动态网页案例的应用可以是一个简单的消息提示应用，用户点击按钮后，可以显示不同的消息内容。你可以根据实际需求修改和扩展这个案例，以适应你的具体应用场景。