Update index.html
Browse files- index.html +26 -2
index.html
CHANGED
|
@@ -23,6 +23,7 @@
|
|
| 23 |
display: block;
|
| 24 |
margin-left: auto;
|
| 25 |
margin-right: auto;
|
|
|
|
| 26 |
}
|
| 27 |
.address:hover {
|
| 28 |
transform: scale(1.05);
|
|
@@ -41,17 +42,35 @@
|
|
| 41 |
text-decoration: none;
|
| 42 |
opacity: 1;
|
| 43 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 44 |
</style>
|
| 45 |
</head>
|
| 46 |
<body>
|
| 47 |
<h1>地址检测网站</h1>
|
| 48 |
<div id="address1" class="address unavailable">
|
|
|
|
| 49 |
<p>地址1：<a href="#" onclick="copyToClipboard('https://example1.com')">https://example1.com</a></p>
|
| 50 |
</div>
|
| 51 |
<div id="address2" class="address unavailable">
|
|
|
|
| 52 |
<p>地址2：<a href="#" onclick="copyToClipboard('https://example2.com')">https://example2.com</a></p>
|
| 53 |
</div>
|
| 54 |
<div id="address3" class="address unavailable">
|
|
|
|
| 55 |
<p>地址3：<a href="#" onclick="copyToClipboard('https://example3.com')">https://example3.com</a></p>
|
| 56 |
</div>
|
| 57 |
|
|
@@ -59,8 +78,13 @@
|
|
| 59 |
// 修改这里以选择可用的地址
|
| 60 |
var availableAddress = 1; // 选择1, 2, 或 3
|
| 61 |
|
| 62 |
-
document.getElementById('address' + availableAddress)
|
| 63 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 64 |
|
| 65 |
// 设置可变背景
|
| 66 |
var backgroundIndex = 1;
|
|
|
|
| 23 |
display: block;
|
| 24 |
margin-left: auto;
|
| 25 |
margin-right: auto;
|
| 26 |
+
position: relative;
|
| 27 |
}
|
| 28 |
.address:hover {
|
| 29 |
transform: scale(1.05);
|
|
|
|
| 42 |
text-decoration: none;
|
| 43 |
opacity: 1;
|
| 44 |
}
|
| 45 |
+
.status {
|
| 46 |
+
position: absolute;
|
| 47 |
+
top: 10px;
|
| 48 |
+
left: 10px;
|
| 49 |
+
padding: 2px 5px;
|
| 50 |
+
border-radius: 5px;
|
| 51 |
+
color: white;
|
| 52 |
+
font-size: 12px;
|
| 53 |
+
}
|
| 54 |
+
.usable {
|
| 55 |
+
background-color: #4CAF50;
|
| 56 |
+
}
|
| 57 |
+
.disable {
|
| 58 |
+
background-color: #f44336;
|
| 59 |
+
}
|
| 60 |
</style>
|
| 61 |
</head>
|
| 62 |
<body>
|
| 63 |
<h1>地址检测网站</h1>
|
| 64 |
<div id="address1" class="address unavailable">
|
| 65 |
+
<span class="status disable">disable</span>
|
| 66 |
<p>地址1：<a href="#" onclick="copyToClipboard('https://example1.com')">https://example1.com</a></p>
|
| 67 |
</div>
|
| 68 |
<div id="address2" class="address unavailable">
|
| 69 |
+
<span class="status disable">disable</span>
|
| 70 |
<p>地址2：<a href="#" onclick="copyToClipboard('https://example2.com')">https://example2.com</a></p>
|
| 71 |
</div>
|
| 72 |
<div id="address3" class="address unavailable">
|
| 73 |
+
<span class="status disable">disable</span>
|
| 74 |
<p>地址3：<a href="#" onclick="copyToClipboard('https://example3.com')">https://example3.com</a></p>
|
| 75 |
</div>
|
| 76 |
|
|
|
|
| 78 |
// 修改这里以选择可用的地址
|
| 79 |
var availableAddress = 1; // 选择1, 2, 或 3
|
| 80 |
|
| 81 |
+
var addressElement = document.getElementById('address' + availableAddress);
|
| 82 |
+
addressElement.classList.remove('unavailable');
|
| 83 |
+
addressElement.classList.add('available');
|
| 84 |
+
var statusElement = addressElement.querySelector('.status');
|
| 85 |
+
statusElement.classList.remove('disable');
|
| 86 |
+
statusElement.classList.add('usable');
|
| 87 |
+
statusElement.textContent = 'usable';
|
| 88 |
|
| 89 |
// 设置可变背景
|
| 90 |
var backgroundIndex = 1;
|