作业—我睡在你眼睛的沙漠里（按钮学习）

红影发表于 2022-1-17 13:25

<div style="position: relative; LEFT: -200px; width:1026px;TOP: 120px; border:solid 1px 000;">
<img src="https://pic.imgdb.cn/item/61e439062ab3f51d91709901.jpg">
</div><BR><BR><BR>
<BR><BR><BR>

<style type="text/css">
.picBtn {
   width: 32px;
   height: 32px;
   border: none;
   border-radius: 8px;
   background: transparent url('https://pic.imgdb.cn/item/61e430692ab3f51d916a100c.png') no-repeat;
   cursor: pointer;
   outline: none;
   box-shadow: 1px 1px 2px 1px rgba(0,0,0,.25);
}

.picBtn:hover {
   opacity: 0.95;
   box-shadow: 1px 1px 2px 2px rgba(0,0,255,.3);
}

#picBtn:active {
   opacity: 0.8;
   box-shadow: 0px 1px 1px 1px rgba(0,0,255,.5);
}

</style>

<div style="position:relative;top:-140px;left: 80px">
<div style="position: relative;">
<p><audio id="music" src="https://www.80wp.com/wj/30567/699e232f0afff874eed24fa822782b70.mp3" loop="loop" autoplay="autoplay" ></audio><br> </p>
<button id="picBtn" class="picBtn"></button>

</div>
<script language="javascript">

var mu = document.getElementById('music');
var btn = document.getElementById('picBtn');

btn.onclick = function(){
   mu.paused ? (mu.play(), btn.style.background="url

('https://pic.imgdb.cn/item/61e430692ab3f51d916a100c.png')") : (mu.pause(), btn.style.background="url

('https://pic.imgdb.cn/item/61e4301b2ab3f51d9169d5eb.png')");
}

mu.addEventListener("ended", function(){
   btn.style.background="url('https://pic.imgdb.cn/item/61e4301b2ab3f51d9169d5eb.png')";
})

</script>

<body>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,hight=device-hight,minimum-scale=1.0,maximum-scale=1.0,ser-

scalable=none"/>
<title></title>

<DIV style="LEFT: -20px; POSITION: absolute; TOP: -60px">
<marquee style="WIDTH: 88px; HEIGHT: 60px" scrollamount="2" direction="left" >
<div align="left" ><br />
</div >

<center >
<p ><font color="#ffffff" size="2" >
我睡在你眼睛的沙漠里
</body>
</html>    </div>
</div>

红影发表于 2022-1-17 13:26

发现按钮按了没反应了，呵呵，就先让它自动播放吧。否则按不出音乐来了{:4_173:}

马黑黑 发表于 2022-1-17 13:46

红影发表于 2022-1-17 13:26
发现按钮按了没反应了，呵呵，就先让它自动播放吧。否则按不出音乐来了
我看了下代码，有两个错误：

第一，两个 div 没有结束符 </div>，你必须在最后加上 </div></div>；
第二，你的代码中第二行多了一个 <body>，估计是在本地写代码时写在了它的上面，这是不可以的，帖子里要删掉它。记好：所以的要显示给访客看的东东代码必须写在 <body>和</body>之间。

马黑黑 发表于 2022-1-17 13:47

两个div结束符可以加载最后，也可以加载 JS 代码开始的上一行（建议）

红影发表于 2022-1-17 14:05

马黑黑发表于 2022-1-17 13:46
我看了下代码，有两个错误：

第一，两个 div 没有结束符，你必须在最后加上；

改了，按钮还是按不动{:4_173:}

马黑黑 发表于 2022-1-17 14:21

红影发表于 2022-1-17 14:05
改了，按钮还是按不动

我再看了看，才发现是折行问题导致的，代码中有些地方是不可以折行的，有些可以。折行不是人为的，就是编辑器弄的。注意，编写代码最好不要让微软记事本自动折行，Emeditor没有关系。我把代码重新组织了一下：
<style type="text/css">
.picBtn {
   width: 32px;
   height: 32px;
   border: none;
   border-radius: 8px;
   background: transparent url('https://pic.imgdb.cn/item/61e430692ab3f51d916a100c.png') no-repeat;
   cursor: pointer;
   outline: none;
   box-shadow: 1px 1px 2px 1px rgba(0,0,0,.25);
}

.picBtn:hover {
   opacity: 0.95;
   box-shadow: 1px 1px 2px 2px rgba(0,0,255,.3);
}

#picBtn:active {
   opacity: 0.8;
   box-shadow: 0px 1px 1px 1px rgba(0,0,255,.5);
}

