上流人粉丝实时查看

@font-face {

font-family: 'number';

src:url('clock-number.ttf');

}

html,

body {

padding: 0;

margin: 0;

background-color: #26323B;

background-color: black;

font-family: 'number';

font-size: 16vw;

color: #CCCCCE;

}

#main {

display: flex;

height: 100vh;

max-width: 200vh;

margin: 0 auto;

justify-content: center;

align-items: center;

align-content: center;

flex-wrap: wrap;

}

#main > * {

display: flex;

justify-content: center;

align-items: center;

flex-wrap: nowrap;

}

#logo {

width: 100vw;

flex-wrap: wrap;

}

#logo > img {

height: 20vmin;

}

#logo > #sep {

padding: 0 8vmin;

}

#logo > #avatar {

border-radius: 50%;

}

#fans {

line-height: 1em;

color: #CCCCCE;

margin-top: 8vmin;

}

#script {

display: none;

}

// 初始化元素常量

const elAvatar = document.getElementById('avatar')

const elFans = document.getElementById('fans')

const elScript = document.getElementById('script')

const elSep = document.getElementById('sep')

// 获取用户 id

var userID = 777536

if(userID.length){

localStorage.setItem('userID', userID)

}else if(localStorage.getItem('userID')){

userID = localStorage.getItem('userID')

}

// 显示头像和粉丝数

const showFansCount = function(json){

elFans.innerHTML= Number( json.data.follower ).toLocaleString()

elAvatar.src = json.data.card.face.replace(/^http:/,'https:')

}

var elScriptChild

const appendScript = function(){

const url = "https://jsonp.afeld.me/?callback=showFansCount&url=https%3A%2F%2Fapi.bilibili.com%2Fx%2Fweb-interface%2Fcard%3Fmid%3D"+userID+'&spam='+Number(new Date)

elScriptChild = document.createElement('script')

elScriptChild.setAttribute('src', url)

elScript.appendChild(elScriptChild)

}

appendScript()

// 重复数据获取操作

const getData = function(){

elScript.removeChild(elScriptChild)

appendScript()

}

// 页面元素定位

const resize = function(){

elFans.style.fontSize = document.getElementById('main').clientWidth*0.22+'px'

if(window.innerHeight > window.innerWidth){

elSep.style.padding = '5vh 50%'

}else{

elSep.style.padding = '0 8vmin'

}

}

resize()

window.onresize = resize

setInterval("getData()",1000)

window.addEventListener('message', function(e) {

if(e.data === 'refresh') {

getData()

}

}, false);

const duration = 60; /* 1s */

const iframe = document.createElement('iframe');

iframe.style.display = 'none';

iframe.src = 'data:text/html,%3C%21DOCTYPE%20html%3E%0A%3Chtml%3E%0A%3Chead%3E%0A%09%3Cmeta%20charset%3D%22utf-8%22%20%2F%3E%0A%09%3Cmeta%20http-equiv%3D%22refresh%22%20content%3D%22'+ duration +'%22%20id%3D%22metarefresh%22%20%2F%3E%0A%09%3Ctitle%3Ex%3C%2Ftitle%3E%0A%3C%2Fhead%3E%0A%3Cbody%3E%0A%09%3Cscript%3Etop.postMessage%28%27refresh%27%2C%20%27%2A%27%29%3B%3C%2Fscript%3E%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E';

document.body.insertBefore(iframe, document.body.childNodes[0]);

一键复制

编辑

Web IDE

原始数据

按行查看

历史