相濡以沫

马黑黑

马黑黑

醉美水芙蓉 发表于 2022-5-22 09:20
现在有新冠病毒，需要时时测量体温！

对的对的，还应该给鱼儿和人儿戴上口罩

马黑黑

紧密接触，须实时测量体温

马黑黑

代码分享：

1. <style>
   
2. .bgbox {
   
3.         left: -281.5px;
   
4.         width: 1159px;
   
5.         height: 799px;
   
6.         background-color: tan;
   
7.         background-image: url('/data/attachment/forum/202205/22/082641jj8pzhzsacda0mbx.jpg'),
   
8.                 url('/data/attachment/forum/202205/22/082641b8izdmv3t7mmhvl3.png');
   
9.         background-repeat: no-repeat;
   
10.         background-position: center, right bottom;
    
11.         background-blend-mode: soft-light, screen;
    
12.         box-shadow: 2px 2px 6px gray;
    
13.         position: relative;
    
14. }
    
15. .tube {
    
16.         display: flex;
    
17.         justify-content: center;
    
18.         width: 10px;
    
19.         height: 100px;
    
20.         background-color: #eee;
    
21.         background: linear-gradient(#aaa 1px, #eee 1px);
    
22.         background-size: 8px 10px;
    
23.         box-shadow: 0 -8px 0 0 red, 0 18px 0 0 red;
    
24.         border-radius: 4px;
    
25.         overflow: hidden;
    
26.         cursor: pointer;
    
27.         transform: translate(10px, 669px);
    
28.         position: relative;
    
29. }
    
30. .ball {
    
31.         position: absolute;
    
32.         width: 4px;
    
33.         height: 100px;
    
34.         background: rgba(255,0,0,.45);
    
35.         top: 100px;
    
36. }
    
37. </style>
    
38. 
    
39. <div class="bgbox">
    
40.         <div class="tube">
    
41.                 <div class="ball"></div>
    
42.         </div>
    
43.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1305764737.mp3" loop="loop" autoplay="autoplay"></audio>
    
44. </div>
    
45. 
    
46. <script>
    
47. let aud = document.querySelector('#aud');
    
48. let tube = document.querySelector('.tube');
    
49. let ball = document.querySelector('.ball');
    
50. let task, current;
    
51. 
    
52. aud.addEventListener('timeupdate', function(){
    
53.         task = aud.duration;
    
54.         current = aud.currentTime;
    
55.         setProgress(task,current);
    
56. });
    
57. 
    
58. tube.onclick = () =>{ aud.paused ? aud.play() : aud.pause(); };
    
59. 
    
60. function setProgress(tt,cc) {
    
61.         if(tt <= 0 || cc <= 0) return false;
    
62.         let prog = 100 * cc / tt;
    
63.         ball.style.transform =  'translateY(-' + prog + 'px)';
    
64. }
    
65. </script>

复制代码

马黑黑

地板我的

马黑黑

应该将 .ball 改为其他名称，不管了

东篱闲人

你画的？

马黑黑

东篱闲人 发表于 2022-5-22 08:45
你画的？

名家画的，我修改

东篱闲人

马黑黑 发表于 2022-5-22 08:47
名家画的，我修改

你能！

马黑黑

东篱闲人 发表于 2022-5-22 08:48
你能！

我把两个不同的名家画的作品都改了，然后硬塞到了一块儿

东篱闲人

马黑黑 发表于 2022-5-22 08:49
我把两个不同的名家画的作品都改了，然后硬塞到了一块儿

很和谐，鱼水情歌。。。

马黑黑

东篱闲人 发表于 2022-5-22 08:51
很和谐，鱼水情歌。。。

感觉还可以

红影

又来了个体温计的带进度条的按钮，看得笑。黑黑太厉害了，进度条可以在你手下千变万化

红影

光顾着看进度条按钮了，这图片制作也好美，真温馨

加林森

老黑制作得真美，好意境，赞！

马黑黑

加林森 发表于 2022-5-22 10:58
老黑制作得真美，好意境，赞！

谢赞！

加林森

马黑黑 发表于 2022-5-22 11:50
谢赞！

马黑黑

加林森 发表于 2022-5-22 11:51

加林森

马黑黑 发表于 2022-5-22 11:51