当前位置：首页 > news >正文

制作一个简单的html网页

news 2025/6/27 17:50:43

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>

查看全文

http://www.lryc.cn/news/302901.html