1，首先是CSS核心点，利用 writing-mode: vertical-lr; text-orientation:upright; 把文本设置为竖向排列，详细代码如下：

 .scroll-time-container {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 25px;
.scroll-time-wrap {
        line-height: 1;
        height: 30px;
        overflow: hidden;
    .scroll-time {
        line-height: 0.6;
        writing-mode: vertical-lr;
        text-orientation: upright;
        transform: translateY(0%);
        transition: all .3s ease-in-out;
2，实现基本样式，示例如下：
 
 3，HTML模板代码：
 
<div class="scroll-time-container">
  <div class="scroll-time-wrap">
        <div class="scroll-time" :style="{transform: `translateY(-${scrollTimeData[0]}0%)`}">0123456789</div>
    <div class="scroll-time-wrap">
        <div class="scroll-time" :style="{transform: `translateY(-${scrollTimeData[1]}0%)`}">0123456789</div>
    <div class="scroll-time-wrap">
        <div class="scroll-time" :style="{transform: `translateY(-${scrollTimeData[2]}0%)`}">0123456789</div>
    <div class="scroll-time-wrap">
        <div class="scroll-time" :style="{transform: `translateY(-${scrollTimeData[3]}0%)`}">0123456789</div>
    <div class="scroll-time-wrap">
        <div class="scroll-time" :style="{transform: `translateY(-${scrollTimeData[4]}0%)`}">0123456789</div>
    <div class="scroll-time-wrap">
        <div class="scroll-time" :style="{transform: `translateY(-${scrollTimeData[5]}0%)`}">0123456789</div>
    <div class="scroll-time-wrap">
        <div class="scroll-time" :style="{transform: `translateY(-${scrollTimeData[6]}0%)`}">0123456789</div>
    <div class="scroll-time-wrap">
        <div class="scroll-time" :style="{transform: `translateY(-${scrollTimeData[7]}0%)`}">0123456789</div>
    <div class="scroll-time-wrap">
        <div class="scroll-time" :style="{transform: `translateY(-${scrollTimeData[8]}0%)`}">0123456789</div>
    <div class="scroll-time-wrap">
        <div class="scroll-time" :style="{transform: `translateY(-${scrollTimeData[9]}0%)`}">0123456789</div>
4，JS核心代码：
 
startScroll() {
   let scroll = () => {
        let date = new Date();
        let dateStr = '';
        let s = date.getSeconds();
        s = s > 9 ? s : '0' + s;
        let m = date.getMinutes();
        m = m > 9 ? m : '0' + m;
        let h = date.getHours();
        h = h > 9 ? h : '0' + h;
        let d = date.getDate();
        d = d > 9 ? d : '0' + d;
        let M = date.getMonth() + 1;
        M = M > 9 ? M : '0' + M;
        dateStr = M + d + h + m + s;
        this.scrollTimeData = dateStr.split('');
    scroll();
    this.timer = setInterval(() => {
        scroll();
    }, 1000)
思路分析：
 获取当前时间的时分秒，小于10补0，dateStr.split(‘’)得到数组["0", "2", "1", "7", "1", "5", "5", "5", "5", "9"]，看到这里，想必大家已经很明白了吧，数组对应的就是HTML模板中的 scrollTimeData[0] 到 scrollTimeData[9]。由于设置了过渡属性transition: all .3s ease-in-out;因此数组中每个数字发生变化，内联样式:style="{transform: translateY(-${scrollTimeData[xxx]}0%)}"的值发生变化时，便会产生一个滚动的效果。
 
注意：
 离开页面记得使用clearInterval(this.timer);清除定时器，否则会重复生成定时器。
				
大屏滚动效果可以使用fullpage.js插件来实现，它可以快速地创建全屏滚动网站效果。如果你想纯js实现大屏数字滚动效果，可以使用以下代码：
HTML代码：
```html
<div id="count-up" class="count-up">
  <span class="number">0</span>
CSS代码：
```css
.count-up {
  font-size: 48px;
  color: #fff;
  text-align: center;
  margin-top: 100px;
JavaScript代码：
```javascript
// 设置数字增长的起始值和结束值
var startValue = 0;
var endValue = 1000;
// 获取计数器的 DOM 元素
var countUp = document.getElementById('count-up');
var number = countUp.querySelector('.number');
// 设置数字增长的方式和时间
var duration = 5000; // 5秒钟
var interval = 50; // 每50毫秒数字增加一次
var steps = duration / interval;
var stepValue = (endValue - startValue) / steps;
// 定义计数器增长的函数
function countUpNumber() {
  startValue += stepValue;
  if (startValue > endValue) {
    startValue = endValue;
  number.innerHTML = Math.round(startValue);
  if (startValue < endValue) {
    setTimeout(countUpNumber, interval);
// 执行数字增长的函数
setTimeout(countUpNumber, interval);
这段代码使用了setTimeout函数来实现数字的增长效果，每隔50毫秒就会增加一次数字，直到达到结束值为止。你可以根据自己的需求来修改时间和数字的起始值和结束值。