正文

学会JS打印居中星星，页面美观又实用

/0 浏览量
0706

在网页设计中，居中的星星图案可以增添页面的视觉吸引力，同时也是一种实用的装饰元素。通过JavaScript，我们可以轻松实现星星的居中打印。下面，我将详细介绍如何使用JavaScript创建一个居中的星星图案，并使其在网页中完美展示。

星星图案的HTML结构

首先，我们需要一个HTML元素来承载星星图案。这通常是一个div或者span元素。以下是一个简单的HTML结构示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>居中星星示例</title>
    <style>
        /* 在这里添加CSS样式 */
    </style>
</head>
<body>
    <div id="star-container"></div>

    <script>
        // 在这里添加JavaScript代码
    </script>
</body>
</html>

CSS样式

为了使星星居中显示，我们需要为包含星星的容器添加一些CSS样式。以下是一些基本的样式：

#star-container {
    width: 100%;
    height: 300px;
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 50px;
    color: #ff0000;
}

这里，我们使用了flexbox布局来使星星在容器中水平和垂直居中。

JavaScript实现

接下来，我们使用JavaScript来动态生成星星图案。以下是一个简单的JavaScript函数，用于在div元素中打印居中的星星：

function printCenteredStar() {
    const container = document.getElementById('star-container');
    const star = '★';
    container.textContent = star;
}

// 在页面加载完成后调用函数
window.onload = printCenteredStar;

这段代码首先获取div元素，然后设置其文本内容为一个星星符号。由于我们在CSS中设置了div的居中样式，星星会自动居中显示。

完整示例

将上述HTML、CSS和JavaScript代码合并，我们得到以下完整的示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>居中星星示例</title>
    <style>
        #star-container {
            width: 100%;
            height: 300px;
            background-color: #f0f0f0;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 50px;
            color: #ff0000;
        }
    </style>
</head>
<body>
    <div id="star-container"></div>

    <script>
        function printCenteredStar() {
            const container = document.getElementById('star-container');
            const star = '★';
            container.textContent = star;
        }

        window.onload = printCenteredStar;
    </script>
</body>
</html>

现在，当你打开这个HTML文件时，你会在页面中看到一个居中的红色星星，既美观又实用。你可以根据需要调整星星的大小、颜色和位置，以适应不同的网页设计需求。

-- 展开阅读全文 --