js日期要怎么将横排改成竖排

要将JS日期从横排改成竖排，可以使用CSS的写法、利用HTML的标签属性、JavaScript动态生成DOM结构。通过这几种方法，可以轻松实现日期从横排到竖排的转换。下面将详细介绍其中一种方法：利用CSS的写法。

将JS日期从横排改成竖排，最简单的方法是通过CSS调整日期的显示方式。假设日期格式为"YYYY-MM-DD"（例如：2023-10-15），可以将其用HTML的标签包裹，并通过CSS将这些标签设置为块级元素。

一、利用CSS的写法

使用CSS将日期从横排改成竖排非常简单。首先，你需要将日期拆分成单个字符，并将每个字符用HTML的标签包裹起来。然后，通过CSS将这些标签设置为块级元素（block），从而使其竖排显示。

1.1 HTML和CSS实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vertical Date</title>
    <style>
        .vertical-date span {
            display: block;
        }
    </style>
</head>
<body>
    <div class="vertical-date">
        <span>2</span>
        <span>0</span>
        <span>2</span>
        <span>3</span>
        <span>-</span>
        <span>1</span>
        <span>0</span>
        <span>-</span>
        <span>1</span>
        <span>5</span>
    </div>
</body>
</html>

上面的代码通过将每个日期字符用标签包裹，并通过CSS将其设置为块级元素，达到了将日期竖排显示的效果。

二、利用HTML的标签属性

通过HTML标签属性，也可以实现日期从横排到竖排的转换。下面是通过HTML和CSS结合实现的例子：

2.1 HTML实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vertical Date</title>
    <style>
        .vertical-date {
            writing-mode: vertical-rl;
            text-orientation: upright;
        }
    </style>
</head>
<body>
    <div class="vertical-date">
        2023-10-15
    </div>
</body>
</html>

上面的代码通过CSS的writing-mode和text-orientation属性，将整个日期字符串竖排显示，非常适合简洁的日期显示需求。

三、JavaScript动态生成DOM结构

如果你需要动态生成竖排日期，可以使用JavaScript。下面是一个通过JavaScript实现的方法：

3.1 JavaScript实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vertical Date</title>
    <style>
        .vertical-date span {
            display: block;
        }
    </style>
</head>
<body>
    <div id="vertical-date-container"></div>
    <script>
        const date = "2023-10-15";
        const container = document.getElementById('vertical-date-container');
        container.classList.add('vertical-date');
        for (let char of date) {
            const span = document.createElement('span');
            span.textContent = char;
            container.appendChild(span);
        }
    </script>
</body>
</html>

上面的代码通过JavaScript动态生成了竖排日期，将日期字符串拆分成单个字符，并将每个字符用标签包裹，最终通过CSS将其设置为块级元素，达到了竖排显示的效果。

四、总结

通过以上方法，可以轻松实现将JS日期从横排改成竖排。利用CSS的写法、利用HTML的标签属性、JavaScript动态生成DOM结构，这些方法各有优缺点，可以根据实际需求选择合适的方法进行实现。无论选择哪种方法，都可以通过简洁的代码实现日期的竖排显示，从而提高页面的美观性和用户体验。