1. 特效按钮
2 可以独立使用的一个页面
3 底部小时钟
<!DOCTYPE html>
<html>
<head>
<title>Simple Webpage</title>
<style>
/* 禁止鼠标右键 */
body {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}
/* 特效按钮样式 */
.button {
width: 100px;
height: 50px;
background-color: red;
color: white;
text-align: center;
line-height: 50px;
cursor: pointer;
}
/* 底部小时钟样式 */
#clock {
position: fixed;
bottom: 0;
left: 50%;
transform: translateX(-50%);
font-size: 20px;
}
</style>
</head>
<body>
<div class="button">特效按钮</div>
<div id="clock"></div>
<script>
// 获取访问者的操作系统和ip地址
var os = window.navigator.platform;
var ip = "";
fetch("https://api.ipify.org/?format=json")
.then(function(response) {
return response.json();
})
.then(function(data) {
ip = data.ip;
});
// 页面加载完成后执行以下代码
window.onload = function() {
// 添加点击事件到特效按钮
document.querySelector(".button").addEventListener("click", function() {
// 在这里写特效按钮的代码
});
// 添加小时钟功能
setInterval(function() {
var date = new Date();
var hours = date.getHours().toString().padStart(2, "0");
var minutes = date.getMinutes().toString().padStart(2, "0");
var seconds = date.getSeconds().toString().padStart(2, "0");
document.getElementById("clock").innerHTML = hours + ":" + minutes + ":" + seconds;
}, 1000);
};
</script>
</body>
</html>