[散修弟子]JS-2011|2019年09月23日的日报-技能树.IT修真院

发表于： 2019-09-23 01:04:42

3 1175

任务进展

一、 任务进度：95%；

① 效果呈现：

二、 今日情况：

1. 自动点击效果：修正投票页的弹出提示框的显示形式，通过JS来改为过2s自动点击提示文字，而弹出提示框且背景音乐响起；

HTML

        <section class="container">
          <span
            id="votepopover"
            title=" "
            data-container="main"
            data-toggle="popover"
            data-placement="top"
            data-content="发言讨论结束，大家请投票"
            onclick="playPause()"
          >
            点击聆听
            <a class="glyphicon glyphicon-play-circle"></a>
            得票数最多人的头像发言
          </span>

          <audio
            id="votebgm"
            src="../WebApp/audio/财富自由.mp3"
            loop="loop"
          >
            亲 您的浏览器不支持html5的audio标签
          </audio>
        </section>
        <!--提示弹出框区，及其打开和音频播放暂停的控制-->

CSS跟之前没有改变

    <script>
      $(function() {
        $('[data-toggle="popover"]').popover();
      }); //弹出提示框的触发条件

      var votebgm = document.getElementById("votebgm");
      function playPause() {
        if (votebgm.paused) {
          votebgm.play();
        } else {
          votebgm.pause();
        }
      } //背景音乐的播放与暂停

     var votepopover=document.getElementById('votepopover');
     function voteclick() {
       votepopover.click();
     }
     setTimeout("voteclick()", 2000);
     //自动点击来弹出提示框，但audio在chrome没有生效，但在移动端可以，但会很卡；

    </script>

2. 标签组件：增加投票页的头像区，投票数的标签效果以及:hover状态的明显效果；

HTML

          <div class="row">
            <div class="col-xs-4">
              <div class="sculpture">
                <span class="label label-danger">3</span>
                <p class="name text-center">水民</p>
                <p class="numb text-center">1号
                </p>
              </div>
              <div class="btn-group">
                <button type="button" class="btn"></button>
                <button type="button" class="btn"></button>
                <button type="button" class="btn"></button>
                <button type="button" class="btn"></button>
              </div>
            </div>
            ...

CSS

.sculpture {
  display: flex;
  flex-direction: column;
  position: relative;

  width: 7.1em;
  height: 7.1em;

  background-color: #FFF;
  border: .3em solid #FFF;
} /* 定义头像的背景图 */
.sculpture:hover {
  border: .3em solid #FBB435;
} /* 定义头像的悬浮状态 */
.sculpture .name {
  margin: 0;

  width: 100%;
  height: 70%;

  background-color: #f5c97b;
  font-size: 1.6em;
  color: #565656;
  line-height: 3em;
} /* 定义头像名字的样式 */
.sculpture .numb {
  margin: 0;

  width: 100%;
  height: 30%;

  background-color:rgba(26, 153, 183, 0.52);
  font-size: 1.2em;
  line-height: 1.8em;
} /* 定义头像编号的样式 */

.sculpture .label {
  position: absolute;
  right: 0;
  display: none;
} /* 定义标签即得票人数 */

.col-xs-4 .btn-group {
  display: flex;
  justify-content: space-between;
  margin-top: 1.2em;

  width: 7.1em;

  visibility: hidden;
} /* 定义按钮组的位置和布局 */
.col-xs-4 .btn-group .btn {
    margin: 0;
    padding: 0;

    width: 1.5em;
    height: 1.5em;
} /* 定义按钮的样式 */
.col-xs-4 .btn-group .btn:first-child {
  background: url(../WebApp/img/kill.png) no-repeat center;
  background-size: cover;
}
.col-xs-4 .btn-group .btn:nth-child(2) {
  background: url(../WebApp/img/check.png) no-repeat center;
  background-size: cover;
}
.col-xs-4 .btn-group .btn:nth-child(3) {
  background: url(../WebApp/img/sign.png) no-repeat center;
  background-size: cover;
}
.col-xs-4 .btn-group .btn:last-child {
  background: url(../WebApp/img/save.png) no-repeat center;
  background-size: cover;
} /* 定义各个按钮的图像 */

