新浪股票 API 数据实时展示

将新浪股票接口的数据直接实时展示在浏览器的标签与页面上。
目前为 2019-03-28 提交的版本。查看最新版本。
Wrap lines
// ==UserScript==
// @name         新浪股票 API 数据实时展示
// @namespace    https://github.com/yujinpan/tampermonkey-extension
// @version      1.0
// @license      MIT
// @description  将新浪股票接口的数据直接实时展示在浏览器的标签与页面上。
// @author       yujinpan
// @include      http*://hq.sinajs.cn/*
// ==/UserScript==
 
class App {
  intervalId = 0;
  intervalTime = 3000;
  data = {};
  tableWrap = null;
 
  constructor(code) {
    this.code = code;
  }
 
  // 获取数据
  getData() {
    return fetch(`/list=${this.code}`)
      .then((res) => res.blob())
      .then((blob) => {
        return new Promise((resolve) => {
          const reader = new FileReader();
          reader.onload = function() {
            resolve(reader.result);
          };
          reader.readAsText(blob, 'GBK');
        });
      });
  }
  // 格式化数据
  formatData(resultData) {
    try {
      const arr = resultData
        .match(/".*"/)[0]
        .replace(/"/g, '')
        .split(',');
      const reduce = arr[3] - arr[2];
      const percent = ((reduce / arr[2]) * 100).toFixed(2);
      this.data = {
        reduce,
        percent,
        date: arr[30],
        time: arr[31],
        name: arr[0],
        start: arr[1],
        end: arr[2],
        current: arr[3],
        max: arr[4],
        min: arr[5]
      };
    } catch (e) {
      console.log(e);
    }
  }
  // 设置title
  setTitle() {
    document.title = `${this.data.name} ${this.data.current} ${
      this.data.percent
    }%`;
  }
  // 渲染table
  renderTable() {
    const params = this.data;
    const sign = Math.sign(params.percent);
    const color = sign < 0 ? 'green' : sign === 0 ? 'gray' : 'red';
 
    // 如果没有容器就创建一个
    if (!this.tableWrap) {
      this.tableWrap = document.createElement('section');
      this.tableWrap.style = `
          padding: 0 20px;
          margin-right: 20px;
          border-right: 1px solid #ddd;
        `;
      document.body.appendChild(this.tableWrap);
    }
 
    this.tableWrap.innerHTML = `
        <h4>${params.date} ${params.time}</h4>
        <h4>${params.name} 
            <font color="${color}">
                ${params.current} ${params.percent}% ${params.reduce.toFixed(3)}
            </font>
        </h4>
        <table border="1">
        <thead>
            <tr>
                <td>今日开盘</td>
                <td>昨日收盘</td>
                <td>今日最高</td>
                <td>今日最低</td>
            </tr>
        </thead>
        </tbody>
            <tr>
                <td>${params.start}</td>
                <td>${params.end}</td>
                <td>${params.max}</td>
                <td>${params.min}</td>
            </tr>
        </tbody>
        </table>
    `;
  }
  // 创建搜索
  renderSearch() {
    const searchHistoryElem = this.getSearchHistory()
      .map((item) => {
        return `<li><a href="/list=${item.code}">${item.name}（${
          item.code
        }）</a></li>`;
      })
      .join('');
    const elem = `
        <h5>搜索股票</h5>
        <input id="search" autocomplete="false" style="width: 180px;" placeholder="输入股票代码，例如 sh000001" />
        <button>搜索</button>
  
        <h5>搜索历史</h5>
        <ul>
          ${searchHistoryElem}
        </ul>
  
        <h5>指数</h5>
        <ul>
          <li><a href="/list=sh000001">上证指数</a></li>
        </ul>
      `;
    const searchWrap = document.createElement('section');
    searchWrap.innerHTML = elem;
    const inputElem = searchWrap.querySelector('input');
 
    // 点击与回车事件
    searchWrap.addEventListener('click', (e) => {
      if (e.target.tagName === 'BUTTON' && inputElem.value) {
        this.targetTo(inputElem.value);
      }
    });
    searchWrap.addEventListener('keyup', (e) => {
      if (e.keyCode === 13 && e.target.tagName === 'INPUT' && inputElem.value) {
        this.targetTo(inputElem.value);
      }
    });
    document.body.appendChild(searchWrap);
  }
  // 跳转
  targetTo(code) {
    location.href = `/list=${code}`;
  }
  // 获取搜索历史
  getSearchHistory() {
    const history = localStorage.getItem('history');
    if (history) {
      return JSON.parse(history);
    } else {
      return [];
    }
  }
  // 存储搜索历史
  setSearchHistory(code, name) {
    const history = this.getSearchHistory();
    const index = history.findIndex((item) => item.code === code);
    if (index !== -1) {
      history.splice(index, 1);
    }
    history.unshift({ code, name });
    localStorage.setItem('history', JSON.stringify(history));
  }
 
  // 开始
  start() {
    const handle = () => {
      return this.getData().then((res) => {
        this.formatData(res);
        if (this.data.current) {
          this.setTitle();
          this.renderTable();
          return Promise.resolve(true);
        } else {
          alert('代码错误！');
          return Promise.resolve(false);
        }
      });
    };
    this.intervalId = setInterval(() => handle(), this.intervalTime);
 
    document.body.innerHTML = '';
    document.body.style = `
        display: flex;
      `;
    handle().then((res) => {
      this.renderSearch();
      debugger;
      if (res) {
        this.setSearchHistory(
          location.pathname.replace('/list=', ''),
          this.data.name
        );
      }
    });
  }
  // 停止
  stop() {
    clearInterval(this.intervalId);
  }
}
 
// 初始化
(function() {
  const code = location.pathname.replace('/list=', '');
  const app = new App(code || sh000001);
  app.start();
})();
欢迎访问Greasy Fork镜像
