学习开发记2：flex box，script控制音乐

最新推荐文章于 2024-05-21 14:16:07 发布

Ashbravo

最新推荐文章于 2024-05-21 14:16:07 发布

阅读量66

点赞数

分类专栏：开发-前端文章标签：学习

本文链接：https://blog.csdn.net/qq_45773834/article/details/131923313

版权

开发-前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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("https://th.bing.com/th/id/R.a9b7597034e5d717a4c93834a70bc339?rik=nQeIuz%2fXgXselg&riu=http%3a%2f%2f5b0988e595225.cdn.sohucs.com%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="https://zhuanlan.zhihu.com/p/458733175"><strong class="box-green">奥特曼</strong> </a> 都会骑行和踢球哦！</h2>
    <p>大约137亿年前，宇宙诞生。&nbsp;<!-- 空格字符实体 -->
        大约45.5亿年前，地球诞生。&lt;<!-- 大于号字符实体 -->
        2亿年前，海底原人拉贡统治地球&gt;<!-- 小于号字符实体 -->
        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="https://pic1.zhimg.com/80/v2-ba8050e3f3d7b8fe8805958dfa07df60_720w.webp" alt="奥特之王"><h3>奥特之王</h3></li>
                <li><img src="https://pic2.zhimg.com/80/v2-cb04669510bece7605d38f17fde00599_720w.webp" alt="大战怪兽"><h3>大战怪兽</h3></li>        
                <li><img src="https://k.sinaimg.cn/n/sports/transform/283/w650h433/20230722/db04-f479bcda6d71e76c20cd4e5810b8bced.jpg/w700d1q75cms.jpg?by=cms_fixed_width" alt="迈阿密首秀"><h3>迈阿密首秀</h3></li>        
                <li><img src="https://f.sinaimg.cn/sports/transform/762/w500h262/20230722/0510-gif488fe054a987b990d16101f99b5308c3.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);