<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ping</title>
<style>
body {
font-family: Arial, sans-serif;
}
#inputForm {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 20px;
}
input[type="text"] {
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
padding: 10px 20px;
font-size: 16px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
margin-top: 10px;
}
#result {
margin-top: 20px;
padding: 10px;
border: 1px solid #ccc;
width: 300px;
text-align: center;
}
</style>
</head>
<body>
<h1>网站 Ping 工具</h1>
<div id="inputForm">
<input type="text" placeholder="输入网址">
<button id="pingButton">Ping</button>
</div>
<p id="result"></p>
<script>
const pingButton = document.getElementById('pingButton');
const resultElement = document.getElementById('result');
pingButton.addEventListener('click', () => {
const url = document.querySelector('input[type="text"]').value;
if (!url) {
resultElement.textContent = '请输入网址';
return;
}
resultElement.textContent = '正在 Ping...';
fetch(url, {
method: 'HEAD'
})
.then(response => {
if (response.ok) {
resultElement.textContent = `网站 ${url} 可访问。`;
} else {
resultElement.textContent = `网站 ${url} 不可访问。`;
}
})
.catch(error => {
resultElement.textContent = `网站 ${url} 访问出错：${error}`;
});
});
</script>
</body>
</html>
备注：只可以检测网站是否可以访问
扫一扫
683
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
