怎样用js基本语言打出一首诗，要求：诗句居中对齐

2024-12-23 11:02:26 JS 1418

要用纯粹的JavaScript语言（即不依赖任何库或框架）在网页上居中对齐打印一首诗，可以通过以下步骤实现：

创建HTML结构：在HTML文件中创建一个用于显示诗句的容器，通常可以使用<div>元素。

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Poem Center Alignment</title>
    <style>
        /* 可选：为了美观，给诗句容器设置一些样式 */
        #poem {
            width: 80%;
            margin: 0 auto; /* 居中对齐 */
            text-align: center; /* 水平居中对齐 */
            font-size: 20px;
            line-height: 1.5;
        }
    </style>
</head>
<body>
    <div id="poem"></div>

    <script>
        // JavaScript代码将在这里编写
    </script>
</body>
</html>

JavaScript生成诗句：在JavaScript部分，编写生成诗句并放置到容器中的代码。这里简单起见，直接将诗句作为字符串放入到#poem容器中。

javascript
// 获取诗句容器的引用
const poemContainer = document.getElementById('poem');

// 诗句内容，可以根据需要自行替换为实际的诗句
const poemText = `
    春风又绿江南岸，
    乱蝶飞花柳外斜。
    东篱把酒黄昏后，
    等闲诗到别来家。
`;

// 将诗句内容插入到诗句容器中
poemContainer.innerHTML = poemText;

样式优化（可选）：可以根据需要调整诗句容器的样式，如字体大小、行间距等，以使诗句显示更加美观和居中对齐。
运行和调试：将以上代码复制粘贴到一个HTML文件中，然后在浏览器中打开该HTML文件，即可看到居中对齐显示的诗句效果。

通过这种方式，你可以使用纯JavaScript语言在网页上实现居中对齐显示一首诗句，灵活地调整诗句内容和样式，达到你想要的效果。