时间机器更新版

马黑黑 · 发表于 2024-11-19 20:03

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 2024-11-19 20:05

帖子代码

<style>
#mama { margin: 30px 0 30px calc(50% - 681px); width: 1200px; height: 700px; background: black url('https://638183.freep.cn/638183/small/time.jpg') no-repeat center/ 400px 400px; box-shadow: 3px 3px 6px gray; z-index: 1; display: grid; place-items: center; position: relative; --run: running; }
#mama::after { position: absolute; content: 'Time Machine'; background: #eee; border-radius: 0 12px 12px 0; left: 0; width: 150px; height: 40px; display: grid; place-items: center; }
#msvg { position: absolute; top: calc(50% - 155px); width: 300px; height: 300px; cursor: pointer; animation: rot 8s linear infinite var(--run); }
#vid { position: absolute; width: 100%; height: 100%; object-fit: cover; -webkit-mask: radial-gradient(transparent 20%, red); pointer-events: none; }
#prog { position: absolute; bottom: 150px; width: 300px; height: 2px; background: #eee; display: grid; place-items: center; cursor: pointer; --prog: 0%; }
#prog::before { position: absolute; content: attr(data-tt); left: -50px; right: -50px; text-align:justify; text-align-last: justify; font-size: 14px; color: white; }
#prog::after { position: absolute; content: ''; left: calc(var(--prog) - 6px); width: 12px; height: 12px; border-radius: 50%; background: red; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="mama">
	<audio id="aud" src="https://music.163.com/song/media/outer/url?id=436355180"></audio>
	<video id="vid" src="https://bpic.588ku.com/video_listen/588ku_video/23/05/24/17/38/51/video646ddb2b96d05.mp4" autoplay loop muted></video>
	<svg id="msvg"></svg>
	<div id="prog" data-tt="00:00 00:00"></div>
</div>

<script type="module">
import draw from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
import { Aud } from 'https://638183.freep.cn/638183/web/mod/audio.js';

var dr = draw.dr('msvg');
var mDatas = { pa: mama, aud: aud, btn: msvg, prog: prog, cssval: '--run' };

var audio = new Aud(mDatas);
audio.play();

var tt = 9, R = 150, r = 140, a = 360 / tt, rad = Math.PI / 180 * a, pstr = 'M150 150';
for(var i = 0; i <= tt; i ++) {
	var x1 = R + r * Math.cos(rad * i), x2 = R + r * Math.cos(rad * (i + 1)),
		y1 = R + r * Math.sin(rad * i), y2 = R + r * Math.sin(rad * (i + 1));
	pstr += `L${x1.toFixed(2)} ${y1.toFixed(2)} Q150 150,${x2.toFixed(2)} ${y2.toFixed(2)} L150 150`;
}
dr.marker('m1', 5, 5, 2.5, 2.5);
dr.circle(2.5,2.5,2.5,'red').addTo('m1');
dr.path(pstr, 'rgba(20,20,100,.3)', 'red', 2).sets({'marker-mid': 'url(#m1)', 'stroke-dasharray': '4 8'}).animate('animate', {
	attributeName: 'stroke-dashoffset',
	to: 300,
	dur: '4s',
	repeatCount: 'indefinite'
});
</script>

马黑黑 · 发表于 2024-11-19 20:05

本帖最后由马黑黑于 2024-11-19 20:39 编辑

audio.js 模块属于ES6模块，本地测试运行需要引用网络上的 audio.js，若需要修改 audio.js 需要本地计算机支持web虚拟服务器且资源与HTML文档置于虚拟服务器目录中。

audio.js 模块可以实现：在帖子中管理audio标签音频的播放、暂停，以及联动管理 ① 运行了CSS关键帧动画的按钮以及其他使用相同CSS变量进行管理的CSS动画，② 视频，③ 内嵌代码的 svg 动画；此外，模块可以对进度条进行管控：支持进音频播放进度显示和进度控制。

在内嵌JS代码中引入和使用模块：

<script type="module">
import { Aud } from 'https://638183.freep.cn/638183/web/mod/audio.js'; //引入模块

var config = { pa: mama, aud: aud, btn: msvg, prog: prog, cssval: '--state' }; //声明配置变量

var audio = new Aud(config); //实例化 Aud
audio.play(); //运行模块 Aud 副本
</script>

其中：

① 红色 Aud 是模块提供的对象（头一个字母大写），该对象引用自 audio.js 资源，实例化时要创建一个自命名变量 audio ，并用 new Aud(配置变量) 给 audio 赋值，这样 audio 成为一个 Aud 副本，它就可以运行 Aud 的 paly() 方法；

② 配置解释：配置使用JS对象，一组花括号里的键值对，用于描述模块所使用的数据——

var config = {
pa: mama, //帖子父元素（必须）
aud: aud, //音频（必须，
btn: msvg, //音频控制按钮，支持图片（必须）
prog: prog, //进度条（可选）
cssval: '--state' //CSS变量名称（必须）
};

配置语句可以写在一行。prog 可选，缺省表示没有进度条。

另外，模块仅提供功能性服务，UI还得在帖子中自己实现，下楼将做说明，敬请期待。