队长新帖子代码

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

本帖最后由马黑黑于 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 { color: olive; font-size: 10px; width:40px;}
#mainBox input { outline: none; cursor: pointer; font-size: 10px; }
#mainBox input {
   width: 100px;
   background: red;
}
#mainBox input {
   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

谢谢老黑指导！{:4_191:}

马黑黑 发表于 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 属性。

加林森 发表于 2022-2-6 10:57

马黑黑发表于 2022-2-6 08:32
弄清三种代码块的组织方式：CSS、HTML、JS。然后，自己的代码和所引用的代码要结合为一体，不要东拉西扯 ...

谢谢老黑的讲解。{:4_190:}

红影发表于 2022-2-6 12:29

这样一调整，播放器终于可以按到图片上面了{:4_187:}

红影发表于 2022-2-6 12:31

“第一种可能：图片做成div的背景图片，div上放置播放器。此时图片是父div的组成部分，图片可以视为是容器（其实是容器的装饰部分），播放器可以放在它的上面。”

感觉这种更方便呢。

加林森 发表于 2022-2-6 12:44

再来看看老黑的教程。

大猫咪 发表于 2022-2-6 13:09

必须学习，谢谢老黑，{:4_190:}{:4_204:}

马黑黑 发表于 2022-2-6 14:18

大猫咪发表于 2022-2-6 13:09
必须学习，谢谢老黑，

{:5_108:}

小辣椒 发表于 2022-2-6 16:25

原来队长的这个帖源码在这样啊，黑黑强大，小辣椒一起学习了{:4_187:}

马黑黑 发表于 2022-2-6 20:37

小辣椒发表于 2022-2-6 16:25
原来队长的这个帖源码在这样啊，黑黑强大，小辣椒一起学习了

{:4_190:}

页: [1]

花潮论坛's Archiver

队长新帖子代码