时间

马黑黑

红影 发表于 2022-9-10 23:49
虽然画得不好看，大小取的和原来一样，但试验里看不到了。

要取代原来的line，且给 polygon 一个相同的id，JS就可以驱动它

马黑黑

红影 发表于 2022-9-10 23:48
哦，直接用线条命令也可以的啊。

是的，用别的也行。svg有一个 marker 指令，可以通过路径画出图案，然后附加到线条、多边形中，典型的用途用于线条，可以放在线段的头尾，或放在折线的端点

红影

马黑黑 发表于 2022-9-11 07:30
你这是用多边形绘制法，画出的当是一个整体，可以直接驱动。

可是，我在本地测试看不到它。

红影

马黑黑 发表于 2022-9-11 07:31
要取代原来的line，且给 polygon 一个相同的id，JS就可以驱动它

原来的ID我留着了的。

红影

马黑黑 发表于 2022-9-11 07:33
是的，用别的也行。svg有一个 marker 指令，可以通过路径画出图案，然后附加到线条、多边形中，典型的用 ...

还能这样玩，有意思

马黑黑

红影 发表于 2022-9-11 10:11
原来的ID我留着了的。

line 要删除掉，不能有两个相同的id

马黑黑

红影 发表于 2022-9-11 10:12
还能这样玩，有意思

但是相对复杂

马黑黑

红影 发表于 2022-9-11 10:11
可是，我在本地测试看不到它。

我把你的 polygon 放入我的帖子，替代 line，可行：

1. <style>
   
2. #papa { margin: auto; width: 1024px; height: 640px; background: #444 url('https://638183.freep.cn/638183/Pic/2022/time.jpg') no-repeat center/cover; display: grid; place-items: center; box-shadow: 3px 3px 20px #000; position: relative; z-index: 1; }
   
3. #mplayer { position: absolute; }
   
4. #tmsg { font: normal 1em sans-serif; fill: #ccc; }
   
5. #lrc { position: absolute; top: 10px; left: 10px; font: bold 2em sans-serif; letter-spacing: 3px; animation: mov 20s linear infinite alternate; }
   
6. @keyframes mov { to { left: 614px; } }
   
7. </style>
   
8. 
   
9. <div id="papa">
   
10.         <svg id="mplayer" viewBox="0 0 100 100" width="100" height="100">
    
11.                 <circle id="track" cx="50" cy="50" r="45" fill="none" stroke="snow" stroke-width="6" style="cursor: pointer" />
    
12.                 <circle cx="50" cy="50" r="4" fill="red" />
    
13.                 <path id="curPath" d="M 10 60 Q 50 0 90 60" fill="none" stroke="none"/>
    
14.                 <path id="durPath" d="M 0 38 Q 50 100 100 38" fill="none" stroke="none"/>
    
15.                 <g id="tmsg">
    
16.                         <text x="52%" y="0"><textPath id="curMsg" xlink:href="#curPath" text-anchor="middle" dominant-baseline="text-after-edge">00:00</textPath></text>
    
17.                         <text x="60%" y="0"><textPath id="durMsg" xlink:href="#durPath" text-anchor="middle" dominant-baseline="text-before-edge">00:00</textPath></text>
    
18.                 </g>
    
19.                 <!--<line x1="50" y1="50" x2="50" y2="10" stroke="red" stroke-width="1" />-->
    
20.                 <polygon id="hand" points="50,50 50,18 47,18 50,10 54,18 51,18 51,50" fill="red" />
    
21.                 <circle id="btnplay" cx="50" cy="50" r="35" fill="transparent" style="cursor: pointer" />
    
22.         </svg>
    
23.         <svg id="lrc" width="400" height="60">
    
24.                 <text id="lrctxt" x="50%" y="30" fill="none" stroke="snow" text-anchor="middle" dominant-baseline="middle">纯音乐 - 时间</text>
    
25.         </svg>
    
26. </div>
    
27. 
    
28. <script>
    
29. let cc = { x: 1*track.getAttribute('cx'), y: 1*track.getAttribute('cy'), };
    
30. let aud = new Audio();
    
