马黑黑 发表于 2021-12-23 17:13
播放器 @小辣椒 放在左边，就需要在源码中加若干个空格（ ）才行。可以考虑居中。签名也可以在后面 ...
我是这样加了2个空格
马黑黑 发表于 2021-12-23 22:24
以前的 也可以，但CSS3不提倡使用了
哦，可以通用啊
加林森 发表于 2021-12-23 16:56
向老黑学习，这样的发帖方式更加快。谢谢老黑！
队长，你这个文字排列没有对整齐
本帖最后由 加林森 于 2022-2-7 18:04 编辑 <br /><br />红影 发表于 2021-12-23 22:40
这个也是从黑黑那学来的
嗯嗯
<style type="text/css">
/* CSS代码：class="类名"方式调用 */
.btnDiv { /* 按钮 */
position: relative;
width: 32px;
height: 32px;
border: none;
background: darkgreen; /* 按钮颜色 */
border-radius: 20%; /* 50%位圆形 */
box-shadow: 1px 1px 1px 0px rgba(0,0,0,.5);
cursor: pointer;
}
.btnDiv:hover { /* 鼠标滑过 */
opacity: .8;
box-shadow: 1px 1px 2px 1px rgba(0,0,0,.5);
}
.btnDiv:active { /* 鼠标按下 */
opacity: .8;
box-shadow: 1px 1px 1px 0px rgba(0,0,0,.9);
}
.btn-play { /* 播放图标 */
position: absolute;
width: 0px;
height: 0px;
border: 10px solid #000;
border-top-color:transparent;
border-right-color:transparent;
border-bottom-color:transparent;
border-left-color:#eee;
left: 12px; /* 在按钮中的横向位置 */
top: 6px;/* 在按钮中的纵向位置 */
}
.btn-pause {/* 暂停图标*/
position: absolute;
display:none;
width: 2px;
height: 20px;
border-right: 4px solid #eee;
border-bottom:0px;
border-left: 4px solid #eee;
left: 11px;/* 在按钮中的横向位置 */
top: 6px;/* 在按钮中的纵向位置 */
}
</style>
<!-- HTML5代码：id不可改变 -->
<p><audio id="ymusic" src="音乐地址" controls="controls"></audio></p>
<div id="btnDiv" class="btnDiv">
<div id="btn-play" class="btn-play"></div>
<div id="btn-pause" class="btn-pause"></div>
</div>
<script language="javascript">
//JS代码
var mu = document.getElementById('ymusic');
var btn = document.getElementById('btnDiv');
var playbtn = document.getElementById('btn-play');
var pausebtn = document.getElementById('btn-pause');
btn.onclick = function(){ iplay(1); } //按钮按下事件：播放或暂停
mu.addEventListener("ended", function(){ iplay(0); }) //监听播放是否结束
function iplay(flag){
if(flag==1){ // 按钮按下：处理播放与按钮
mu.paused ? (mu.play(), playbtn.style.display="none", pausebtn.style.display="block") : (mu.pause(), playbtn.style.display="block", pausebtn.style.display="none");
}else{ // 播放结束：处理按钮
playbtn.style.display= "block";
pausebtn.style.display = "none";
}
}
</script>
小辣椒 发表于 2021-12-23 22:44
哦，可以通用啊
一个是 CSS 方法，一个是老旧的 HTML 方法，都能用
小辣椒 发表于 2021-12-23 22:43
我是这样加了2个空格
嗯，效果好就行
小辣椒 发表于 2021-12-23 22:45
队长，你这个文字排列没有对整齐
就是，我不知道该怎么改？
马黑黑 发表于 2021-12-23 22:52
一个是 CSS 方法，一个是老旧的 HTML 方法，都能用
主要我对css不够了解
加林森 发表于 2021-12-23 22:54
就是，我不知道该怎么改？
你对齐就可以了啊
小辣椒 发表于 2021-12-23 22:57
主要我对css不够了解
了解一些常用的
马黑黑 发表于 2021-12-23 22:53
嗯，效果好就行
黑黑，还得不断的练习，感觉一下子不习惯，其实css操作代码精炼，代码不会我那样乱七八糟的多，但我还不会自己操作，都要做一步问一步
马黑黑 发表于 2021-12-23 23:02
了解一些常用的
我百度了也是一下子搞不懂{:4_203:}
小辣椒 发表于 2021-12-23 23:04
黑黑，还得不断的练习，感觉一下子不习惯，其实css操作代码精炼，代码不会我那样乱七八糟的多，但我还不 ...
很快上手的
小辣椒 发表于 2021-12-23 23:07
我百度了也是一下子搞不懂
静下心来，找容易理解的
马黑黑 发表于 2021-12-23 23:08
很快上手的
希望吧，我要把一些居中 居左右的代码记下来
常规的一些要记下来，开始用可以看看
小辣椒 发表于 2021-12-23 23:09
希望吧，我要把一些居中 居左右的代码记下来
常规的一些要记下来，开始用可以看看
还有你会经常使用的字体设置、粗体、前景色
马黑黑 发表于 2021-12-23 23:08
静下心来，找容易理解的
这个也是花时间的，晚上我总想做播放器，一下子又这么迟了
小辣椒 发表于 2021-12-23 23:12
这个也是花时间的，晚上我总想做播放器，一下子又这么迟了
休息吧啊
小辣椒 发表于 2021-12-23 23:00
你对齐就可以了啊
现在对齐了
加林森 发表于 2021-12-24 18:19
现在对齐了
看见了，队长真棒{:4_199:}