木子空间

# 文字-转-头像

image-20240719174017284

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Avatar Generator</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
        }

        #avatar {
            display: inline-block;
            width: 100px;
            height: 100px;
            line-height: 100px;
            font-size: 65px;
            border-radius: 50%;
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <h1>Avatar Generator</h1>
    <p>请输入用户名并点击生成头像：</p>
    <input type="text" id="usernameInput">
    <button onclick="generateAndDisplayAvatar()">生成头像</button>
    <div id="avatar"></div>

    <script>
        function generateAvatar(username) {
            if (!username || username.trim() === "") {
                return "";
            }

            const bgColor = `rgb(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)})`;
            const fontColor = `rgb(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)})`;
            const firstChar = username.trim().charAt(0);
            const isChineseChar = /^[\u4e00-\u9fa5]+$/.test(firstChar);

            if (isChineseChar) {
                return {
                    avatar: firstChar,
                    bgColor: bgColor,
                    fontColor: fontColor
                };
            } else {
                return {
                    avatar: firstChar.toUpperCase(),
                    bgColor: bgColor,
                    fontColor: fontColor
                };
            }
        }

        function generateAndDisplayAvatar() {
            const username = document.getElementById("usernameInput").value;
            const avatarInfo = generateAvatar(username);

            if (avatarInfo) {
                const avatarElement = document.getElementById("avatar");
                avatarElement.innerText = avatarInfo.avatar;
                avatarElement.style.backgroundColor = avatarInfo.bgColor;
                avatarElement.style.color = avatarInfo.fontColor;
            } else {
                alert("请输入有效的用户名！");
            }
        }
    </script>
</body>

</html>

← 单html页面-vue-案例 →