</style>

<div style="position:relative;top:-140px;left: -280px">
<div style="position: relative;">
<p><audio id="music" src="https://www.80wp.com/wj/30567/699e232f0afff874eed24fa822782b70.mp3" loop="loop" autoplay="autoplay" ></audio><br> </p>
<button id="picBtn" class="picBtn"></button>

</div>

红影发表于 2022-1-17 14:27

马黑黑发表于 2022-1-17 14:21
我再看了看，才发现是折行问题导致的，代码中有些地方是不可以折行的，有些可以。折行不是人为的，就是编 ...

哦哦，你说的折行就是自动换行吧，原来这个也会有影响。明白了。辛苦黑黑{:4_187:}

马黑黑 发表于 2022-1-17 14:28

红影发表于 2022-1-17 14:27
哦哦，你说的折行就是自动换行吧，原来这个也会有影响。明白了。辛苦黑黑

这个怎么说呢，win7的记事本会这样，我专门试过的。

马黑黑 发表于 2022-1-17 14:30

win7的记事本自动换行是可能会将它自动换行的换行符带进目标环境

红影发表于 2022-1-17 14:46

马黑黑发表于 2022-1-17 14:30
win7的记事本自动换行是可能会将它自动换行的换行符带进目标环境

嗯嗯，带入换行符，怪不得会让代码出问题。很多东西看不见摸不着，却是暗中起着作用。

马黑黑 发表于 2022-1-17 14:47

红影发表于 2022-1-17 14:46
嗯嗯，带入换行符，怪不得会让代码出问题。很多东西看不见摸不着，却是暗中起着作用。

还有一个问题：按下按钮按钮图样没响应，不变换。我再查原因。

红影发表于 2022-1-17 14:47

马黑黑发表于 2022-1-17 14:28
这个怎么说呢，win7的记事本会这样，我专门试过的。

把你的那段代码替换进去了，按钮还是有问题，估计我这样胡乱拼接的代码有东西和语句冲突了。

马黑黑 发表于 2022-1-17 15:01

红影发表于 2022-1-17 14:47
把你的那段代码替换进去了，按钮还是有问题，估计我这样胡乱拼接的代码有东西和语句冲突了。

主要是代码要分开，CSS的合放一块，接着是HTML，再接着才是 JS，按这个顺序。

另外，JS的任何改动都要注意，小小的问题都会引发不正常的现象发生。像不能换按钮，我查看了，还是记事本自动换行带来的，我取消这些自动换行时，没注意他还有一个空格，就是JS代码中 url(...) 变成了 url (...)，结果JS不识别图片地址。

强烈建议不要使用微软的记事本写代码，它不专业。

完整的代码放在下楼，你再试试。

马黑黑 发表于 2022-1-17 15:02

修正的完整代码：
<style type="text/css">
.picBtn {
   width: 32px;
   height: 32px;
   border: none;
   border-radius: 8px;
   background: transparent url('https://pic.imgdb.cn/item/61e430692ab3f51d916a100c.png') no-repeat;
   cursor: pointer;
   outline: none;
   box-shadow: 1px 1px 2px 1px rgba(0,0,0,.25);
}

.picBtn:hover {
   opacity: 0.95;
   box-shadow: 1px 1px 2px 2px rgba(0,0,255,.3);
}

#picBtn:active {
   opacity: 0.8;
   box-shadow: 0px 1px 1px 1px rgba(0,0,255,.5);
}

</style>

<div style="position:relative;top:-140px;left: -280px;">
<div style="position: relative;">
<p><audio id="music" src="https://www.80wp.com/wj/30567/699e232f0afff874eed24fa822782b70.mp3" loop="loop" autoplay="autoplay" ></audio><br> </p>
<button id="picBtn" class="picBtn"></button>
</div>
</div>

<script language="javascript">

var mu = document.getElementById('music');
var btn = document.getElementById('picBtn');

