相濡以沫
<style>.bgbox {
left: -281.5px;
width: 1159px;
height: 799px;
background-color: tan;
background-image: url('/data/attachment/forum/202205/22/082641jj8pzhzsacda0mbx.jpg'),
url('/data/attachment/forum/202205/22/082641b8izdmv3t7mmhvl3.png');
background-repeat: no-repeat;
background-position: center, right bottom;
background-blend-mode: soft-light, screen;
box-shadow: 2px 2px 6px gray;
position: relative;
}
.tube {
display: flex;
justify-content: center;
width: 10px;
height: 100px;
background-color: #eee;
background: linear-gradient(#aaa 1px, #eee 1px);
background-size: 8px 10px;
box-shadow: 0 -8px 0 0 red, 0 18px 0 0 red;
border-radius: 4px;
overflow: hidden;
cursor: pointer;
transform: translate(10px, 669px);
position: relative;
}
.ball {
position: absolute;
width: 4px;
height: 100px;
background: rgba(255,0,0,.45);
top: 100px;
}
</style>
<div class="bgbox">
<div class="tube">
<div class="ball"></div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1305764737.mp3" loop="loop" autoplay="autoplay"></audio>
</div>
<script>
let aud = document.querySelector('#aud');
let tube = document.querySelector('.tube');
let ball = document.querySelector('.ball');
let task, current;
aud.addEventListener('timeupdate', function(){
task = aud.duration;
current = aud.currentTime;
setProgress(task,current);
});
tube.onclick = () =>{ aud.paused ? aud.play() : aud.pause(); };
function setProgress(tt,cc) {
if(tt <= 0 || cc <= 0) return false;
let prog = 100 * cc / tt;
ball.style.transform ='translateY(-' + prog + 'px)';
}
</script>
醉美水芙蓉 发表于 2022-5-22 09:20
现在有新冠病毒，需要时时测量体温！
对的对的，还应该给鱼儿和人儿戴上口罩 紧密接触，须实时测量体温{:4_170:} 代码分享：
<style>
.bgbox {
left: -281.5px;
width: 1159px;
height: 799px;
background-color: tan;
background-image: url('/data/attachment/forum/202205/22/082641jj8pzhzsacda0mbx.jpg'),
url('/data/attachment/forum/202205/22/082641b8izdmv3t7mmhvl3.png');
background-repeat: no-repeat;
background-position: center, right bottom;
background-blend-mode: soft-light, screen;
box-shadow: 2px 2px 6px gray;
position: relative;
}
.tube {
display: flex;
justify-content: center;
width: 10px;
height: 100px;
background-color: #eee;
background: linear-gradient(#aaa 1px, #eee 1px);
background-size: 8px 10px;
box-shadow: 0 -8px 0 0 red, 0 18px 0 0 red;
border-radius: 4px;
overflow: hidden;
cursor: pointer;
transform: translate(10px, 669px);
position: relative;
}
.ball {
position: absolute;
width: 4px;
height: 100px;
background: rgba(255,0,0,.45);
top: 100px;
}
</style>
<div class="bgbox">
<div class="tube">
<div class="ball"></div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1305764737.mp3" loop="loop" autoplay="autoplay"></audio>
</div>
<script>
let aud = document.querySelector('#aud');
let tube = document.querySelector('.tube');
let ball = document.querySelector('.ball');
let task, current;
aud.addEventListener('timeupdate', function(){
task = aud.duration;
current = aud.currentTime;
setProgress(task,current);
});
tube.onclick = () =>{ aud.paused ? aud.play() : aud.pause(); };
function setProgress(tt,cc) {
if(tt <= 0 || cc <= 0) return false;
let prog = 100 * cc / tt;
ball.style.transform ='translateY(-' + prog + 'px)';
}
</script>
地板我的 应该将 .ball 改为其他名称，不管了 你画的？ 东篱闲人 发表于 2022-5-22 08:45
你画的？
名家画的，我修改 马黑黑 发表于 2022-5-22 08:47
名家画的，我修改
你能！{:5_116:} 东篱闲人 发表于 2022-5-22 08:48
你能！
我把两个不同的名家画的作品都改了，然后硬塞到了一块儿 马黑黑 发表于 2022-5-22 08:49
我把两个不同的名家画的作品都改了，然后硬塞到了一块儿
很和谐，鱼水情歌。。。 东篱闲人 发表于 2022-5-22 08:51
很和谐，鱼水情歌。。。
感觉还可以 又来了个体温计的带进度条的按钮，看得笑。黑黑太厉害了，进度条可以在你手下千变万化{:4_199:} 光顾着看进度条按钮了，这图片制作也好美，真温馨{:4_199:} 老黑制作得真美，好意境，赞！{:4_199:} 加林森 发表于 2022-5-22 10:58
老黑制作得真美，好意境，赞！
谢赞！ 马黑黑 发表于 2022-5-22 11:50
谢赞！
{:4_190:} 加林森 发表于 2022-5-22 11:51
{:4_180:} 马黑黑 发表于 2022-5-22 11:51
{:4_191:}