|
<!DOCTYPE html> |
|
<html lang="zh-CN"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<title>API可用调用地址</title> |
|
<style> |
|
body { |
|
font-family: Arial, sans-serif; |
|
background-size: cover; |
|
background-repeat: no-repeat; |
|
transition: background-image 1s ease-in-out; |
|
text-align: center; |
|
padding: 50px; |
|
} |
|
.address { |
|
margin: 40px; |
|
padding: 10px; |
|
border: 2px solid #ccc; |
|
border-radius: 5px; |
|
background-color: rgba(255, 255, 255, 0.6); |
|
transition: transform 0.3s, background-color 0.3s, opacity 0.3s; |
|
width: 400px; |
|
display: block; |
|
margin-left: auto; |
|
margin-right: auto; |
|
position: relative; |
|
white-space: nowrap; |
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
} |
|
.address:hover { |
|
transform: scale(1.05); |
|
background-color: rgba(255, 255, 255, 0.85); |
|
} |
|
.unavailable { |
|
text-decoration: line-through; |
|
color: #999; |
|
} |
|
.available { |
|
font-weight: bold; |
|
color: #4CAF50; |
|
} |
|
.address a { |
|
color: black; |
|
text-decoration: none; |
|
opacity: 1; |
|
} |
|
.status { |
|
position: absolute; |
|
top: 10px; |
|
left: 10px; |
|
padding: 2px 5px; |
|
border-radius: 5px; |
|
color: white; |
|
font-size: 12px; |
|
} |
|
.usable { |
|
background-color: #4CAF50; |
|
} |
|
.disable { |
|
background-color: #f44336; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<h1>API可用调用地址</h1> |
|
<div id="address1" class="address unavailable"> |
|
<span class="status disable">disable</span> |
|
<p>地址1：<a href="#" onclick="copyToClipboard('https://api.hongshi-app.us.kg/')">https://api.hongshi-app.us.kg/</a></p> |
|
</div> |
|
<div id="address2" class="address unavailable"> |
|
<span class="status disable">disable</span> |
|
<p>地址2：<a href="#" onclick="copyToClipboard('https://error418-new-api/ai')">https://error418-new-api/ai</a></p> |
|
</div> |
|
<div id="address3" class="address unavailable"> |
|
<span class="status disable">disable</span> |
|
<p>地址3：<a href="#" onclick="copyToClipboard('https://new-api.hongshi-app.us.kg/')">https://new-api.hongshi-app.us.kg/</a></p> |
|
</div> |
|
|
|
<script> |
|
|
|
var availableAddress = 2; |
|
|
|
var addressElement = document.getElementById('address' + availableAddress); |
|
addressElement.classList.remove('unavailable'); |
|
addressElement.classList.add('available'); |
|
var statusElement = addressElement.querySelector('.status'); |
|
statusElement.classList.remove('disable'); |
|
statusElement.classList.add('usable'); |
|
statusElement.textContent = 'usable'; |
|
|
|
|
|
var backgroundIndex = 1; |
|
function changeBackground() { |
|
document.body.style.backgroundImage = 'url(background' + backgroundIndex + '.jpg)'; |
|
backgroundIndex = (backgroundIndex % 15) + 1; |
|
} |
|
setInterval(changeBackground, 15000); |
|
changeBackground(); |
|
|
|
|
|
function copyToClipboard(text) { |
|
navigator.clipboard.writeText(text).then(function() { |
|
alert('地址已复制到剪贴板：' + text); |
|
}, function(err) { |
|
alert('复制失败：', err); |
|
}); |
|
} |
|
|
|
|
|
function checkLinkDelay(url, callback) { |
|
var startTime = new Date().getTime(); |
|
var img = new Image(); |
|
img.onload = function() { |
|
var endTime = new Date().getTime(); |
|
var delay = endTime - startTime; |
|
callback(delay); |
|
}; |
|
img.onerror = function() { |
|
callback('无法检测'); |
|
}; |
|
img.src = url + '?t=' + startTime; |
|
} |
|
|
|
|
|
checkLinkDelay('https://api.hongshi-app.us.kg/', function(delay) { |
|
console.log('地址1的延迟：' + delay + 'ms'); |
|
}); |
|
</script> |
|
</body> |
|
</html> |
|
|
