开个作业贴 - 第2页 - 马黑黑教程专版 - 花潮论坛

绿叶清舟 发表于 2022-1-17 20:14

本帖最后由绿叶清舟于 2022-1-17 22:04 编辑 <br /><br /><style type="text/css">
.rbox { margin: 0 auto; width: 640px; min-height: 426px; transform-style: preserve-3d; transition: 1s; }
.rbox:hover { transform: rotateY(180deg); cursor: pointer; }
.fbox, .bbox { width: 639px; height: 426px; position: absolute; backface-visibility: hidden; }
.fbox { background: transparent url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.mp.itc.cn%2Fupload%2F20160419%2F0348aed06c9645be9935997eb947ac90_th.jpg&refer=http%3A%2F%2Fimg.mp.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1645013484&t=0a1d0ffb75df4689a0767d735af5792f') no-repeat; }
.bbox { background: #aaa; transform: rotateY(180deg); padding:10px; font-size: 1em; }
.bbox h2, p { padding: 6px; text-align:center; }

.btnDiv {
margin: 0 auto;
   position: relative;
   width: 32px;
   height: 32px;
   border: none;
   background: gray;
   border-radius: 20%;
   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>

<div class="rbox">
<div class="fbox"></div>
<div class="bbox">
<h2>茶界二</h2>
<div style=" column-count: 2; ">

茶界2
歌手：巫娜<br>
发行时间：2016-05-01<br>
发行公司：龙源音乐<br>
专辑介绍
<br>听琴事茶天人合一寂静欢喜无非般若<br>

《茶界》第2辑中，能深深地感受茶语、琴音与内心的的浑然一体，“天人合一”、“清微淡远”的茶琴融合境界。悠悠琴曲带来的意境，是伴香而居，听琴而卧，邀三五知己，远离尘嚣，品一盏香茗，听一曲琴音，拾一抹心情，慢慢沉淀心情。<br><br><br>
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=330 src="音乐地址"></iframe>
</div>

<div id="btnDiv" class="btnDiv">
<div id="btn-play" class="btn-play"></div>
<div id="btn-pause" class="btn-pause"></div>
</div>
</div>
</div>

<script language="javascript">

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>

绿叶清舟 发表于 2022-1-17 21:16

绿叶清舟 发表于 2022-1-17 21:27

本帖最后由绿叶清舟于 2022-1-17 22:13 编辑 <br /><br /><style type="text/css">
.mnBox {
   margin: 0 auto;
   padding: 35px;
   width: 720px;
   border: none;
   border-top: 6px inset #000;/* 顶部边框样式*/
   border-radius: 10px;
   background: #666666;
}
.ctBox {
   margin: 0;
   padding: 10px;
   background: #BBBBBB;
   min-height: 300px;
   border-radius: 10px;
   box-shadow: 1px 3px 2px 2px rgba(4,4,4,.6);
}

.ctBox p,img, h2,button { text-align:center; }

.picBtn {
      width: 40px;
   height: 40px;
   line-height: 40px;
   color: olive;
   background: transparent;
   border: 0;
   border-radius: 25%;
   box-shadow: 2px 2px 3px 1px rgba(0,0,0,.28);
   font-size: 18px;
   text-align: center;
}

.picBtn:hover {
   cursor: pointer;
   box-shadow: 2px 3px 4px 2px rgba(0,0,0,.28);
   color: black;
}

.picBtn:active {
   transform: scale(0.98);
   box-shadow: 1px 2px 2px 0px rgba(0,0,0,.28);
   color: red;
}

</style>

<div class="mnBox">
   <div class="ctBox">
            <p><img alt="" src=""图片地址 /></p>
            <h2 style="text-align:center;">帖子标题</h2>
            <pre>
            帖子内容行一
            帖子内容行二
            每行不要太长
            注意缩进
            注意分行（不要HTML标签)
            </pre>
            <p><audio id="music" src="http://music.163.com/song/media/outer/url?id=5252251.mp3"></audio></p>


            <p>制作者年月日</p>
   </div>
</div>

绿叶清舟 发表于 2022-1-17 22:36

本帖最后由绿叶清舟于 2022-2-26 21:46 编辑 <br /><br /><style type="text/css">
.mnBox {
   margin: 0 auto;
   padding: 35px;
   width: 720px;
   border: none;
   border-top: 6px inset #CCCCCC;/* 顶部边框样式*/
   border-radius: 10px;
   background: #666666;
}
.ctBox {
   margin: 0;
   padding: 10px;
   background: #BBBBBB;
   min-height: 300px;
   border-radius: 10px;
   box-shadow: 1px 3px 2px 2px rgba(4,4,4,.6);
}

.ctBox p,img, h2,button { text-align:center; }

.picBtn {
      width: 40px;
   height: 40px;
   line-height: 40px;
   color: #BBBBBB;
   background: transparent;
   border: 0;
   border-radius: 25%;
   box-shadow: 2px 2px 3px 1px rgba(0,0,0,.28);
   font-size: 18px;
   text-align: center;
}

.picBtn:hover {
   cursor: pointer;
   box-shadow: 2px 3px 4px 2px rgba(0,0,0,.28);
   color: black;
}

.picBtn:active {
   transform: scale(0.98);
   box-shadow: 1px 2px 2px 0px rgba(0,0,0,.28);
   color: red;
}

.picBtn-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;
}

.picBtn-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>

<div class="mnBox">
   <div class="ctBox">
            <p><img alt="" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fba4be761dd8c4841c9d19ba4ad2120a15e2f1ca31c628-8J2Mx2_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1645019445&t=667b72492703650a6c001fd1eef6969b"></p>
            <h2 style="text-align:center;">咖啡-张学友</h2>
            <pre>
            作词 : 何启弘
            作曲 : 黄韵玲
            编曲 : 吴庆隆
            制作人 : 欧丁玉
            太浓了吧否则怎会苦的说不出话
            每次都一个人在自问自答
            我们的爱到底还在吗
            已经淡了吧多放些糖也很难有变化
            不如喝完这杯就各自回家
            别坐在对面欣赏我的挣扎
            一场失败的爱情像个笑话
            热得时候心乱如麻
            冷了以后看见自己够傻
            人怎么会如此容易无法自拔
            一场无味的爱情像个谎话
            甜的时候只相信它
            苦了以后每一句都可怕
            人怎么会如此难以了无牵挂
            </pre>
            <p><audioid="ymusic" src="http://music.163.com/song/media/outer/url?id=5252251.mp3" type="audio/mpeg" hidden="true"></audio></p>
            <p><button id="picBtn" class="picBtn">▶</button></p>

   </div>
</div>

<script language="javascript">

var mu = document.getElementById('ymusic');
var btn = document.getElementById('picBtn');
var playbtn = document.getElementById('picBtn-play');
var pausebtn = document.getElementById('picBtn-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>

马黑黑 发表于 2022-1-19 08:57

还有咖啡

依蘩发表于 2022-1-19 14:39

参观一下粥的作业{:5_117:}

绿叶清舟 发表于 2022-1-19 20:08

依蘩发表于 2022-1-19 14:39
参观一下粥的作业

依依来了啊{:4_179:}想你呢

加林森 发表于 2022-1-19 20:17

厉害厉害，谢谢清舟啊！{:4_171:}

依蘩发表于 2022-1-20 09:37

绿叶清舟发表于 2022-1-19 20:08
依依来了啊想你呢

刚知道这个地方，好久好久没见你们了，嘬一下{:4_185:}

马黑黑 发表于 2022-1-20 11:07

依蘩发表于 2022-1-19 14:39
参观一下粥的作业

听说依蘩发财了，也不见请客

绿叶清舟 发表于 2022-1-20 17:22

依蘩发表于 2022-1-20 09:37
刚知道这个地方，好久好久没见你们了，嘬一下

{:4_185:}嘬嘬，看到这字就想起当年玩疯的时候了

马黑黑 发表于 2022-1-20 19:33

绿叶清舟发表于 2022-1-20 17:22
嘬嘬，看到这字就想起当年玩疯的时候了

记忆复活了？

绿叶清舟 发表于 2022-1-27 19:43

本帖最后由马黑黑于 2022-1-28 12:13 编辑 <br /><br />绿叶清舟发表于 2022-1-20 17:22
嘬嘬，看到这字就想起当年玩疯的时候了
记忆复活了？

绿叶清舟 发表于 2022-1-27 19:44

本帖最后由马黑黑于 2022-1-28 12:20 编辑 <br /><br /><style type="text/css">

.paBox { /* 父框 */
   margin: 10px auto;
   width: 1024px;
   height: 640px;
   position: relative;
   background: #000 url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fci.xiaohongshu.com%2Fb0e43ff3-d4fe-5587-d469-3f61fb61d5d8%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fci.xiaohongshu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1645875587&t=8d45061370adce4d1cd89cc08e128971') no-repeat;
   left: -210px;
}

/* 父框和 .soBox 的伪元素共同样式 */
.paBox::before, .paBox::after, .soBox::before, .soBox::after {
   content: "";
   position: absolute;
   width: 600px; height: 2px;
   background: silver;
   left: 55px; top: 220px;
   opacity: 0.1;
   transform-origin: center center;
}
/* 父框和 .soBox 的伪元素各自的动画样式 */
.paBox::before { animation: fly 2s linear infinite alternate;}
.paBox::after { height: 4px; animation: fly 5s linear infinite;}
.soBox::before { animation: fly 3s linear infinite;}
.soBox::after { height: 5px; animation: fly 1s linear infinite alternate;}

@keyframes fly { 100% { transform: rotate(360deg); } }
</style>

<div id="paBox" class="paBox">
   <div class="soBox"></div>
</div>

绿叶清舟 发表于 2022-1-27 19:44

绿叶清舟 发表于 2022-1-27 19:46

本帖最后由绿叶清舟于 2022-2-28 19:29 编辑 <br /><br /><style type="text/css">
#waiDiv { margin:10px; padding:8px; width:400px; background:#696969; border-radius:10px; box-shadow:2px 2px 4px #000; display:flex; flex-direction:column; position:relative; }
#audDiv { width:100%; display:flex; flex-direction:row; align-items:center; font-size:10px; position: relative; }
#add1 { margin-left: 12px; background:#eee; text-align:center; width:20px; height:20px; line-height:20px; border-radius:50%; cursor:pointer; }
#add1:hover { color: red; }
#mLiDiv { margin-top: 10px; background:#eee; color:#000; min-height:100px; padding:10px; border:1px solid olive; font-size:14px; column-count: 2;}
#mLiDiv a { text-decoration: none; cursor:pointer; }
#mLiDiv a:hover { color:red; }
#prompt { position:absolute; left:200px; top:50px; width:400px; padding:6px 12px; background:silver; font-size:12px; display:none; box-shadow:1px 1px 1px #666; border-radius:2px; }
#prompt input { outline:none; }
#prompt input { margin:4px;padding:4px; width:392px; }
#prompt input { border-radius:4px; cursor:pointer;border:1px solid gray; border-radius:3px; box-shadow: 1px 1px 2px #444; }
#audDiv input, #audDiv input { cursor:pointer; }
#paDiv { margin: auto; width: 220px; display: flex; align-items: center; border: 1px solid olive; border-radius: 8px 0px 8px 0px; background: rgba(0,0,0,.8); box-shadow: 1px 1px 2px #000; position: relative; }
#jindu { position: relative; width: 200px; height: 8px; line-height: 8px; font-size: 10px; color: #eee; text-align: center; background: linear-gradient(90deg, olive, green) no-repeat; background-size: 8px 0px; cursor: pointer; }
#btn-ro { width: 20px; height: 20px; line-height: 20px; font-size: 12px; background: linear-gradient(blue, silver, red); outline:none; color: white; border-radius: 50%; text-align: center; cursor: pointer; animation: rol linear 2s infinite; }
#btn-ro:hover { opacity: 0.8; }
#btn-ro:active { opacity: 1; }
@keyframes rol { to { transform:rotate(360deg); } }
</style>

<div id="waiDiv">
   <div id="audDiv">
            <div id="paDiv">
                     <div id="btn-ro">·</div>
                     <div id="jindu"><div id="jd-go"></div></div>
            </div>
            <input id="muted" type="checkbox" onclick="aud.muted = this.checked ? true : false">静音
            <input id="dqxh" type="radio" name="rad" checked="checked" onclick="howplay()" />单曲
            <input id="lhbf" type="radio" name="rad" onclick="howplay()" />轮播
            <div id="add1">+</div>
   </div>
   <div id="mLiDiv"></div>
   <div id="prompt">
   <div>添歌</div>
            <input type="text" id="mName" placeholder="歌曲名称" /><br />
            <input type="text" id="mUrl" placeholder="歌曲地址" /><br />
            <div style="text-align:center;">
                     <input id="subMe" type="button" value=" 添加 " />
                     <input id="cancelMe" type="button" value=" 算了 " />
            </div>
   </div>
</div>

<script>
//音乐数据注意最后一个结尾不要逗号但前面每一个的结尾都要有逗号
var muAr = [
   ["http://music.163.com/song/media/outer/url?id=5252288.mp3","夜夜夜夜","陈悦"],
   ["http://music.163.com/song/media/outer/url?id=212430.mp3","飘雪"],
   ["http://music.163.com/song/media/outer/url?id=212652.mp3","夜机"],
   ["http://music.163.com/song/media/outer/url?id=4876355.mp3","至少还有你"],
   ["http://music.163.com/song/media/outer/url?id=103778.mp3","爱我你怕了吗"],
   ["http://music.163.com/song/media/outer/url?id=308490.mp3","走过"],
   ["http://music.163.com/song/media/outer/url?id=1920287954.mp3","叶子"],
   ["https://www.kumeiwp.com/sub/filestores/2022/02/27/e927fdfcf8c44afb713a2b56272ffc62.mp3","如果爱下去"],
   ["http://music.163.com/song/media/outer/url?id=28725740.mp3","Asoka Theme"],
];

var btn = document.getElementById('btn-ro');
var jindu = document.getElementById('jindu');
var aud = document.getElementById('myPlayer');
var mLi = document.getElementById('mLiDiv');
var mAdd = document.getElementById('add1');
var prom = document.getElementById('prompt');
var cancelMe = document.getElementById('cancelMe');
var subMe = document.getElementById('subMe');
var dqxh = document.getElementById('dqxh');
var lhbf = document.getElementById('lhbf');
var aud = document.createElement('audio');
aud.loop = true;
var playIdx = 0; //当前播放索引
if(aud.paused) btn.style.animationPlayState="paused";
//写歌单
var str = "";
for(j=0; j<muAr.length; j++) {
   str += (j+1) + ".<a id='list" + j + "' onclick='iPlay(" + j + ")' >" + muAr + "</a><br />";
}
mLi.innerHTML += str;

function iPlay(idx){ //播放函数
   playIdx = idx;
   aud.src = muAr;
   aud.play();
   aud.addEventListener('timeupdate', tmMsg, true);
   aud.addEventListener('ended', function() { btn.style.animationPlayState="paused"; }, true);
   btn.style.animationPlayState="running";
   nameRed(playIdx);
}

function howplay(){ //单曲&轮播处理
   dqxh.checked ? aud.loop = true : (aud.loop = false,playNext(),aud.addEventListener('ended',playNext,false));
   prom.style.display = "none";
}

function playNext(){ //处理下一首
   if(aud.paused) iPlay(playIdx);
   playIdx += 1;
   if(playIdx >= muAr.length) playIdx = 0;
}

function nameRed(){ //歌单着色
   for(k=0;k<muAr.length;k++){
            let listId = "list" + k;
            document.getElementById(listId).style.removeProperty("color");
   }
   listId = "list" + playIdx;
   document.getElementById(listId).style.color = "red";
}

function tmMsg(){ //进度条
   let auT = Math.floor(aud.duration - aud.currentTime);
   let auM = auT / 60;
   let auMs = parseInt(auM);
   if (auMs <10) auMs = "0" + auMs;
   let auS = auT % 60;
   let auSs = Math.round(auS);
   if (auSs < 10) auSs = "0" + auSs;
   let jd = (100*aud.currentTime)/aud.duration;
   if(jd>0) {
            jindu.innerHTML = "- " + auMs +":" + auSs;
            jindu.style.backgroundSize = jd+ "% 8px";
   }
}

jindu.onclick = function(){ //进度控制
   let w = offset(jindu,"left");
   let x = (event.clientX - w) * aud.duration / jindu.clientWidth;
   aud.currentTime = x;
}

function offset(obj,direction){//获取元素总偏移量
   let offsetDir = "offset" + direction.toUpperCase()+direction.substring(1);
   let realNum = obj;
   let positionParent = obj.offsetParent;
   while(positionParent != null){
            realNum += positionParent;
            positionParent = positionParent.offsetParent;
   }
   return realNum;
}

btn.onclick = function(){ //光盘按钮点击事件
   aud.paused ? (aud.play(), btn.style.animationPlayState="running") : (aud.pause(), btn.style.animationPlayState="paused");
}

mAdd.onclick = function(){ prom.style.display = "block"; } //呼出加歌界面
cancelMe.onclick = function(){ prom.style.display = "none"; } //放弃加歌

subMe.onclick = function(){ //加歌并播放新歌
   let uri = document.getElementById('mUrl');
   let name = document.getElementById('mName');
   let tnum = muAr.length;
   let str1 = uri.value.trim();
   let str2 = name.value.trim();
   if(str1 !="" && str2 != ""){
            muAr = ;
            mLi.innerHTML += (tnum+1) + ".<a id='list" + tnum + "' onclick='iPlay(" + tnum + ")' >" + str2 + "</a><br />";
            iPlay(tnum);
            uri.value = "";
            name.value = "";
   }
   prom.style.display = "none";
}
//自动播放（默认播放第一首）
iPlay(playIdx);
</script>

马黑黑 发表于 2022-1-27 23:00

{:4_203:}

马黑黑 发表于 2022-1-27 23:01

绿叶清舟发表于 2022-1-15 21:45
这二竖能不能短些呢

在独立样式里设置

马黑黑 发表于 2022-1-28 11:45

绿叶清舟发表于 2022-1-20 17:22
嘬嘬，看到这字就想起当年玩疯的时候了

这个帖子第二页异常了

马黑黑 发表于 2022-1-28 11:55

https://pic.imgdb.cn/item/61a99bec2ab3f51d9141cdb6.gif

页: 1 [2] 3 4 5

花潮论坛's Archiver