.sculpture:hover + .btn-group {
  visibility: visible;
} /* 定义头像在悬浮状态时，显示按钮组 */
.sculpture:hover > .label {
  display: block;
} /* 定义头像在悬浮状态时，显示得票数 */

3. 完成游戏结果页，主要分为两大部分，游戏结果区和游戏过程详情区；

① 媒体对象组件：游戏结果区尝试应用媒体对象的形式，即图文结合组件，但还是应用flex布局实现垂直居中对齐并垂直分布，分为结果图片和结果文字；

② 其中结果文字中，说明各种职业的情况，采用栅格系统与flex布局结合的方式，与投票页的头像区一样，实现左对齐且均匀分布；

HTML

   <section class="media">
          <div class="media-middle"></div>
          <!--胜利界面图片-->
          <div class="media-heading">
            太棒了!你知道么？在捉鬼游戏中只有20%的卧底取得游戏最终的胜利哦！
          </div>
          <div class="container">
            <div class="row">
              本次游戏共计用时0小时25分钟
            </div>
            <div class="row">
              <div class="col-xs-4">
                <span>杀&emsp;手</span>
                <span>0人</span>
              </div>
              <div class="col-xs-4">
                <span>警&emsp;察</span>
                <span>1人</span>
              </div>
              <div class="col-xs-4">
                <span>平&emsp;民</span>
                <span>6人</span>
              </div>
            </div>

            <div class="row">
              <div class="col-xs-4">
                <span>狙击手</span>
                <span>0人</span>
              </div>
              <div class="col-xs-4">
                <span>医&emsp;生</span>
                <span>1人</span>
              </div>
            </div>

            <div class="row">
              <div class="col-xs-12">
                <span>卧底词汇：</span>
                <span>爱新觉罗</span>
              </div>
            </div>

            <div class="row">
              <div class="col-xs-12">
                <span>水民词汇：</span>
                <span>努尔哈赤</span>
              </div>
            </div>
          </div>
          <!--胜利界面文字-->
        </section>
        <!--胜利界面-->

CSS

#victory .media {
  display: flex;
  flex-direction: column;
  align-items: center;

  padding: 1.2em 12.5%;
} /* 定义胜利界面的居中对齐 */

#victory .media .media-middle {
  width: 17.6em;
  height: 10.3em;

  background: url(../WebApp/img/victory@2x\ .png) no-repeat;
  background-size: cover;
} /* 定义胜利界面图片的尺寸 */
#victory .media .media-heading {
  margin-top: .6em;
  height: 3em;

  font-size: 1.7em;
  color: #FFC865;
  font-weight: 500;

  line-height: 1.2em;
  letter-spacing: 0.01em;
} /* 定义胜利文字的样式 */
#victory .media .container {
  margin: 0;
  padding: 0;
  margin-top: 2.5em;
  
  width: 100%;

  font-size: 1.3em;
} /* 定义胜利详细说明的样式和布局 */

#victory  .media .row {
  margin: 0;
}
#victory .row .col-xs-4,
#victory .row .col-xs-8 {
  padding: 0 3%;
}
#victory .row .col-xs-4:first-child,
#victory .row .col-xs-12:first-child {
  padding-left: 0;
} 
#victory .row .col-xs-4:last-child {
  padding-right: 0;
} /* 定义具体人数部分的布局 */

③ 列表组与徽章组件：游戏过程详情区，采用列表组的组件方式，并把时间以徽章的形式定义；

