html+css+vue+axios

起因是今天在网上冲浪的时候,凑巧遇到一个有趣的api,感觉还不错,就心血来潮开整,弄了个占卜小工具。附上接口

设置方法:
将代码一加入到开发者设置-全局右侧边栏广告位
将代码二加入到开发者设置-自定义 CSS
并且将vue.js上传到服务器根目录,在根目录新建一个myvue文件放入其中。(vue.js可自行到官网下载)

代码一
 <div id="box">
    <div id="frozen-btn">
      <button id="get" @click.once="get" class="green">点我占个卜</button>
    </div>
    <p v-model="result">{{result}}</p>
  </div>

  <script src="js/vue.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script>
    var app = new Vue({
      el: "#box",
      data: {
        result: ""
      },
      methods: {
        get: function () {
          var that = this;
          axios.get("https://api.t1qq.com/api/tool/cg?key=OnrSh3gg4nU189mAO21k8q8Iwx").then(function (response) {
            that.result = response.data.g;
            that.unbindClickEvent();
          }, function (err) { })
        },
        unbindClickEvent: function () {
          var button = document.getElementById("get");
          button.removeEventListener("click", this.get);
        }
      }

    })

  </script>
代码二
   #get {
      left: 680px;
      border: 0;
      margin: 20px;
      text-transform: uppercase;
      font-size: 16px;
      font-weight: bold;
      padding: 5px 35px;
      border-radius: 50px;
      color: white;
      outline: none;
      position: relative;
    }

    #get:before {
      content: '';
      display: block;
      background: linear-gradient(to left, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.4) 50%);
      background-size: 210% 100%;
      background-position: right bottom;
      height: 100%;
      width: 100%;
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      border-radius: 50px;
      transition: all 1s;
      -webkit-transition: all 1s;
    }

    .green {
      background-image: linear-gradient(to right, #25aae1, #40e495);
      box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 0.75);
    }

    .green:hover:before {
      background-position: left bottom;
    }
最后修改:2024 年 05 月 02 日
如果你觉得作者像乞讨的,你可以随意打赏他一点。