31. aud.src = 'https://music.163.com/song/media/outer/url?id=1920607219.mp3';
    
32. aud.autoplay = true;
    
33. aud.loop = true;
    
34. 
    
35. aud.addEventListener('timeupdate', () => {
    
36.         let progress = aud.currentTime * 360 / aud.duration;
    
37.         hand.setAttribute('transform', 'rotate(' + progress +', 50, 50)');
    
38.         curMsg.textContent = toMin(aud.currentTime);
    
39.         durMsg.textContent = toMin(aud.duration);
    
40. });
    
41. 
    
42. track.onclick = (e) => {
    
43.         let angle = Math.atan2(e.offsetY - cc.y, e.offsetX - cc.x) * 180 / Math.PI;
    
44.         angle+= (e.offsetX < cc.x && e.offsetY < cc.y) ? 450 : 90;
    
45.         aud.currentTime = aud.duration * angle / 360;
    
46. }
    
47. 
    
48. btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
    
49. 
    
50. let toMin = (val)  => {
    
51.         if (!val) return '00:00';
    
52.         val = Math.floor(val);
    
53.         let min = parseInt(val / 60), sec = parseFloat(val % 60);
    
54.         if(min < 10) min = '0' + min;
    
55.         if(sec < 10) sec = '0' + sec;
    
56.         return min + ':' + sec;
    
57. }
    
58. </script>

复制代码

红影

马黑黑 发表于 2022-9-11 10:13
line 要删除掉，不能有两个相同的id

那个已经改掉了啊，不存在line了，现在那句是这样
<id="hand" polygon points="50,50 50,18 47,18 50,10 54,18 51,18 51,50" fill="red"/>

我只是不知道id="hand"应该放到哪，看到你都是放到circle或者line后面的。也不知道是不是要加上path的字样。

红影

马黑黑 发表于 2022-9-11 10:13
但是相对复杂

还是弄点简单的吧，复杂的感觉上就学不会

马黑黑

红影 发表于 2022-9-11 10:43
还是弄点简单的吧，复杂的感觉上就学不会

svg 天生就是复杂的

马黑黑

红影 发表于 2022-9-11 10:43
那个已经改掉了啊，不存在line了，现在那句是这样

polygon已经画出指针了，就不用 path 了。你用 polygon 画的指针我替换到我的帖子，没问题，代码放在本帖里。

红影

马黑黑 发表于 2022-9-11 11:25
polygon已经画出指针了，就不用 path 了。你用 polygon 画的指针我替换到我的帖子，没问题，代码放在本帖 ...

哦，原来id=要放在polygon points当中，去试了一下，可以了。看到位置也变了，之前是隐藏在后面了吧。

红影

马黑黑 发表于 2022-9-11 11:24
svg 天生就是复杂的

目前介绍的这些还好啊

马黑黑

红影 发表于 2022-9-11 21:15
目前介绍的这些还好啊

也不简单了，很多人会看的一头雾水

马黑黑

红影 发表于 2022-9-11 21:13
哦，原来id=要放在polygon points当中，去试了一下，可以了。看到位置也变了，之前是隐藏在后面了吧。

没有呀，这句，看看id的位置：

<polygon id="hand" points="50,50 50,18 47,18 50,10 54,18 51,18 51,50" fill="red" />

红影

马黑黑 发表于 2022-9-11 21:17
也不简单了，很多人会看的一头雾水

只要理解那些数字和词汇都是什么意思了，就好啊，又不需要背诵

红影

马黑黑 发表于 2022-9-11 21:19
没有呀，这句，看看id的位置：

嗯，我把ID地址放错了，放最前面了，以为这个语句是不能拆开的呢。

马黑黑

红影 发表于 2022-9-12 15:25
嗯，我把ID地址放错了，放最前面了，以为这个语句是不能拆开的呢。

id 可以放在标签的任何地方，但id是独立的单位，不能并入其他的参数。

马黑黑

红影 发表于 2022-9-12 15:24
只要理解那些数字和词汇都是什么意思了，就好啊，又不需要背诵

记忆总是需要的，不然自己写的时候，可能连标签代码都写不全