时间机器更新版

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

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

<h2>帖子代码</h2>
<div id="hEdiv"><pre id="hEpre">
<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>
</pre></div>

<script type="module">
import hlight from 'https://638183.freep.cn/638183/web/mod/helight.js';
hlight.hl(hEdiv, hEpre);
</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还得在帖子中自己实现，下楼将做说明，敬请期待。

马黑黑 发表于 2024-11-19 20:06

占位

朵拉发表于 2024-11-19 20:11

更炫酷了，欣赏学习{:4_178:}

花飞飞 发表于 2024-11-19 20:13

这算是第三版了吧。。
增加进度条的基础上，又给进度条添加了时间显示。。

花飞飞 发表于 2024-11-19 20:31

左边还加了个标题标签，这时间机器概念机整得跟珠海航展似的。。{:4_173:}
换了个视频，眼花缭乱，比那个吵眼睛~~也漂亮。。

马黑黑 发表于 2024-11-19 20:34

花飞飞发表于 2024-11-19 20:13
这算是第三版了吧。。
增加进度条的基础上，又给进度条添加了时间显示。。

一版是昨晚写好，二版是中午写好，三版是晚饭后写好。暂时酱紫了

马黑黑 发表于 2024-11-19 20:35

花飞飞发表于 2024-11-19 20:31
左边还加了个标题标签，这时间机器概念机整得跟珠海航展似的。。
换了个视频，眼花缭乱，比那个 ...

这个是企业版视频，左边的创可贴是盖住它的logo

花飞飞 发表于 2024-11-19 20:36

马黑黑发表于 2024-11-19 20:34
一版是昨晚写好，二版是中午写好，三版是晚饭后写好。暂时酱紫了

更新换代速度太快了。。
下午看到二版，这会看到三版，一日三餐换了三代{:4_170:}
现在酱紫非常完美。。。

花飞飞 发表于 2024-11-19 20:38

马黑黑发表于 2024-11-19 20:35
这个是企业版视频，左边的创可贴是盖住它的logo

看到小LOGO了，我还以为用的是中空的。。
这也是个新的用法。。
这贴子哪哪都新。。
我去瞅瞅企业版咋整出来的。{:4_173:}

马黑黑 发表于 2024-11-19 20:40

花飞飞发表于 2024-11-19 20:36
更新换代速度太快了。。
下午看到二版，这会看到三版，一日三餐换了三代
现在酱紫非常完美。 ...

这个是小东东，代码不到一百行

马黑黑 发表于 2024-11-19 20:41

花飞飞发表于 2024-11-19 20:38
看到小LOGO了，我还以为用的是中空的。。
这也是个新的用法。。
这贴子哪哪都新。。

中空也用，这是帖子结构需要。企业版的视频照样可以使用，只是下载的话，仍然有左边的logo，得花钱钱

花飞飞 发表于 2024-11-19 20:45

马黑黑发表于 2024-11-19 20:41
中空也用，这是帖子结构需要。企业版的视频照样可以使用，只是下载的话，仍然有左边的logo，得花钱钱

咱只是用用，下载它干嘛。。{:4_173:}还要花小钱钱，还是算了。

花飞飞 发表于 2024-11-19 20:45

马黑黑发表于 2024-11-19 20:40
这个是小东东，代码不到一百行

主要是构思创意更新的快，所以代码也跟着快{:4_173:}

樵歌发表于 2024-11-19 21:21

不敢久看。

红影发表于 2024-11-19 21:30

黑黑厉害了，这么快就连带进度条的封装都弄好了，太赞了{:4_199:}

红影发表于 2024-11-19 21:32

进度条颜色和小图背景及小播的色彩相呼应，这个封装和制作都很完美{:4_205:}

马黑黑 发表于 2024-11-19 21:45

红影发表于 2024-11-19 21:32
进度条颜色和小图背景及小播的色彩相呼应，这个封装和制作都很完美

UI部分由帖子实现，不是JS模块做出来的

马黑黑 发表于 2024-11-19 21:46

花飞飞发表于 2024-11-19 20:45
咱只是用用，下载它干嘛。。还要花小钱钱，还是算了。

{:4_173:}

页: [1] 2 3 4

花潮论坛's Archiver

时间机器更新版