btn.onclick = function(){
   mu.paused ? (mu.play(), btn.style.background="url('https://pic.imgdb.cn/item/61e430692ab3f51d916a100c.png')") : (mu.pause(), btn.style.background="url('https://pic.imgdb.cn/item/61e4301b2ab3f51d9169d5eb.png')");
}

mu.addEventListener("ended", function(){
   btn.style.background="url('https://pic.imgdb.cn/item/61e4301b2ab3f51d9169d5eb.png')";
})

</script>

马黑黑 发表于 2022-1-17 15:46

@红影前面没有理清帖子的思路，有错漏。研究了一下，弄懂方向后，再整理一下代码，这样应该可以了：<style type="text/css">
.picBtn {
   width: 32px;
   height: 32px;
   border: none;
   border-radius: 8px;
   background: transparent url('https://pic.imgdb.cn/item/61e430692ab3f51d916a100c.png') no-repeat;
   cursor: pointer;
   outline: none;
   box-shadow: 1px 1px 2px 1px rgba(0,0,0,.25);
}

.picBtn:hover {
   opacity: 0.95;
   box-shadow: 1px 1px 2px 2px rgba(0,0,255,.3);
}

#picBtn:active {
   opacity: 0.8;
   box-shadow: 0px 1px 1px 1px rgba(0,0,255,.5);
}

</style>

<div style="position: relative; left:-200px; width:1026px;text-align:center;">
<img alt="" src="https://pic.imgdb.cn/item/61e439062ab3f51d91709901.jpg" style="box-shadow:1px 1px 2px #666; border:solid 1px #000;" />
<div style="position:absolute; width:200px; left:100px; top: 420px; text-align:center;">
<marqueescrollamount="2" direction="left" >我睡在你眼睛的沙漠里</marquee>
<p><audio id="music" src="https://www.80wp.com/wj/30567/699e232f0afff874eed24fa822782b70.mp3" loop="loop" autoplay="autoplay" ></audio><br> </p>
<button id="picBtn" class="picBtn"></button>
</div>
</div>

<script language="javascript">

var mu = document.getElementById('music');
var btn = document.getElementById('picBtn');

btn.onclick = function(){
   mu.paused ? (mu.play(), btn.style.background="url('https://pic.imgdb.cn/item/61e430692ab3f51d916a100c.png')") : (mu.pause(), btn.style.background="url('https://pic.imgdb.cn/item/61e4301b2ab3f51d9169d5eb.png')");
}

mu.addEventListener("ended", function(){
   btn.style.background="url('https://pic.imgdb.cn/item/61e4301b2ab3f51d9169d5eb.png')";
})

</script>

马黑黑 发表于 2022-1-17 15:49

@红影效果在这：https://www.huachaowang.com/forum.php?mod=viewthread&tid=56143
还可以左移一点点

红影发表于 2022-1-17 16:19

马黑黑发表于 2022-1-17 15:01
主要是代码要分开，CSS的合放一块，接着是HTML，再接着才是 JS，按这个顺序。

另外，JS的任何改动都要 ...

“主要是代码要分开，CSS的合放一块，接着是HTML，再接着才是 JS，按这个顺序。”

嗯嗯，记下了，不能混乱排放。谢谢黑黑，辛苦了{:4_187:}

红影发表于 2022-1-17 16:22

马黑黑发表于 2022-1-17 15:46
@红影前面没有理清帖子的思路，有错漏。研究了一下，弄懂方向后，再整理一下代码，这样应该可以了：

这个弄得非常清晰。学习了。下回要在图片里使用按钮就用这个做标准模板了{:4_178:}

红影发表于 2022-1-17 16:23

马黑黑发表于 2022-1-17 15:49
@红影效果在这：https://www.huachaowang.com/forum.php?mod=viewthread&tid=56143
还可以左移一点点

不用移了，已经非常完美了，按钮在那个帖子里能按了{:4_178:}

马黑黑 发表于 2022-1-17 17:42

红影发表于 2022-1-17 16:23
不用移了，已经非常完美了，按钮在那个帖子里能按了

{:4_191:}

页: [1] 2

花潮论坛's Archiver

作业—我睡在你眼睛的沙漠里（按钮学习）