master

分支 (1)

管理

管理

master

qq-music-player
/
index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <title>QQ音乐播放器-仅播放的静态页面</title>
    <!-- IMPORT CSS -->
    <link rel="stylesheet" href="css/reset.min.css" />
    <link rel="stylesheet" href="css/index.css" />
    <script src="js/prefixfree.min.js" async></script>
  </head>

  <body>
    <div id="app">
      <!-- 头部 -->
      <header class="header-box">
        <div class="base">
          <!-- <div class="cover">
            <img src="" alt="" />
          </div>
          <div class="info">
            <h2 class="title">我的梦 - 华为手机主题曲</h2>
            <h3 class="author">张靓颖</h3>
          </div> -->
        </div>
        <a href="javascript:;" class="player-button"></a>
      </header>

      <!-- 歌词 -->
      <main class="main-box">
        <div class="wrapper">
          <!-- <p class="active">我的梦 (华为手机主题曲) - 张靓颖</p>
          <p>词：王海涛/张靓颖</p>
          <p>曲：Andy Love</p> -->
        </div>
      </main>

      <!-- 尾部 -->
      <footer class="footer-box">
        <div class="bar">
          <span class="time current">00:00</span>
          <div class="progress">
            <div class="already"></div>
          </div>
          <span class="time duration">00:00</span>
        </div>
        <a href="#" class="download">下载这首音乐</a>
      </footer>

      <!-- 其它 -->
      <div class="mark-image"></div>
      <div class="mark-overlay"></div>
      <div class="loading-box">
        <div class="content">
          <img src="images/loading.gif" alt="" />
          <span>奴家正在努力加载中...</span>
        </div>
      </div>
      <audio src="" id="audioBox" preload="metadata"></audio>
    </div>

    <!-- IMPORT JS -->
    <script>
      (function () {
        const app = document.querySelector("#app"),
          HTML = document.documentElement;
        const computed = function computed() {
          let orien = Math.abs(window.orientation);
          if (orien === 90) {
            // 切换到横屏
            alert("横屏体验不佳，请您切换到竖屏");
            app.style.display = "none";
            return;
          }
          // 当前是竖屏
          app.style.display = "block";

          // 计算REM的换算比例
          let deviceW = HTML.clientWidth,
            designW = 375,
            initialRatio = 100;
          if (deviceW > 540) deviceW = 540;
          let currentRatio = (deviceW / designW) * initialRatio;
          HTML.style.fontSize = currentRatio + "px";
        };
        computed();
        window.addEventListener("resize", computed);
        // 基于 resize 代替 orientationchange 事件：这样可以适配模拟器中，设备的切换场景
      })();
    </script>
    <script src="js/api.js"></script>
    <script src="js/fastclick.js"></script>
    <script src="js/index.js"></script>
  </body>
</html>