如何实现动态更新昵称和时间的代码示例

苏呆仔

于 2024-07-05 23:36:00 发布

阅读量462

点赞数 4

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/tuzajun/article/details/140220298

版权

示例代码

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态昵称和时间</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            background-color: #f0f0f0;
        }
        #nickname {
            font-size: 2em;
            margin: 20px;
        }
        #time {
            font-size: 1.5em;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div id="nickname">昵称: <span id="nicknameValue">访客</span></div>
    <div id="time">当前时间: <span id="timeValue"></span></div>

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

JavaScript部分（script.js）

// 更新昵称的函数
function updateNickname(newNickname) {
    document.getElementById('nicknameValue').innerText = newNickname;
}

// 更新当前时间的函数
function updateTime() {
    const now = new Date();
    const timeString = now.toLocaleTimeString();
    document.getElementById('timeValue').innerText = timeString;
}

// 设置一个间隔，每秒更新一次时间
setInterval(updateTime, 1000);

// 示例: 动态更新昵称（这可以来自用户输入或其他来源）
setTimeout(() => {
    updateNickname('动态用户123');
}, 2000);

说明

HTML部分：
- 包含了两个div元素，一个用于显示昵称，一个用于显示当前时间。
- nicknameValue和timeValue分别是昵称和时间的span元素，稍后会通过JavaScript动态更新它们的内容。
- script.js文件在HTML的底部通过<script>标签引入。
JavaScript部分：
- updateNickname函数用于更新昵称，将传入的新昵称设置为nicknameValue元素的文本内容。
- updateTime函数用于更新当前时间，将当前时间格式化为本地时间字符串，并设置为timeValue元素的文本内容。
- setInterval函数每秒调用一次updateTime函数，以确保时间实时更新。
- setTimeout函数在2秒后调用updateNickname函数，以示例方式动态更新昵称。这部分可以替换为实际的用户输入或其他数据源。