分享一些我常用的JS代码，我知道有些功能用Vue之类的框架很容易实现，但是在写一些小静态页面的时候套框架我感觉太臃肿了，相比之下我还是更喜欢原生写。
1、动态更新时间
可以用于展示现在时间或计算剩余时间等
//时分秒时钟
<script>
const getTimes = () => {
// 获取当前时间
var dateNow = new Date();
// 计算时分秒
var H = (dateNow.getHours() < 10 ? '0' + dateNow.getHours() : dateNow.getHours());
var M = (dateNow.getMinutes() < 10 ? '0' + dateNow.getMinutes() : dateNow.getMinutes());
var S = dateNow.getSeconds() < 10 ? '0' + dateNow.getSeconds() : dateNow.getSeconds();
//合成字符串
var timeDetail = H + ":" + M + ":" + S;
//改变html元素，展示时钟
document.getElementById("timeNow").innerHTML = timeDetail;
//递归调用
setTimeout(() => {
getTimes();
}, 1000);
};
</script>//本站底部的建站时间
<script>
// 站点创建时间
const siteCreateTime = new Date("2024-07-19");
//动态更新时间
const setWorkTime=()=>{
// 获取当前时间
var currentTime = new Date();
var uptime = currentTime - siteCreateTime;
// 计算年数、日、小时、分钟、秒
var years = Math.floor(uptime / (1000 * 60 * 60 * 24 * 365.25));
var days = Math.floor((uptime % (1000 * 60 * 60 * 24 * 365.25)) / (1000 * 60 * 60 * 24));
var hours = Math.floor((uptime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((uptime % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((uptime % (1000 * 60)) / 1000);
// 合成显示字符串
var uptimeString = years==0 ? days + "天" + hours + "小时" + minutes + "分" + seconds + "秒" : years + "年" + days + "天" + hours + "小时" + minutes + "分" + seconds + "秒";
// 在页面中显示运行时间
document.getElementById("workTime").innerHTML = uptimeString;
//递归调用
setTimeout(()=>{
setWorkTime();
},1000);
}
//初次激活时间
setWorkTime();
</script>2、点击产生彩色飘动文字
就像本站点击产生的Ciallo～(∠・ω< )⌒★一样（柚子厨蒸鹅心）
<script>
window.onclick = function (event){
var heart = document.createElement("b");
heart.onselectstart = new Function('event.returnValue=false'); //防止拖动
document.body.appendChild(heart).innerHTML = 'Ciallo～(∠・ω< )⌒★'; //将b元素添加到页面上
heart.style.cssText = "position: fixed;left:-100%;";
var f = 16, // 字体大小
x = event.clientX - f / 2, // 横坐标
y = event.clientY - f, // 纵坐标
c = randomColor(), // 随机颜色
a = 1, // 透明度
s = 1.2; // 放大缩小
heart.style.cssText = "font-size:16px;cursor: default;position: fixed;color:" +
c + ";left:" + x + "px;top:" + y + "px;opacity:" + a + ";transform:scale(" +
s + ");";
var timer = setInterval(function () { //添加定时器
if (a <= 0) {
document.body.removeChild(heart);
clearInterval(timer);
} else {
heart.style.cssText = "font-size:16px;cursor: default;position: fixed;color:" +
c + ";left:" + x + "px;top:" + y + "px;opacity:" + a + ";transform:scale(" +
s + ");";
y--;
a -= 0.016;
s += 0.002;
}
}, 15);
}
function randomColor() {
return "rgb(" + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + "," + (~~(Math
.random() * 255)) + ")";
}
</script>3、动态监听页面大小
可以用于设置背景图片，比如想把一张分辨率小于或大于屏幕尺寸的图片设为背景图片就可以用这个，期间用户随意拖动浏览器窗口改变大小背景图片还是会拉伸覆盖
<script>
const setHandW=()=>{
var H=window.innerHeight;
var W=window.innerWidth;
var item = document.querySelector('body');
//可以根据自己需要改下面的代码
item.style.cssText='background-image: url(./mgl_spl.jpg); background-size: '+W+'px '+H+'px;'
};
window.addEventListener('resize',setHandW);//监听页面尺寸变化
</script>2024-10-23更新：利用动态监听页面大小修复了Sakurairo 1.6.8版本移动端社交栏显示不全问题，详见这里
<script>
const removeBg=()=>{
var H=window.innerHeight;
var W=window.innerWidth;
if(H>W){
document.getElementById("bg-pre").style.display='none';
document.getElementById("bg-next").style.display='none';
}
else{
document.getElementById("bg-pre").style.display='list-item';
document.getElementById("bg-next").style.display='list-item';
}
};
</script>
Comments NOTHING