SOURCE

console 命令行工具 X clear

                    
>
console
<!DOCTYPE html>
<html>

  <head>
    <title>Page Title</title>
    <script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
    <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;
        user-select: none;
        background-color: yellow;
      }

    </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>
      const scroll = {
  speed: 1, // 滚动速度(px/帧)
  milliSeconds: 500, // 帧率(ms)
  isDragging: false,
  dragStartY: 0,
  offsetY: 0,
  stop: false,
  container: document.getElementById('scroll-container'),
  text: document.getElementById('scroll-text'),
  transition: false,
  translateY: 0,

  init() {
    this.bindEvents();
    this.moveNext();
  },

  bindEvents() {
    this.container.addEventListener('mousedown', (event) => {
      this.isDragging = true;
      this.stop = true;
      this.dragStartY = event.clientY - this.translateY;
      this.text.style.transition = '';
    });

    this.container.addEventListener('mousemove', (event) => {
      if (this.isDragging) {
        this.offsetY = event.clientY - this.dragStartY;
        this.translateY = this.offsetY;
        this.text.style.transform = `translateY(${this.offsetY}px)`;
      }
    });

    this.container.addEventListener('mouseleave', (event) => {
      this.isDragging = false;
      this.stop = false;
      this.moveNext();
    });

    this.container.addEventListener('mouseup', (event) => {
      this.isDragging = false;
    });

    this.container.addEventListener('mouseover', (event) => {
      this.stop = true;
    });
  },

  moveNext() {
    if (this.stop) {
      return;
    }

    const maxHeight = this.container.offsetHeight;
    const textHeight = this.text.offsetHeight;

    if (this.offsetY + textHeight < 0) {
      this.offsetY = maxHeight;
      this.text.style.transition = '';
    } else if (this.offsetY - maxHeight > 0) {
      this.offsetY = maxHeight;
    } else {
      this.offsetY -= this.speed * this.milliSeconds / 1000;
      if (!this.transition) {
        this.text.style.transition = `transform ${this.milliSeconds / 1000}s linear`;
        this.transition = true;
      }
    }

    this.translateY = this.offsetY;
    this.text.style.transform = `translateY(${this.offsetY}px)`;

    requestAnimationFrame(() => {
      this.moveNext();
    });
  },
};

scroll.init();

    </script>

  </body>

</html>