js-day17项目笔记

项目笔记

网站逻辑: 从哪里来 就到哪里去

首页点击登录 登陆后返回首页

列表点击登录 登陆后返回列表页

解决:

在跳转页面的时候 增加页面标识符 作用标志上一个页面是谁

使用哈希值

#1 首页

#2 列表

#3 视频详情

#4 视频播放

#5 登录

#6 注册

数据渲染

\1. 数据渲染

请求数据

\2. 将页面组成部分注释

小单元被备注

\3. 根据数据生成html片段 渲染到父元素中

具体渲染过程

1. 获取元素

   var ban_ul = document.querySelector('.banner ul');

   var ban_p = document.querySelector('.banner p');

2. 生成页面片段 使用字符串保留页面片段 最后在渲染

   var ulstr = '', pstr = '';

   // 将 bannerData 数组中的每一个数据生成li

   for(var i = 0; i < bannerData.length; i++){

   // console.log(bannerData[i]);

   // 一个li所有的内容

   ulstr += '<li></li>';

   pstr += ' <i class="iconfont icon-left"></i> ' + bannerData[i].title + '';

   }

3. 赋值到父元素

   ban_ul.innerHTML = ulstr;

   ban_p.innerHTML = pstr;

4. 初始化页面: 给默认要显示的元素添加类名

   var ban_lis = document.querySelectorAll('.banner li');

   var ban_spans = document.querySelectorAll('.banner span');

   // console.log(ban_lis, ban_spans);

   // 给第一个子元素添加类名

   ban_lis[0].className = 'active';

   ban_spans[0].className = 'active';

localStorage: 电脑内存

只能存储字符串 如果存储复杂数据类型 默认转换成字符串之后 在做存储

只要不手动清除 数据就一直存在

数组包对象 ​ 单纯对象 ​ 前后端数据交互的时候进行使用 1. 将json格式的字符串转成js数据: JSON.parse(数据); 2. 将js数据转成json格式的字符串 JSON.stringify(数据);

 <script>
            console.log(localStorage); // 对象
            // 存储
            // localStorage.属性名 = 属性值;
            localStorage.firstName = '迪丽';
            
            // localStorage.setItem(属性名, 属性值);
            localStorage.lastName = '热巴';
            console.log(localStorage);
​
            // 取值
            // . [] localStorage.属性名  localStorage['属性名']
            console.log(localStorage.firstName);
            console.log(localStorage['lastName']);
​
            // localStorage.getItem('属性名');
            console.log(localStorage.getItem('firstName'));
​
​
            // 清除
            // 设置成空字符串
            localStorage.firstName = '';
​
            // 删除: localStorage.removeItem('属性名');
            localStorage.removeItem('lastName');
​
            // 批量清空 
            localStorage.clear();
​
            console.log(localStorage);
​
​
​
            /* 
                数组包对象
                单纯对象
                前后端数据交互的时候进行使用
                1. 将json格式的字符串转成js数据:
                    JSON.parse(数据);
                2. 将js数据转成json格式的字符串
                    JSON.stringify(数据);
            */
            var data = [{
                name: '李四',
                age: 33,
                tip: '提示'
            },{
                name: '李四1',
                age: 33,
                tip: '提示'
            },{
                name: '李四2',
                age: 33,
                tip: '提示'
            }];
            localStorage.list = JSON.stringify(data);
            console.log(localStorage);
​
            var d = localStorage.list;
            console.log(d);
            console.log(JSON.parse(d));
        </script>

版心

html大致格式为
    <header>
        <div class="main">
        </div>
    </header>
    <main>
        <div class="main">
        </div>
    </main>
    <footer>
        <div class="main"></div>
    </footer>
​
​

css代码使用通配符选择器 选中所有名字为mian的div;
* div.main {
  width: 1180px;
  margin: 0 auto;
  overflow: hidden;
}

登陆状态

function isLogin(){
    var head_end = document.querySelector('.head_end');
    var head_userend = document.querySelector('.head_userend');
    // console.log(head_end,head_userend);
    if(localStorage.login=='true'){
        head_end.style.display = 'none';
        head_userend.style.display = 'block';

        //退出事件
        var span = head_userend.querySelector('span');
        span.onclick =function(){
            // 更改本地登录状态
            localStorage.login = 'false';
            // 刷新页面
            location.reload();
        }
    }else{
        head_end.style.display = 'block';
        head_userend.style.display = 'none';
    }
}

根据哈希值跳转到对应的页面

 //根据hash 跳转到对应的页面
            if(location.hash=='#1'){
                localStorage.login = 'true';
                location.href ='../index.html';
            }else if(location.hash == '#2')
                {
                    // 跳转到列表
                localStorage.login = 'true';
                location.href ='./course.html';
            }else if(location.hash == '#3'){
                localStorage.login = 'true';
                location.href ='./video.html';
            }else if(location.hash == '#4'){
                localStorage.login = 'true';
                location.href ='./videodetail.html';
            }
            else{
                location.href = '../index.html';
            }

audio

src:播放文件地址

autopaly:基于用户体验角度 各大浏览器禁止自动播放

controls:控制器显示

muted:是否静音

loop:是否循环播放

currentSrc:当前播放地址

currentTime:当前播放时长 单位 s

duration:音频时长 单位 s

volume:音乐音量 [0, 1] 最小值 0 最大值 1

paused:音乐是否暂停播放 true--暂停 false--播放

ended:音乐是否结束播放 true--结束 false--没有结束 设置了loop 音频重复循环播放 不会结束

palybackRate:播放速度

video

poster:图片

src:播放地址

height:高

width:宽

autoplay:静音下自动播放

muted:静音状态

controls：控制器

loop:循环

currentSrc:当前播放地址

currentTime； 当前播放时长 单位 s

duration :音频时长 单位 s

paused：是否暂停

ended：结束 loop设置为true 一直false

playbackRate：当前视频的播放速度

defaultPlaybackRate： 默认视频播放速度

volume ：音量 [0,1]