HTML

        <section class="list-group">
          <div class="list-group-item">
            <h4 class="list-group-item-heading">
              第1天
              <span class="badge">
                0小时07分
              </span>
            </h4>
            <div class="list-group-item-text">
              <p>
                晚上：5号被杀手杀死，5号是水民
              </p>
              <p>
                白天：8号被全民投票投死，8号是杀手
              </p>
            </div>
          </div>
          ...

CSS

#victory .list-group .list-group-item {
  height: 8.8em;
  border-bottom: .15em solid rgba(83, 83, 83, 0.2);
  padding: .7em 4em;
  padding-right: 5.2em;
} /* 定义每个列表的高度及样式 */

#victory .list-group-item-heading {
  position: relative;

  font-size: 1.5em;
  color: #515151;
}
#victory .list-group-item-heading .badge {
  position: absolute;
  top: .3em;
  right: 0;
  padding: 0;

  font-size: 1rem;
  font-weight: 300;
  color: #C7C7C7;

  background: none;
} /* 定义列表组的标题栏及时间徽章的样式 */
#victory .list-group-item-text {
  margin-top: 1em;

  font-size: 1.3em;
  line-height: 1;
  color: #A6A6A6;
} /* 定义列表组的正文样式 */

4. 部分透明效果：游戏结果页中的底部标签栏，实现背景透明而按钮不透明，不使用opacity来定义全局样式，而是应用“rgba”带透明度的方式，定义背景颜色来实现只有被背景透明

5. 页面内部跳转：实现各页面间的跳转，对于button来说，采用的是，增加子元素a标签，再通过a标签的href属性，声明为指定的html文件即可，但要去除a标签的蓝色等默认样式，如

        <button type="button" class="btn">
          <a class="glyphicon glyphicon-home" href="index.html"></a>
        </button>

三、 任务问题：

1. bootstrap3基本都是以px为单位，所以字体大小自由调节功能失效，应采用bootstrap4的文件，其采用的是rem单位，所以此任务没有彻底完成好，所看得基本都是bootstrap3的文件，对于bootstrap4的文件还需学习；

2. 由于采用自动点击效果，在需要点击“投死”按钮时，会出现失效，需要多次点击才生效，且由于audio的播放，页面跳转的响应比较慢，可能因为GitHub托管的网站服务器一般；

3. 采用bootstrap组件太过于强硬地应用，导致很多默认样式需要通过提高权值才能覆盖或去除，暂时还没有领会到其方便之处，主要还是明确html标签的类名称，以及页面的组件规范化，否则每个页面都需要声明id名，才能确保各页面的组件不受影响；

4. 由于移动端没有如网站的点击按下效果，而以hover效果代替，但不知道如何实现，再次点击来取消hover效果，如弹出提示框一样，点击出现其他组件，再点击隐藏其他组件，可能还是需要JS的配合吧；

5. 在PC端由于投票区的头像采用的hover效果，但没有应用button标签，所以没有保持hover状态，鼠标移开就消失，对于交互方式不好用，除非应用JS的onmouseover事件；

四、 深度思考：

1. CSS Sprite

① 目的：减少HTTP的请求次数，方便网站快速响应，即可以把多个小图标放在一个大图里，则可以由那个大图发出一次请求，即可全部图标一起下载；

加速的关键，不是降低重量，而是减少个数。传统切图讲究精细，图片规格越小越好，重量越小越好，其实规格大小无所谓，计算机统一都按byte计算。客户端每显示一张图片都会向服务器发送请求，所以，图片越多请求次数越多，造成延迟的可能性也就越大（https://www.cnblogs.com/ndos/p/8367168.html）

② 应用场景：小图比较多的组件，如按钮组、缩略图组、标签图片组、列表组中同级头像或图片区等；

③ 实现方法（https://blog.csdn.net/flqbestboy/article/details/76641720）：

1）边切图边整合。

2）定位时避免使用bottom,right等，用具体的数值，为了避免当你的宽度或高度上扩展sprites图时出现位置的错误。

