页脚小标
bash 代码:<div class="tp-ad-text1">
<a href="https://halo.oneln.org/" title="同款网站搭建" target="_blank">oneLN</a>
<a href="https://halo.oneln.org/" title="oneLN" target="_blank">oneLN</a>本站满天星
html 代码:<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>星空背景效果和获取IP地址</title>
<style>
body {
margin: 0;
padding: 0;
/* Remove or adjust overflow property */
/* overflow: hidden; */
overflow-y: auto; /* Only hide horizontal overflow */
}
.star {
position: absolute;
background-color: white;
border-radius: 50%;
}
/* 设置星星的闪烁动画 */
@keyframes twinkling {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
</style>
</head>
<body>
<!-- 生成多个星星 -->
<script>
// 生成随机数
function randomBetween(min, max) {
return Math.random() * (max - min) + min;
}
// 创建星星
function createStar() {
var star = document.createElement("div");
star.className = "star";
// 设置星星的位置和大小
var size = randomBetween(1, 2); // 调整星星的大小范围
star.style.width = size + "px";
star.style.height = size + "px";
star.style.left = randomBetween(0, window.innerWidth) + "px";
star.style.top = randomBetween(0, window.innerHeight) + "px";
// 设置星星的动画
var duration = randomBetween(3, 6); // 调整星星的闪烁速度
star.style.animation = "twinkling " + duration + "s infinite";
// 将星星添加到页面中
document.body.appendChild(star);
}
// 创建多个星星
function createStars() {
var numberOfStars = Math.floor(window.innerWidth * window.innerHeight / 10000); // 根据屏幕尺寸调整星星的数量
for (var i = 0; i < numberOfStars; i++) {
createStar();
}
}
// 页面加载完成后创建星星
window.onload = createStars;
// 当窗口大小改变时重新生成星星，以适应屏幕旋转等情况
window.onresize = function() {
// 清空页面上的所有星星
var stars = document.querySelectorAll('.star');
stars.forEach(function(star) {
star.remove();
});
// 重新生成星星
createStars();
};
</script>
</body>
</html>鼠标效果
css 代码:</style>
<!-- 网页特效 - 樱花 -->
<script src="https://cdn.jsdelivr.net/gh/mocchen/cssmeihua/js/yinghua.js"></script>
<!-- 网页鼠标点击特效 - 爱心 -->
<script src="https://cdn.jsdelivr.net/gh/mocchen/cssmeihua/js/aixin.js"></script>
<!-- 网页鼠标点击特效 - 烟花波纹 -->
<script src="https://cdn.jsdelivr.net/gh/mocchen/cssmeihua/js/yanhuabowen.js"></script>
<!-- 鼠标特效 - 小星星拖尾 -->
<span class="js-cursor-container"></span>
<script src="https://cdn.jsdelivr.net/gh/mocchen/cssmeihua/js/xiaoxingxing.js"></script>免费天气api（http://www.tianqi.com/plugin/）
bash 代码:<iframe scrolling="no" src="https://widget.tianqiapi.com/?style=tq&skin=pitaya" frameborder="0" width="100%" height="25" allowtransparency="true"></iframe>open天气
bash 代码:<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>天气信息</title>
<style>
#weather {
font-family: 'Arial', sans-serif;
text-align: center;
padding: 00px;
}
#temperature {
font-size: 2em;
color: #ff8c00;
}
#description {
font-size: 1.5em;
color: #6a5acd;
}
</style>
</head>
<body>
<div id="weather">
<h2 id="city"></h2>
<div id="temperature"></div>
<div id="description"></div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(position => {
const lat = position.coords.latitude;
const lon = position.coords.longitude;
const apiKey = '3f397c5384d998ddb8269337b4a6bbd3';
const url = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${apiKey}&lang=zh_cn&units=metric`;
fetch(url)
.then(response => response.json())
.then(data => {
document.getElementById('city').textContent = data.name;
document.getElementById('temperature').innerHTML = `${data.main.temp} °C`;
document.getElementById('description').textContent = data.weather[0].description;
})
.catch(error => console.error('Error:', error));
}, () => {
alert('无法获取您的位置信息。');
});
} else {
alert('您的浏览器不支持地理位置功能。');
}
});
</script>
</body>
</html>
<iframe scrolling="no" src="https://widget.tianqiapi.com/?style=tq&skin=pitaya" frameborder="0" width="100%" height="60" allowtransparency="true"></iframe>IP自动识别
bash 代码:<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>获取IP地址</title>
</head>
<body>
<p id="ip-address">正在获取您的IP地址...</p>
<script>
document.addEventListener("DOMContentLoaded", function() {
fetch('https://api.ipify.org?format=json')
.then(response => response.json())
.then(data => {
document.getElementById('ip-address').innerText = "您的IP地址是: " + data.ip;
})
.catch(error => console.error('Error fetching IP address:', error));
});
</script>
</body>
</html>灯笼特效
bash 代码:<script src="https://cdn.jsdelivr.net/gh/no2y/jslib@main/lanterns/lanterns.min.js"></script>文章优化 源项目
bash 代码:<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/browser/pangu.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
pangu.autoSpacingPage();
});
</script>
