2018-07-11发表2024-01-17更新前端9 分钟读完 (大约1376个字)
一个简单的逆水寒金价查询页面

为了方便查看比较逆水寒各区的金价，做了一个简单的金价查询，可排序查看各区金价排行榜，搬砖更方便
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="referrer" content="never">
  <title>逆水寒金价查询</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.bootcss.com/element-ui/2.4.0/theme-chalk/index.css" rel="stylesheet">
  <style>
      [v-cloak]{
          display: none;
      }
      .echart-wrap {
          height: 300px;
          padding: 20px 20px 0 20px;
      }
  </style>
</head>
<body>
  <div id="app" v-cloak>
    {{searchName(selectedOptions[1])}} - {{resuts}}元
    <div class="block">
        <el-cascader
            :options="options"
            v-model="selectedOptions"
            >
        </el-cascader>

        <el-button @click="handleSearch">搜索</el-button>
    </div>
    <div id="echart" class="echart-wrap"></div>
    <el-table
        :data="all"
        style="width: 100%">
        <el-table-column
        type="index"
        width="50">
        </el-table-column>
        <el-table-column
            prop="name"
            label="服务器"
            width="180">
        </el-table-column>
        <el-table-column
            prop="money"
            label="金价(元/万文)"
            sortable
            width="180">
        </el-table-column>
        <el-table-column
            prop="id"
            label="服务器ID"
            sortable
            width="180">
        </el-table-column>
    </el-table>
  </div>

  <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
  <script src="https://cdn.bootcss.com/echarts/4.1.0/echarts.min.js"></script>
  <script src="https://cdn.bootcss.com/element-ui/2.4.0/index.js"></script>
  <script src="https://cdn.bootcss.com/jquery/1.12.1/jquery.min.js"></script>
  <script>

    var app = new Vue({
      el: '#app',
      data: {
        resuts: 0,
        selectedOptions: ["jiangjinjiu", 1],
        key: 1,
        all: [],
        // all: [{"money":"3.20","id":1,"name":"群龙之首"},{"money":"3.60","id":2,"name":"问鼎江湖"},{"money":"5.00","id":3,"name":"武林天骄"},{"money":"3.30","id":4,"name":"九州风雷"},{"money":"6.09","id":5,"name":"紫禁之巅"},{"money":"3.20","id":6,"name":"挑灯看剑"},{"money":"4.33","id":7,"name":"江山如画"},{"money":"3.10","id":8,"name":"两广豪杰"},{"money":"3.70","id":9,"name":"楚狂凤歌"},{"money":"3.29","id":10,"name":"闯荡江湖"},{"money":"3.50","id":11,"name":"最忆江南"},{"money":"3.30","id":12,"name":"高山流水"},{"money":"3.30","id":13,"name":"吹角声寒"},{"money":"3.45","id":14,"name":"天府之国"},{"money":"3.20","id":15,"name":"黄沙百战"},{"money":"3.60","id":16,"name":"大漠孤烟"},{"money":"3.11","id":17,"name":"铁马秋风"},{"money":"3.20","id":18,"name":"虎啸龙吟"},{"money":"3.75","id":19,"name":"刀剑如梦"},{"money":"3.26","id":20,"name":"金风细雨"},{"money":"3.28","id":21,"name":"荷塘月色"},{"money":"3.45","id":22,"name":"千古风流"},{"money":"3.00","id":23,"name":"帝都风云"},{"money":"3.10","id":24,"name":"独钓寒江"},{"money":"3.60","id":25,"name":"生如夏花"},{"money":"3.62","id":26,"name":"魔都风云"},{"money":"2.95","id":27,"name":"伤心小箭"},{"money":"3.10","id":28,"name":"金风玉露"},{"money":"3.15","id":29,"name":"白云黄鹤"},{"money":"3.35","id":30,"name":"春华秋实"},{"money":"3.00","id":31,"name":"三秋桂子"},{"money":"3.39","id":32,"name":"姑苏绮罗"},{"money":"3.66","id":33,"name":"游园惊梦"},{"money":"3.34","id":34,"name":"温柔一刀"},{"money":"3.40","id":35,"name":"沧海月明"},{"money":"3.10","id":36,"name":"鹤舞九州"},{"money":"3.17","id":37,"name":"浮生若梦"},{"money":"3.16","id":38,"name":"六分半堂"},{"money":"3.10","id":39,"name":"杨柳依依"},{"money":"3.08","id":40,"name":"吹梦西洲"},{"money":"3.17","id":41,"name":"逐鹿中原"},{"money":"2.75","id":42,"name":"凤舞九天"},{"money":"3.19","id":43,"name":"明月清风"},{"money":"3.15","id":44,"name":"巴山夜雨"},{"money":"3.11","id":45,"name":"烟花三月"},{"money":"3.00","id":46,"name":"远书归梦"},{"money":"3.53","id":47,"name":"烟雨江南"},{"money":"3.30","id":48,"name":"一蓑烟雨"},{"money":"3.05","id":49,"name":"剑气箫心"},{"money":"3.30","id":50,"name":"青山在望"},{"money":"3.00","id":51,"name":"笑看风云"},{"money":"3.25","id":52,"name":"国色天香"},{"money":"3.20","id":53,"name":"剑胆琴心"},{"money":"3.00","id":54,"name":"天涯此时"},{"money":"3.20","id":55,"name":"缘定三生"},{"money":"3.11","id":56,"name":"一梦千年"},{"money":"3.70","id":57,"name":"天下无双"},{"money":"3.30","id":58,"name":"天若有情"},{"money":"3.20","id":59,"name":"京华烟云"},{"money":"3.19","id":60,"name":"英雄本色"},{"money":"3.00","id":61,"name":"皇图霸业"},{"money":"3.00","id":62,"name":"六朝金粉"},{"money":"3.00","id":63,"name":"江湖夜雨"},{"money":"3.69","id":64,"name":"惊鸿照影"},{"money":"3.16","id":65,"name":"三潭印月"},{"money":"3.00","id":66,"name":"日月同辉"},{"money":"3.10","id":67,"name":"气吞山河"},{"money":"2.99","id":68,"name":"长风破浪"},{"money":"3.75","id":69,"name":"纵马江湖"},{"money":"3.86","id":70,"name":"决胜千里"},{"money":"2.80","id":71,"name":"吴钩霜雪"},{"money":"3.70","id":72,"name":"玲珑相思"}],
        eOption : {
          tooltip: {
              trigger: 'axis'
          },
          grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
          },
          xAxis: {
              type: 'category',
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
              type: 'value'
          },
          series: [{
              data: [820, 932, 901, 934, 1290, 1330, 1320],
              type: 'line'
          }]
        },
        date_chart: null,
        options: [{
          value: 'jiangjinjiu',
          label: '将进酒',
          children: [
            {
            value: 1,
            label: '群龙之首',
            },{
            value: 2,
            label: '问鼎江湖',
            },{
            value: 3,
            label: '武林天骄',
            },{
            value: 4,
            label: '九州风雷',
            },{
            value: 5,
            label: '紫禁之巅',
            },{
            value: 6,
            label: '挑灯看剑',
            },{
            value: 7,
            label: '江山如画',
            },{
            value: 8,
            label: '两广豪杰',
            },{
            value: 9,
            label: '楚狂凤歌',
            },{
            value: 10,
            label: '闯荡江湖',
            },{
            value: 11,
            label: '最忆江南',
            },{
            value: 12,
            label: '高山流水',
            },{
            value: 13,
            label: '吹角声寒',
            },{
            value: 14,
            label: '天府之国',
            },{
            value: 15,
            label: '黄沙百战',
            },{
            value: 16,
            label: '大漠孤烟',
            },{
            value: 17,
            label: '铁马秋风',
            },{
            value: 18,
            label: '虎啸龙吟',
            }
          ]
        },{
          value: 'rumengling',
          label: '如梦令',
          children: [
            {
            value: 19,
            label: '刀剑如梦'
            },{
            value: 20,
            label: '金风细雨'
            },{
            value: 21,
            label: '荷塘月色'
            },{
            value: 22,
            label: '千古风流'
            },{
            value: 23,
            label: '帝都风云'
            },{
            value: 24,
            label: '独钓寒江'
            },{
            value: 25,
            label: '生如夏花'
            },{
            value: 26,
            label: '魔都风云'
            },{
            value: 27,
            label: '伤心小箭'
            },{
            value: 28,
            label: '金风玉露'
            },{
            value: 29,
            label: '白云黄鹤'
            },{
            value: 30,
            label: '春华秋实'
            },{
            value: 31,
            label: '三秋桂子'
            },{
            value: 32,
            label: '姑苏绮罗'
            },{
            value: 33,
            label: '游园惊梦'
            },{
            value: 34,
            label: '温柔一刀'
            },{
            value: 35,
            label: '沧海月明'
            },{
            value: 36,
            label: '鹤舞九州'
            }
          ]
        },{
          value: 'fengqiaozhu',
          label: '风敲竹',
          children: [{
            value: 37,
            label: '浮生若梦'
            },{
            value: 38,
            label: '六分半堂'
            },{
            value: 39,
            label: '杨柳依依'
            },{
            value: 40,
            label: '吹梦西洲'
            },{
            value: 41,
            label: '逐鹿中原'
            },{
            value: 42,
            label: '凤舞九天'
            },{
            value: 43,
            label: '明月清风'
            },{
            value: 44,
            label: '巴山夜雨'
            },{
            value: 45,
            label: '烟花三月'
            },{
            value: 46,
            label: '远书归梦'
            },{
            value: 47,
            label: '烟雨江南'
            },{
            value: 48,
            label: '一蓑烟雨'
            },{
            value: 49,
            label: '剑气箫心'
            },{
            value: 50,
            label: '青山在望'
            },{
            value: 51,
            label: '笑看风云'
            },{
            value: 52,
            label: '国色天香'
            },{
            value: 53,
            label: '剑胆琴心'
            },{
            value: 54,
            label: '天涯此时'
            }
          ]
        },{
          value: 'xiangjianhuan',
          label: '相见欢',
          children: [
            {
            value: 55,
            label: '缘定三生'
            },{
            value: 56,
            label: '一梦千年'
            },{
            value: 57,
            label: '天下无双'
            },{
            value: 58,
            label: '天若有情'
            },{
            value: 59,
            label: '京华烟云'
            },{
            value: 60,
            label: '英雄本色'
            },{
            value: 61,
            label: '皇图霸业'
            },{
            value: 62,
            label: '六朝金粉'
            },{
            value: 63,
            label: '江湖夜雨'
            },{
            value: 64,
            label: '惊鸿照影'
            },{
            value: 65,
            label: '三潭印月'
            },{
            value: 66,
            label: '日月同辉'
            },{
            value: 67,
            label: '气吞山河'
            },{
            value: 68,
            label: '长风破浪'
            },{
            value: 69,
            label: '纵马江湖'
            },{
            value: 70,
            label: '决胜千里'
            },{
            value: 71,
            label: '吴钩霜雪'
            },{
            value: 72,
            label: '玲珑相思'
            }
          ]
        },{
        value: 'dielianhua',
        label: '蝶恋花',
        children:[
        {
          value: 73,
          label: '一生一世'
          },{
          value: 74,
          label: '良辰美景'
          },{
          value: 75,
          label: '梅花三弄'
          }
        ]
      }]
    },
    mounted: function(){
      this.searchAll(this.key)
    },
    methods: {
      getInfo: function() {
        var that = this
        $.ajax({
          url: 'https://bird.ioliu.cn/v1?url=https://n.cbg.163.com/?serverid=1',
          success: function(res){
              var box = $(res)
              that.resuts = box.find('.goodslist tr').eq(1).children().eq(3).html().slice(0,4)
          }
        })
        $.getJSON({
          url: './all.json',
          success: function(res){
            that.all = res
          }
        })
      },
      getEcharts: function(){
        var that = this
        this.eOption.xAxis.data = []
        this.eOption.series.data = []
        setInterval(function(){
          $.ajax({
            url: 'https://bird.ioliu.cn/v1?url=https://n.cbg.163.com/?serverid='+ that.selectedOptions[1] +'&order=unit_price+ASC',
            success: function(res){
              var box = $(res)
              var edata = box.find('.goodslist tr').eq(1).children().eq(3).html().slice(0,4)
              that.eOption.xAxis.data.push(0)
              that.eOption.series.data.push(edata)
              that.date_chart.setOption(this.eOption, true);
            }
          })
        }, 2000)
      },
      searchAll: function(key){
        var that = this
        if(key==76){
          this.$message('查询完成')
          console.dir(JSON.stringify(that.all))
          localStorage.setItem("myData", JSON.stringify(that.all)); 
          return
        }
        setTimeout(function(){
          $.ajax({
            url: 'https://bird.ioliu.cn/v1?url=https://n.cbg.163.com/?serverid='+ key +'&order=unit_price+ASC',
            success: function(res){
              var box = $(res)
              if(box.find('.goodslist tr').eq(1).children().eq(3).html()){
                var obj = {
                  'money' : box.find('.goodslist tr').eq(1).children().eq(3).html().replace(/(^\s*)/g, "").substring(0,4),
                  'id': key,
                  'name': that.searchName(key)
                }
                that.all.push(obj)
                that.key++
              }
              that.searchAll(that.key)
            }
          })
        },2000)
      },
      handleSearch: function(){
        var that = this
        $.ajax({
          url: 'https://bird.ioliu.cn/v1?url=https://n.cbg.163.com/?serverid='+ that.selectedOptions[1] +'&order=unit_price+ASC',
          success: function(res){
            var box = $(res)
            that.resuts = box.find('.goodslist tr').eq(1).children().eq(3).html().slice(0,4)
          }
        }) 
      },
      searchName: function(key){
        var that = this
        for(var i=0;i<this.options.length;i++){
          for(var j=0;j<that.options[i].children.length;j++){
              if(that.options[i].children[j].value == key){
                return that.options[i].children[j].label
              }
            }
          }
        }
      }
    })

  </script>
</body>
</html>
#爬虫
一个简单的逆水寒金价查询页面

喜欢这篇文章？打赏一下作者吧

分类

标签

最新文章

广告

归档
