论坛 › 马黑黑教程专版 › 单标签播放暂停按钮

马黑黑 发表于 2022-10-5 16:17

单标签播放暂停按钮

代码：
<style>
#mBtn {
        margin: 50px;
        padding: 0;
        background: none;
        box-sizing: border-box;
        transition: .2s;
}
#mBtn:hover {
        border-left-color: red;
}
.play {
        height: 30px;
        border: 0px solid transparent;
        border-left-color: orange;
        border-width: 15px 0 15px 24px;
}
.pause {
        border-style: double;
        border-width: 0 0 0 24px;
}
</style>

<div id="mBtn" class="play"></div>
效果楼下看

马黑黑 发表于 2022-10-5 16:17

<style>
#mBtn {
        margin: 50px;
        padding: 0;
        background: none;
        box-sizing: border-box;
        transition: .2s;
}
#mBtn:hover {
        border-left-color: red;
}
.play {
        height: 30px;
        border: 0px solid transparent;
        border-left-color: orange;
        border-width: 15px 0 15px 24px;
}
.pause {
        border-style: double;
        border-width: 0 0 0 24px;
}
</style>

<div id="mBtn" class="play"></div>

马黑黑 发表于 2022-10-5 16:21

本帖最后由 马黑黑 于 2022-10-5 16:24 编辑 <br /><br />大家会发现，哎呀，单击了木有用，木有音乐。<br><br>

是的，这是因为：没有音乐。<br><br>

音乐在这里就算了，主要是看看按钮的情况。我们上面的代码，还需要JS来控制单击的效果，代码是酱紫：<br><br>

<div><div>&lt;script&gt;</div><div>let btnflag = true;</div><div>mBtn.onclick = () =&gt; {</div><div><span style="white-space:pre">        </span>mBtn.className = btnflag ? 'play pause' : 'play';</div><div><span style="white-space:pre">        </span>btnflag = !btnflag;</div><div>}</div><div>&lt;/script&gt;</div></div><div><br></div>

<script>
let btnflag = true;
mBtn.onclick = () => {
        mBtn.className = btnflag ? 'play pause' : 'play';
        btnflag = !btnflag;
}
</script>

马黑黑 发表于 2022-10-5 16:25

这就是：一个标签，播放、暂停同时管了

小辣椒 发表于 2022-10-5 17:31

黑黑新的产品马上会腾空出世{:4_199:}

马黑黑 发表于 2022-10-5 17:59

小辣椒 发表于 2022-10-5 17:31
黑黑新的产品马上会腾空出世

这回你猜错了。这个只是玩玩

小辣椒 发表于 2022-10-5 18:02

马黑黑 发表于 2022-10-5 17:59
这回你猜错了。这个只是玩玩

好啊，你玩也是有一定的用途{:4_199:}

马黑黑 发表于 2022-10-5 18:16

小辣椒 发表于 2022-10-5 18:02
好啊，你玩也是有一定的用途

这类东东实现过的，这里只是测试一下另外一种方法

阙歌 发表于 2022-10-5 19:11

之前是用图片形式,   这个好、省去上传图片及挂上链接啦{:4_199:}{:4_199:}

马黑黑 发表于 2022-10-5 19:15

阙歌 发表于 2022-10-5 19:11
之前是用图片形式,   这个好、省去上传图片及挂上链接啦

图片俺也用过，最主要还是用CSS、svg、canvas等方法，其中，CSS方法还是有多种实现思路的，本帖方法也很巧妙，之前还有clip-path方法，都不错的

阙歌 发表于 2022-10-5 19:18

马黑黑 发表于 2022-10-5 19:15
图片俺也用过，最主要还是用CSS、svg、canvas等方法，其中，CSS方法还是有多种实现思路的，本帖方法也很 ...

巧妙无比,还带变色提示功能~~一个字:绝!

马黑黑 发表于 2022-10-5 19:23

阙歌 发表于 2022-10-5 19:18
巧妙无比,还带变色提示功能~~一个字:绝!

这都是CSS的功效

红影 发表于 2022-10-5 22:41

这个按钮标签好，很简洁{:4_187:}

马黑黑 发表于 2022-10-5 22:59

红影 发表于 2022-10-5 22:41
这个按钮标签好，很简洁

封装起来也需要一些额外代码的

马黑黑 发表于 2022-10-6 07:47

小辣椒 发表于 2022-10-5 17:31
黑黑新的产品马上会腾空出世

经不住你的诱导，还是做个吧{:4_170:}

https://www.huachaowang.com/forum.php?mod=viewthread&tid=63651&pid=1738705&page=1&extra=#pid1738705

红影 发表于 2022-10-6 07:54

马黑黑 发表于 2022-10-5 22:59
封装起来也需要一些额外代码的

看起来还是挺简洁的{:4_204:}

马黑黑 发表于 2022-10-6 07:55

红影 发表于 2022-10-6 07:54
看起来还是挺简洁的

就像一个衣服上的纽扣，可以很简洁，但它背后总是有着复杂的工序

红影 发表于 2022-10-6 10:42

马黑黑 发表于 2022-10-6 07:55
就像一个衣服上的纽扣，可以很简洁，但它背后总是有着复杂的工序

看帖子如同看衣服好不好看，学习帖子就是要学习纽扣的缝制方式了{:4_204:}

马黑黑 发表于 2022-10-6 10:59

红影 发表于 2022-10-6 10:42
看帖子如同看衣服好不好看，学习帖子就是要学习纽扣的缝制方式了

说的好，挺有意思{:4_170:}

红影 发表于 2022-10-6 20:40

马黑黑 发表于 2022-10-6 10:59
说的好，挺有意思

我经常是只见钮扣不见衣服，进帖子先看制作，有时甚至忘记去欣赏帖子的美{:4_173:}

查看完整版本: 单标签播放暂停按钮