队长新帖子代码

马黑黑 · 发表于 2022-2-5 23:09

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2022-2-5 23:11 编辑

<style type="text/css">
/* 父框 */
#mainBox {
/* margin: auto; 要定位，需将居中设置去掉  */
      position: relative;
      display: flex;
      align-items: center;
      width: 180px;
      height: 30px;
}
/* 按钮、滑块、百分比显示区 */
#mainBox div[id=per] { color: olive; font-size: 10px; width:40px;}
#mainBox input { outline: none; cursor: pointer; font-size: 10px; }
#mainBox input[type=range] {
      width: 100px;
      background: red;
}
#mainBox input[type=button] {
      width: 40px;
      border: 1px solid tan;
      border-radius: 8px;
}
</style>


<div style="margin:auto; width:720px; height:480px;background: url('https://pic.imgdb.cn/item/61fe37b92ab3f51d917c82ac.jpg') no-repeat center/cover;">
      
      <div id="mainBox" style="left:10px; top:10px;">
            <input id="mbtn" type="button" value="播放" />
            <input id="bar" type="range" value="0" />
            <div id="per"></div>
      </div>
      
</div>

<script language="javascript">
//各操作变量
var mbtn = document.getElementById('mbtn');
var bar = document.getElementById('bar');
var per = document.getElementById('per');
var aud = document.createElement('audio');
var barGo = true; //进度操作标识
//audio设定
aud.src ="https://www.joy127.com/url/88063.mp3";
aud.addEventListener('canplaythrough', function() { per.innerHTML = "0"; }, false);
aud.addEventListener('ended', iplay(0), true);
aud.addEventListener('timeupdate', barVal, true);
aud.autoplay = "autoplay";
aud.loop = "loop";
mbtn.value = aud.autoplay ? "暂停" : "播放";
// 播放进度
function barVal(){
      if(barGo){ // 若滑块无认为操作：指示播放进度
            var jindu = Math.ceil(100*aud.currentTime/aud.duration);
            bar.value = jindu;
            per.innerHTML = jindu + "%";
      }
}

function iplay(flag){ //播放暂停及按钮状态
      if(flag==1){
            aud.paused ? (aud.play(), mbtn.value="暂停") : (aud.pause(), mbtn.value="播放");
      }else{
            aud.loop ? mbtn.value = "暂停" : mbtn.value = "播放";
      }
}
//滑块鼠标按下：尚未考虑左右键
bar.onmousedown = function() { barGo = false; }
//滑块鼠标松开：尚未考虑左右键
bar.onmouseup=function(){
      var x = bar.value*aud.duration/100;
      aud.currentTime = x;
      barGo = true;
}
//按钮按下
mbtn.onclick = function(){ iplay(1); }

</script>

马黑黑 · 发表于 2022-2-5 23:09

加林森 · 发表于 2022-2-5 23:24

谢谢老黑指导！

马黑黑 · 发表于 2022-2-6 08:32

加林森发表于 2022-2-5 23:24
谢谢老黑指导！

弄清三种代码块的组织方式：CSS、HTML、JS。然后，自己的代码和所引用的代码要结合为一体，不要东拉西扯。接着，非常重要的——

同时搞清楚自己的目的是什么、怎么实现：

一、目的：发个图片，图片上摆放一个播放器；

二、实现思路：

第一种可能：图片做成div的背景图片，div上放置播放器。此时图片是父div的组成部分，图片可以视为是容器（其实是容器的装饰部分），播放器可以放在它的上面。为了好看，可以用定位调节播放器的位置；

第二种可能：在一个div上放置图片和播放器。此时图片和播放器是并列关系，不论此时HTML代码流中播放器在图片之前还是之后，播放器都不可能置于图片之上，这时，需要对播放器定位到合适的位置——就是改变它的 left 和 top 值。

应该还是其他实现方式。

不论哪一种实现方式，播放器总是要放到我们需要的地方，而播放器原有的一些CSS样式设置不一定符合定位要求或对定位产生不便的影响，我们就应对之动手，例如本例中所用到的播放器，初始设置了一个 margin: auto 属性，此属性令对象水平居中，从居中的位置挪到左边或右边，不好把握移动的距离，所以把播放器原生CSS的这一句拿掉，这样它就乖乖地待在它自然的代码流所对应的位置，我们对它定位调整就变得格外容易了；再例如，假设我们所引用的对象（按钮、播放器等）没有做 position 定义，那么，所有的 left、top 等定位都将无效，若此，我们就需要对对象的原生CSS动手：给它加入 position 属性。