console 命令行工具 X clear
console
<!DOCTYPE html>
<html>
  <head>
    <style>
      #scroll-container {
        width: 300px;
        height: 250px;
        overflow: hidden;
        position: relative;
        cursor: move;
      }

      #scroll-text {
        position: absolute;
        width: 100%;
        height: auto;
        margin: 0;
        line-height: 25px;
        text-align: center;
        animation: scroll-text 30s linear infinite;
        user-select: none;
        background-color: yellow;
      }

      @keyframes scroll-text {
        from {
          transform: translateY(250px);
        }
        to {
          transform: translateY(-100%);
        }
      }
    </style>
  </head>
  <body>
    <div id="scroll-container">
      <div id="scroll-text">
        <div class="data data-eight" style="height:auto;">
          <div class="temperature" style="display: none;">大气温度<br>24.1℃</div>
          <div class="pressure" style="display: none;">大气气压<br>1000 hPa</div>
          <div class="unit"></div>
          <ul class="ele">
          </ul>
          <ul class="error-list">
          </ul>
          <p><span>核心CPU温度</span><span>27.8</span><span>℃</span></p>
          <p><span>系统CPU占用</span><span>8.25</span><span>%</span></p>
          <p><span>系统内存剩余</span><span>2739</span><span>MB</span></p>
          <p><span>系统磁盘剩余</span><span>31754</span><span>MB</span></p>
          <p><span>网络下载速度</span><span>34</span><span>KB</span></p>
          <p><span>网络上传速度</span><span>5</span><span>KB</span></p>
          <p><span>网络1</span><span>开启</span><span></span></p>
          <p><span>网络2</span><span>开启</span><span></span></p>
          <p><span>网络3</span><span>开启</span><span></span></p>
          <p><span>核心主板温度</span><span>1</span><span>℃</span></p>
          <p><span>电池电量</span><span>1</span><span>(Lsp)</span></p>
          <p><span>用户CPU占用</span><span>1</span><span>%</span></p>
          <p><span>系统磁盘剩余</span><span>1</span><span>(Lsp)</span></p>
          <p><span>4G信号强度</span><span>1</span><span>(Lsp)</span></p>
        </div>
      </div>
    </div>

    <script>
      var scrollContainer = document.getElementById('scroll-container');
      var scrollText = document.getElementById('scroll-text');
      var isDragging = false;
      var dragStartY;
      var animationStartY;

      scrollContainer.addEventListener('mousedown', function(event) {
        isDragging = true;
        dragStartY = event.clientY - scrollContainer.offsetTop;
        animationStartY = parseFloat(
          window.getComputedStyle(scrollText).getPropertyValue('transform').split(',')[5]
        );
        scrollText.style.animationPlayState = 'paused';
      });

      scrollContainer.addEventListener('mousemove', function(event) {
        if (isDragging) {
          var offsetY = event.clientY - dragStartY;
          var animationOffsetY = offsetY * 1.5; // adjust this value to control animation speed
          scrollContainer.style.top = offsetY + 'px';
          scrollText.style.transform = 'translateY(' + (animationStartY - animationOffsetY) + 'px)';
        }
      });

      scrollContainer.addEventListener('mouseup', function(event) {
        isDragging = false;
        scrollText.style.animationPlayState = 'running';
      });

      scrollContainer.addEventListener('mouseleave', function(event) {
        isDragging = false;
        scrollText.style.animationPlayState = 'running';
      });

      scrollText.addEventListener('animationiteration', function() {
        scrollContainer.style.top = '0px';
        scrollText.style.transform = 'translateY(250px)';
      });
    </script>
  </body>
</html>