| <!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> |
|
|
