JS代码点滴

花简静

烧脑的日记，支持一个。。

凡哥

2024年9月14日 星期六

动态生成svg三角形动画

简单说明：可以自定义三角形数量，改好后点击“中”按钮，会按预设数量生成动画代码。svg里的元素背景色随机。文本框里的代码存为本地 .svg 文件即可当图片使用。

三角形数量 : 中

花简静

这个小播这么快就可以独立设置了，每次更新都令人惊喜

凡哥

花简静 发表于 2024-9-14 19:29
这个小播这么快就可以独立设置了，每次更新都令人惊喜

可以设置三角形数量，范围建议在4~30之间

花简静

凡哥 发表于 2024-9-14 19:37
可以设置三角形数量，范围建议在4~30之间

可以有30个这么多，小圆有点小。。我试一下

花简静

圆背景也是随机变色，又是我喜欢的色彩。。。清丽淡雅型

凡哥

花简静 发表于 2024-9-14 19:38
可以有30个这么多，小圆有点小。。我试一下

多一点也无妨

凡哥

2024年9月26日 星期四

全屏代码

<style>
#tz { margin: auto; width: 600px; height: 400px; background: linear-gradient(pink,olive); position: relative; }
#fsbox { position: absolute; left: 20px; top: 20px; padding: 8px; text-align:center; border: 1px solid white; border-radius: 10px; color: white; cursor: pointer; user-select: none; }
</style>

<div id="tz">
	<span id="fsbox">进入全屏</span>
</div>

<script>
var timerId, fs = false;
var pa = document.getElementById('tz');

pa.addEventListener('mousemove', () => {
	clearTimeout(timerId);
	fsbox.style.opacity = '1';
	timerId = setTimeout('fsBox.style.opacity = "0"', 3000);
});

document.addEventListener('fullscreenchange', () => {
	if (document.fullscreenElement !== null) {
		fs = true;
		fsbox.innerText = '退出全屏';
	} else {
		fs = false;
		fsbox.innerText = '进入全屏';
	}
});

fsbox.onclick = () => fs ? document.exitFullscreen() : pa.requestFullscreen();
</script>

凡哥

188楼全屏代码使用的简单说明：

id="tz" 的HTML元素是要全屏显示的目标，如果id更改了，比如是 tiezi，请在第 12 行代码中将id名称替换 tz 字样，CSS代码中的 #tz 选择器名称也要相应修改。

花简静

凡哥 发表于 2024-9-14 19:40
多一点也无妨

那就试着多一点