zoukankan      html  css  js  c++  java
  • web常见之音乐播放器

    代码来源于:这位Github小伙伴,我只负责解说!

    效果图如下:

     

    先上HTML代码

    源码:

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8" />
        <meta name="referrer" content="no-referrer">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title>与喜欢的音乐不期而遇</title>
        <link rel="shortcut icon" href="img/pic.jpg" />
        <link rel="stylesheet" type="text/css" href="css/html5-doctor-reset-stylesheet.min.css" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <script src="js/flexible.js" type="text/javascript" charset="utf-8"></script>
    </head>
    
    <body>
        <header>
            <h1 class="song-title"></h1>
            <div class="singer"></div>
        </header>
        <div class="content">
            <div class="record-wrapper" style="display: block;">
                <div class="record-bg mid">
                    <div class="record-pic mid">
                        <img src="img/pic.jpg" alt="唱片图片">
                    </div>
                </div>
            </div>
            <div class="lyrics-wrapper">
                <ul class="lyrics"></ul>
            </div>
        </div>
        <footer>
            <div class="channel" data-channel-id=""></div>
            <div class="progress-bar">
                <div class="progress"></div>
                <div class="progress-btn"></div>
            </div>
            <div class="btns">
                <div class="show-lyrics icon-sides"></div>
                <div class="change-channel icon-middle"></div>
                <div class="play"></div>
                <div class="next icon-middle"></div>
                <div class="mode icon-sides"></div>
            </div>
        </footer>
        <div class="glass">
            <img>
        </div>
        <audio id="mic_audio"></audio>
    
        <script src="js/original_ajax.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/index.js" type="text/javascript" charset="utf-8"></script>
    </body>
    
    </html>

    head注释:

    <head>
        <meta charset="utf-8" />
        <meta name="referrer" content="no-referrer">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title>与喜欢的音乐不期而遇</title>
        <link rel="shortcut icon" href="img/pic.jpg" />
        <link rel="stylesheet" type="text/css" href="css/html5-doctor-reset-stylesheet.min.css" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <script src="js/flexible.js" type="text/javascript" charset="utf-8"></script>
    </head>

    先从head标签开始

    meta: 包含网页的一些元信息,至于包含那些元信息,后面的文章将介绍到

    <meta charset="utf-8" />

    charset :请求到的网页编码(一般是gb2312和utf-8)

     <meta name="referrer" content="no-referrer">

    referrer:可以看这篇文章

    <link rel="shortcut icon" href="img/pic.jpg" />

    shutcut icon:可以设置网页的缩略图标

    <link rel="stylesheet" type="text/css" href="css/html5-doctor-reset-stylesheet.min.css" />

    rel 指明样式,type指明文本类型(不写的话可能一些老的浏览器识别不了)

    <script src="js/flexible.js" type="text/javascript" charset="utf-8"></script>

    我说一下src和href的区别吧,src一般是指本地的文件路径,而href一般是指互联网上面的资源路径。

    src 的内容,是页面必不可少的一部分,是引入。href 的内容,是与该页面有关联,是引用。区别就是,引入和引用。

    有的人会奇怪,为什么引入js还要charset= "utf-8",那是因为指明要请求到的是utf-8类型的文件。

    body注释:

    <body>
        <header>
            <h1 class="song-title"></h1>
            <div class="singer"></div>
        </header>
        <div class="content">
            <div class="record-wrapper" style="display: block;">
                <div class="record-bg mid">
                    <div class="record-pic mid">
                        <img src="img/pic.jpg" alt="唱片图片">
                    </div>
                </div>
            </div>
            <div class="lyrics-wrapper">
                <ul class="lyrics"></ul>
            </div>
        </div>
        <footer>
            <div class="channel" data-channel-id=""></div>
            <div class="progress-bar">
                <div class="progress"></div>
                <div class="progress-btn"></div>
            </div>
            <div class="btns">
                <div class="show-lyrics icon-sides"></div>
                <div class="change-channel icon-middle"></div>
                <div class="play"></div>
                <div class="next icon-middle"></div>
                <div class="mode icon-sides"></div>
            </div>
        </footer>
        <div class="glass">
            <img>
        </div>
        <audio id="mic_audio"></audio>
    
        <script src="js/original_ajax.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/index.js" type="text/javascript" charset="utf-8"></script>
    </body>

    注意层次感以及嵌套不能超过3层,语义化标签以及命名规范(驼峰、下划线)

     

    脑图表达的话即是这样:

    再上CSS代码

    这位小伙伴用了css插件!主要满足下列需要:

    1. 各浏览器对应的margin,padding以及一些其它标签元素的尺度不确定性. 

    2.min.css 和 .css 即一个是展开模式一个是压缩模式(以上就是一个压缩模式).

    这位小伙伴用的是rem,而不是px长度单位!

    rem对移动端友好

    px对PC端友好

    vh对他们都友好(支持度欠缺)!!!

    咳咳,方便书写,单位0.xxx应改为 .xxx

    至于css其它的不便再说了,和一般的没区别,进入js阶段

    后上JavaScript代码

    flexible.js 检验是移动机型以及PC端

    index.js 主页逻辑代码

    original_ajax.js 封装POST和GET请求code

    flexible.js 直接pass掉

    index.js

     

    1. 驼峰命名

    2.加载延迟

    3.针对手机端的touchmove ,你可以尝试掉取消,哈哈

     逻辑代码专区

     调用getChannel(); 也就是或获取电台频道

    把JSON格式格式化有已用二种方式: 

    1.把json格式的字符串转换成javascript对象或数组

    var jsonObj = JSON.parse(response);

     2.eval("("+jsonString+")")

    var jsonObj = eval("(" + response + ")");

    JS对象转换成JSON(stringify)

    var data = new Object();
    var json_data = JSON.stringify(data);

    很多时候,也许会弹出【object object】,这种非我们能识别的方法,怎么办?

    可能是输出的字符串+数组形成了对象

     用for .. in  遍历循环对象成数组

    var test = Object;
        for (i in jsonObj) {
              alert(i);
              console.log(jsonObj[i]);
      }

     

    async: 默认false,你可以省掉

    一个简单的ajax调用

    console.log('返回的频道信息:' + response);

    console.log('将json转换为数组格式:' + jsonObj);

     

    检验

    channelArr = jsonObj['channels'];

    从数组对象里,取出数组并且存放到

    channelArr

    存放。

    获取随机频道

     

     

     

    innerHTML和innerText有什么不同?

    innerHTML指的是从对象的起始位置到终止位置的全部内容,包括Html标签
    innerText   指的是从起始位置到终止位置的内容,但它去除Html标签(单纯文本)

    innerHTML 是所有浏览器都支持的,innerText 是IE浏览器和chrome 浏览器支持的,Firefox浏览器不支持。其实,innerHTML 是W3C 组织规定的属性;而innerText 属性是IE浏览器自己的属性,不过后来的浏览器部分实现这个属性罢了。

    setAttribute是什么意思?

    设置元素属性,使用方法:

    channer.setAttribute('设置的type属性','替换的type属性');

    可移步至w3c

    setAttribute使用

     channel.setAttribute('data-channel-id', randomChannel.channel_id);

     获取歌曲

     下面我就好好介绍一下ajax插件编写以及使用问题

    AJAX = Asynchronous JavaScript and XML.

    AJAX 是一种用于创建快速动态网页的技术。

    AJAX 通过在后台与服务器进行少量数据交换,使网页实现异步更新。这意味着可以在不重载整个页面的情况下,对网页的某些部分进行更新。

    传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个页面。

    有很多使用 AJAX 的应用程序案例:Google Maps、Gmail、Youtube 和 Facebook。

    请求有四种,常用的只有GET和POST请求,我们只需编写这两种即可.

    AJAX 基于因特网标准,并使用以下技术组合:

    • XMLHttpRequest 对象(与服务器异步交互数据)
    • JavaScript/DOM(显示/取回信息)
    • CSS(设置数据的样式)
    • XML(常用作数据传输的格式)

    总的一句来说就是更新某个页面的一部分不需要请求整个网页(虽然请求了,用户看不到页面刷新)

     封装的ajax代码

     1  /* 封装ajax函数
     2   * @param {string}opt.type http连接的方式,包括POST和GET两种方式
     3   * @param {string}opt.url 发送请求的url
     4   * @param {boolean}opt.async 是否为异步请求,true为异步的,false为同步的
     5   * @param {object}opt.data 发送的参数,格式为对象类型
     6   * @param {function}opt.success ajax发送并接收成功调用的回调函数
     7   */
     8  function ajax(opt) {
     9      opt = opt || {};
    10      opt.method = opt.method.toUpperCase() || 'POST';
    11      opt.url = opt.url || '';
    12      opt.async = opt.async || true;
    13      opt.data = opt.data || null;
    14      opt.success = opt.success || function() {};
    15      var xmlHttp = null;
    16      if (XMLHttpRequest) {
    17          //  IE9以上以及Firefox和Chrome
    18          xmlHttp = new XMLHttpRequest();
    19      } else {
    20          //  IE6以及以上IE8以下
    21          xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
    22      }
    23      var params = [];
    24      //  遍历数组对象
    25      for (var key in opt.data) {
    26          params.push(key + '=' + opt.data[key]);
    27      }
    28      var postData = params.join('&');
    29 
    30      //  POST
    31      if (opt.method.toUpperCase() === 'POST') {
    32          //  打开请求,格式:请求方法,请求地址,是否异步
    33          xmlHttp.open(opt.method, opt.url, opt.async);
    34          //  获取请求头信息
    35          xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8');
    36          //  发送数据
    37          xmlHttp.send(postData);
    38 
    39          //  GET
    40      } else if (opt.method.toUpperCase() === 'GET') {
    41          xmlHttp.open(opt.method, opt.url + '?' + postData, opt.async);
    42          xmlHttp.send(null);
    43      }
    44 
    45      //  准备状态为4,请求为200完成时,返回成功信息
    46      xmlHttp.onreadystatechange = function() {
    47          if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
    48              opt.success(xmlHttp.responseText);
    49          }
    50      };
    51  }

     具体Ajax信息,请移步至:ajax教程

    名词解释:回调

    回调即常说的回调函数,即底层满足某种条件后调用高层的策略。

    ajax发送并接收成功调用的回调函数。

    持续更新... 上次更新时间2018-1-1上午10:21分!

  • 相关阅读:
    1058 A+B in Hogwarts (20)
    1036. Boys vs Girls (25)
    1035 Password (20)
    1027 Colors in Mars (20)
    1009. Product of Polynomials (25)
    1006. Sign In and Sign Out
    1005 Spell It Right (20)
    1046 Shortest Distance (20)
    ViewPager页面滑动,滑动到最后一页,再往后滑动则执行一个事件
    IIS7.0上传文件限制的解决方法
  • 原文地址:https://www.cnblogs.com/cisum/p/8109372.html
Copyright © 2011-2022 走看看