3）将小图标预留足够的空间，因为使用这些图标元素通常会有大量的内容而且可能需要扩展的间距，以至于其它的图片可能会意外出现在本区域内。一般的情况下，会将这些小图标整合到文件的最右侧。

4）单张整合好的sprite图片在100KB以内。

5）按分类整合图片。

6）为了方便计算尺寸，一般情况会将sprites图的坐标计算成整数倍。

快捷工具： Github地址 https://github.com/iwangx/sprite

或者前端必备 CSS Sprites雪碧图生成工具（https://www.jianshu.com/p/84d7aa090ba1）

2. 清除浮动（https://www.cnblogs.com/z937741304/p/7630365.html）

① 浮动：当子元素使用float声明时，子元素就会变为浮动模型，相对于背景即父元素就会形成层叠关系，且在父元素之上，对于同级的浮动元素，就会按照指定的方向（左或右发生移动），直到它的外边缘碰到包含框或另一个浮动框的边框为止，由此优点在于会变为内联元素来并列一排；

② 浮动的缺点：不支持margin:auto，即无法自动居中或自动平分父元素的宽或高，且无法撑开父元素的宽或高，排列的换行形式会受到父元素的宽或高影响，且如同级元素不是等高，则会影响水平排列无法换行；

③ 清除浮动：为使浮动模型的元素的层叠顺序降低等级，或者提高父元素的层叠顺序等级来使得子元素可以撑开，并能应用上margin:auto的效果；

方式有：浮动模型变为flex布局模型，或者给父元素定宽高，或者给定宽的父元素添加overflow:hidden，也可以改变父元素为内联块状元素；

比较主流的方式为添加:after伪元素，再采用clear:both来清除同级元素的浮动层叠效果：

.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }

.clearfix { *zoom:1; }

3. 透明和可视对比

① rgba只是背景颜色有透明效果，可以实现指定元素透明而不包含子元素，而有opacity属性元素的后代都会继承这个透明属性，包括但不限于文字图片等；

② 如果给一个元素设置了display: none，那么该元素以及它的所有后代元素都会隐藏，它是前端开发人员使用频率最高的一种隐藏方式。隐藏后的元素无法点击，无法使用屏幕阅读器等辅助设备访问，占据的空间消失；

给元素设置visibility: hidden也可以隐藏这个元素，但是隐藏元素仍需占用与未隐藏时一样的空间，也就是说虽然元素不可见了，但是仍然会影响页面布局，所以对于需要隐藏元素撑开父元素或撑开相邻元素的间距，可以使用；

CSS3的transition支持visibility属性，但是并不支持display，由于transition可以延迟执行，因此可以配合visibility使用纯css实现hover延时显示效果。提高用户体验；

4. z-index和层叠关系

① z-index：用来调整元素及子元素在 z 轴上的顺序，多用于浮动模型或层模型，类似于图层的效果，来定义谁在上面显示，默认为auto；

② 如是同级元素，则根据后来居上原则，或设置的z-index值哪个大，哪个在上面；

③ 如是不同级元素，参考张鑫旭大佬的图片：

④ 如是需要层叠关系，则：

a. 默认创建层叠上下文：只有 HTML 根元素，这里你可以理解为 body 标签，属于根层叠上下文元素，不需要任何 CSS 属性来触发；

b. 设置z-index值：在CSS给指定的元素赋予z-index值来强行确定上下级关系，其子元素都会继承；

c. 由元素样式导致的上下级关系（不常用，除了透明）：

元素的透明度 opacity 小于1
元素的 mix-blend-mode 值不是 normal
元素的以下属性的值不是 none：
- transform
- filter
- perspective
- clip-path
- mask / mask-image / mask-border
元素的 isolution 属性值为 isolate
元素的 -webkit-overflow-scrolling 属性为 touch
元素的 will-change 属性具备会创建层叠上下文的值