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;
}