音乐"/>
学习开发记2：flex box，script控制音乐
float，flex box，script控制音乐。学习为主：
html代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>角色注册</title><link rel="stylesheet" href="./demo.css"><!-- 引入外部样式表 --><!-- 内部样式类选择器,用来设置css样式 --><style>/* CSS书写顺序：盒子模型属性，文字属性，阴影圆角等 *//* 清楚默认样式 */* {margin: 0;padding: 0;box-sizing: border-box;}/* 去掉列表的项目符号 */ul li {list-style: none;}body{display: flex;flex-direction: column;justify-content: center;align-items: center;min-height: 100vh; /* 设置最小高度为视口高度，以确保内容垂直居中 */margin: 0; /* 去除body的默认边距 */background:black url(./images/宇宙.jpg) no-repeat center top/100% fixed;}.red{color: red;}.size1{font-size: 18px;}.box-green{width: 50px;height: 200px;background-color: aquamarine;}#brown{color: brown;}h1{text-align: center;font-weight: 800;font-family: 微软雅黑;color: rgba(0, 0, 0, 1);}p {text-indent: 2em;font-size: 16px;line-height: 1.5;color:rgb(0, 0, 0);}div1{text-decoration: underline;font:italic 500 20px/1.5 楷体;color:rgb(207, 24, 24);}a{text-decoration: none;}a:visited{color:yellowgreen;} a:hover{color:red} ul li:nth-child(-n+3){background-color: green;}/* 结构伪类选择器：按公式选择 */.search{width: 600px;height: 46px;background-color:blanchedalmond;padding: 10px;padding-left: 20px;/* padding写法：四值 上 右 下 左，三值 上 左右 下，二值 上下 左右*/border: 2px dotted #aaa;border-bottom: 2px solid #000;margin: 20px auto 10px;/* 三值写法，所有auto版心居中 */box-sizing: border-box;/* margin、padding会撑大盒子，为不手动减法，用内减模式 */overflow: hidden;/* 溢出文字隐藏,滚动则hidden或scroll *//* 同时father级加overflow hidden还能解决father和son级盒子塌陷问题 */border-radius: 20px ;/* 圆角 */box-shadow: 2px 5px 10px 1px blue;/*若内阴影则加inset*/}/* 盒子内边距、外框线、外边距 */.search span{line-height: 10px;}/*行高*/#img {width: 200px;height: 200px;/* border-radius: 100px; */border-radius: 50%;/* 最大值是50%。超过50%没有效果 */}.news .bd li h3{/* 在无序列表开头设定小标志 */height: 25px;padding-left: 25px;background-image: url(./images/奥特图标.png);background-size: 25px; /* 设置背景图片的尺寸为25像素 */background-repeat: no-repeat;background-position: 0 center;}.box {display: flex;flex-direction: row;/* 主轴方向row colum */flex-wrap: wrap;/* 换行 */justify-content: space-evenly;/* 主轴对齐方式，对单行不生效 */align-items: center;/* 副轴居中 *//* 控制单个时用align-self并单独写出 */width: 1180px;height: 200px;border: 1px solid #000;border-radius: 20px ;background-color: black;}.box div {width: 200px;height: 80px;background-color: rgb(20, 227, 241);background-image: url(".a9b7597034e5d717a4c93834a70bc339?rik=nQeIuz%2fXgXselg&riu=http%3a%2f%2f5b0988e595225.cdn.sohucs%2fimages%2f20191017%2f775841c8bc484969ae8cd3cd8fa09c51.jpeg&ehk=ZffNJ2wGYvNWc9FZusbDKt9PHaxls8M8zl5nfwdy0fU%3d&risl=&pid=ImgRaw&r=0"); /* 设置背景图片 */background-size: cover; /* 以尽可能大的尺寸填充div，并保持图片的纵横比 */background-position: center; /* 将背景图片在div中居中显示 */background-repeat: no-repeat; /* 防止背景图片平铺 */border-radius: 10px ;padding: 10px;}.box div h4{font-size: large;color: beige;}/* 播放器容器样式 */.music-player-container {display: flex;align-items: center;gap: 10px;background-color: #333;padding: 10px;border-radius: 5px;box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);}/* 播放按钮样式 */.play-button {background-color: #ff0000;color: #ffffff;padding: 10px 20px;border: none;border-radius: 5px;font-size: 16px;cursor: pointer;}/* 停止按钮样式 */.stop-button {background-color: #ff0000;color: #ffffff;padding: 10px 20px;border: none;border-radius: 5px;font-size: 16px;cursor: pointer;}/* 音量滑块样式 */.volume-slider {width: 100px;}</style> <!-- id选择器#，配合js使用 --><!-- 同一个id在一个页面只能使用一次 --><!-- 伪选择器，任何标签名或类：hover鼠标悬停状态。link访问前，visited访问后，active激活 --><!-- 选择器优先级，范围越大优先级越低,继承的权重最低：通配符<标签<类<id<行内<！important -->
</head><body><img id="img" src="./images/奥特图标.png" alt="奥特图标"><h1>奥特曼角色注册</h1><hr><!-- <audio id="bgAudio" autoplay loop muted><source src="./musics/ウルトラの奇跡 (奥特奇迹) - Project DMM.mp3" type="audio/mpeg"></audio><button id="stopButton">停止音乐</button> --><div class="music-player-container"><button class="play-button" id="playButton">播放音乐</button><button class="stop-button" id="stopButton">停止音乐</button><input type="range" class="volume-slider" id="volumeSlider" min="0" max="1" step="0.1" value="1"></div><audio id="bgAudio" loop><source src="./musics/ウルトラの奇跡 (奥特奇迹) - Project DMM.mp3" type="audio/mpeg">您的浏览器不支持音频播放。</audio><div class="search"><span>搜索框啊假的哈哈哈~</span></div><div class="box"><div><h4><img src="" alt="">奥特曼</h4></div><div><h4>佐菲</h4></div><div><h4>赛文</h4></div><div><h4>杰克</h4></div><div><h4>艾斯</h4></div><div><h4>泰罗</h4></div><div><h4>雷欧</h4></div><div><h4>阿斯特拉</h4></div><div><h4>爱迪</h4></div><div><h4>梦比优斯</h4></div></div><h2>每个<a href=""><strong class="box-green">奥特曼</strong> </a> 都会骑行和踢球哦！</h2><p>大约137亿年前，宇宙诞生。 <!-- 空格字符实体 -->大约45.5亿年前，地球诞生。<<!-- 大于号字符实体 -->2亿年前，海底原人拉贡统治地球><!-- 小于号字符实体 -->1亿5千万年前，地球上古代恐龙哥莫拉龙繁盛一时。6千5百万年前，地球上绝大多数恐龙灭绝。40万年前，M78星云诞生出优秀的文明，因为没有再发生任何的犯罪事件，M78星云自此废止了警察组织，建立起真正的理想国度 “光之国”。30万年以前，皮克 (也就是后来的奥特之王) 出生，出身地未知。(奥特之王是奥特一族传说中的超人，是宇宙守护者，30万岁以上的年龄让他见证了光之国诞生以来的所有历史，深受光之国爱戴，是<div1>光之国</div1> 的精神领袖。)</p><!-- Emmet缩写:p.box .box p#box div+p div>p;;; div{w500+h200+bgc} --><table border="1"><tr><th class="red size1">梦比优斯</th><th><img src="./images/梦比优斯.gif" alt="梦比优斯图片" title="梦比优斯" height="500"></th></tr><tr><th id="brown" class="size1">雷欧</th><th><img src="./images/雷欧.jpg" alt="雷欧图片" title="雷欧" height="500"></th></tr></table><form action=""><!-- form表单区域：action是发送数据的地址 --><!-- 增大点击范围，提升用户体验：lable --><label style="color: tomato;font-size: 22px;">性别：</label><!-- 配合js引入样式表 --><input type="radio" name="gender" id="male"><label for="male">英雄</label><!-- <input type="radio" name="gender" id="female"><label for="female">女神</label>下行为暴力写法二者皆可 --><label><input type="radio" name="gender" checked>女神</label><hr><!-- 加同样的name属性可以实现单选 --><!-- 按钮：button：submit reset button --><label>用户名：</label><input type="text" placeholder="一行用span,独占用div"><br><label>密码：</label><input type="password"><br><label>确认密码：</label><input type="password"><br><label>喜欢的奥特曼：</label><input type="checkbox"> 泰罗<input type="checkbox" checked> 梦比优斯<input type="checkbox" checked> 雷欧<br><label>确认你的角色</label><select><option>梦比优斯</option><option>雷欧</option></select><br><input type="checkbox"><label>已阅读并同意以下协议</label><ol><li><a href="#">《用户服务协议》</a></li><li><a href="#">隐私政策</a></li></ol><!-- 未确定的url填# --><br><button type="submit">提交</button><button type="reset">重置</button></form><!-- ul无序列表 --><h2>奥特资讯</h2><div class="news"><div class="bd"><ul><li><img src=".webp" alt="奥特之王"><h3>奥特之王</h3></li><li><img src=".webp" alt="大战怪兽"><h3>大战怪兽</h3></li> <li><img src=".jpg/w700d1q75cms.jpg?by=cms_fixed_width" alt="迈阿密首秀"><h3>迈阿密首秀</h3></li> <li><img src=".gif" alt="任意球破门"><h3>任意球破门</h3></li> </ul></div></div><div class="hero"><div class="left"></div><div class="right"><ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul></div></div><script src="demo.js"></script>
</body>
</html>js代码
console.log("欢迎到访M7星云")//在控制台输出信息const audio = document.getElementById('bgAudio');
const playButton = document.getElementById('playButton');
const stopButton = document.getElementById('stopButton');
const volumeSlider = document.getElementById('volumeSlider');
let isPlaying = false; // 用于标记音乐是否正在播放// 播放音频
function playAudio() {audio.play();isPlaying = true;
}// 暂停音频
function pauseAudio() {audio.pause();isPlaying = false;
}// 停止音频
function stopAudio() {pauseAudio();audio.currentTime = 0;
}// 音量控制
function setVolume() {audio.volume = volumeSlider.value;
}// 播放按钮点击事件
playButton.addEventListener('click', function() {if (!isPlaying) {playAudio();}
});// 停止按钮点击事件
stopButton.addEventListener('click', function() {stopAudio();
});// 音量滑块事件
volumeSlider.addEventListener('input', setVolume);// 页面加载完成后播放音频
window.addEventListener('load', playAudio);
更多推荐
学习开发记2：flex box,script控制音乐
发布评论