# # 代码收集

## # 区分 桌面环境 与 移动平台

#### # 参考文章:

https://segmentfault.com/a/1190000016760627

    // 区分桌面浏览器与移动浏览器
    var OS = {
      WINDOWS: 'win',
      MACINTOSH: 'mac',
      LINUX: 'linux',
      IOS: 'iOS',
      ANDROID: 'Android',
      BLACKBERRY: 'bb',
      WINDOWS_PHONE: 'winphone',
    };
    var result = getOS();
    alert(JSON.stringify(result));
    function getOS() {
      var userAgent = navigator.userAgent;
      var platform, result;
      function getDesktopOS() {
        var pf = navigator.platform;
        if (pf.indexOf('Win') != -1) {
          // 说明当前是Windows操作系统
          var rVersion = /Windows NT (\d+).(\d)/i;
          var uaResult = userAgent.match(rVersion);
          var sVersionStr = '';
          if (uaResult[1] == '6') {
            if (uaResult[2] == 1) {
              sVersionStr = '7'; // 说明当前运行在Windows 7 中
            } else if (uaResult[2] > 1) {
              sVersionStr = '8'; // 说明当前运行在Windows 8 中
            }
          } else {
            sVersionStr = uaResult[1];
          }
          return { name: OS.WINDOWS, versionStr: sVersionStr };
        } else if (pf.indexOf('Mac') != -1) {
          return { name: OS.MACINTOSH, versionStr: '' }; // Macintosh操作系统
        } else if (pf.indexOf('Linux') != -1) {
          return { name: OS.LINUX, versionStr: '' }; // 说明当前运行在Linux操作系统
        }
        return null;
      }
      platform = /Windows Phone (?:OS )?([\d.]*)/; // windows phone的正则表达式
      result = userAgent.match(platform);
      if (result) {
        return { name: OS.WINDOWS_PHONE, versionStr: result[1] };
      }
      // BlackBerry 10
      if (userAgent.indexOf('(BB10;') > 0) {
        platform = /\sVersion\/([\d.]+)\s/; // BlackBerry的regular expression
        result = userAgent.match(platform);
        if (result) {
          return { name: OS.BLACKBERRY, versionStr: result[1] };
        } else {
          return { name: OS.BLACKBERRY, versionStr: '10' };
        }
      }
      // iOS, Android, BlackBerry 6.0+:
      platform = /\(([a-zA-Z ]+);\s(?:[U]?[;]?)([\D]+)((?:[\d._]*))(?:.*[\)][^\d]*)([\d.]*)\s/;
      result = userAgent.match(platform);
      if (result) {
        var appleDevices = /iPhone|iPad|iPod/;
        var bbDevices = /PlayBook|BlackBerry/;
        if (result[0].match(appleDevices)) {
          result[3] = result[3].replace(/_/g, '.');
          return { name: OS.IOS, versionStr: result[3] }; // iOS操作系统
        } else if (result[2].match(/Android/)) {
          result[2] = result[2].replace(/\s/g, '');
          return { name: OS.ANDROID, versionStr: result[3] }; // Android操作系统
        } else if (result[0].match(bbDevices)) {
          return { name: OS.BLACKBERRY, versionStr: result[4] }; // Blackberry
        }
      }
      //Android平台上的Firefox浏览器
      platform = /\((Android)[\s]?([\d][.\d]*)?;.*Firefox\/[\d][.\d]*/;
      result = userAgent.match(platform);
      if (result) {
        return {
          name: OS.ANDROID,
          versionStr: result.length == 3 ? result[2] : '',
        };
      }
      // Desktop
      return getDesktopOS();
    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

## # element 元素 Y 轴的 scroll 事件触发

### # 移动平台

    <template>
      <div>
        <h1 @click="os">OS:{{osStr}}</h1>
        <div id="btn-wrapper">
          <div>
            移动平台
          </div>
          <div>
            <button id="enable"
              @click=enableF>enable
              scrolling</button>
          </div>
          <div>
            <button id="disable"
              @click=disableF>disable
              scrolling</button>
          </div>
          <div>
            <strong id="status"
              :class="statusClassName">{{enabled}}</strong>
          </div>
        </div>
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          top: '',
          osStr: '',
          enabled: 'enabled',
          statusClassName: 'enabled',
        };
      },
      methods: {
        enableF() {
          this.statusClassName = 'enabled';
          this.enabled = 'enabled';
          document.body.style.position = 'static';
          window.scrollTo(0, this.top);
        },
        disableF() {
          this.top = window.scrollY;
          this.statusClassName = 'disabled';
          this.enabled = 'disabled';
          // document.body.style.overflow = 'hidden';
          document.body.style.position = 'fixed';
          document.body.style.top = -this.top + 'px';
        },
      },
    };
    </script>
    <style scoped>
    .article {
    }
    /*btn*/
    #btn-wrapper {
      position: fixed;
      z-index: 100;
      bottom: 40%;
      right: 10%;
      border: 1px solid;
      padding: 5px;
      background-color: white;
    }
    #btn-wrapper > div {
      margin-bottom: 10px;
      text-align: center;
    }
    .enabled {
      color: green;
    }
    .disabled {
      color: red;
    }
    </style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

### # 桌面环境

    <template>
      <div>
        <div id="btn-wrapper">
          <div>桌面环境</div>
          <div>
            <button id="enable"
              @click=enableF>enable
              scrolling</button>
          </div>
          <div>
            <button id="disable"
              @click=disableF>disable
              scrolling</button>
          </div>
          <div>
            <strong id="status"
              :class="statusClassName">{{enabled}}</strong>
          </div>
        </div>
        <!-- <div class="article">
          <h3>桨声灯影里的秦淮河</h3>
          <div>作者：朱自清
            文章来源：<a
            target="_blank"
              href="https://www.thn21.com/Article/chang/weiren/mydoc004.htm">会员整理</a></div>
          <p>一九二三年八月的一晚，我和平伯同游秦淮河；平伯是初泛，我是重来了。我们雇了一只七板子，在夕阳已去，皎月方来的时候，便下了船。于是桨声汩--汩，我们开始领略那晃荡着蔷薇色的历史的秦淮河的滋味了。</p>
          <p>秦淮河里的船，比北京万甡园，颐和园的船好，比西湖的船好，比扬州瘦西湖的船也好。这几处的船不是觉着笨，就是觉着简陋、局促；都不能引起乘客们的情韵，如秦淮河的船一样。秦淮河的船约略可分为两种：一是大船；一是小船，就是所谓七板子。大船舱口阔大，可容二三十人。里面陈设着字画和光洁的红木家具，桌上一律嵌着冰凉的大理石面。窗格雕镂颇细，使人起柔腻之感。窗格里映着红色蓝色的玻璃；玻璃上有精致的花纹，也颇悦人目。七板子规模虽不及大船，但那淡蓝色的栏干，空敞的舱，也足系人情思。而最出色处却在它的舱前。舱前是甲板上的一部。上面有弧形的顶，两边用疏疏的栏干支着。里面通常放着两张藤的躺椅。躺下，可以谈天，可以望远，可以顾盼两岸的河房。大船上也有这个，便在小船上更觉清隽罢了。舱前的顶下，一律悬着灯彩；灯的多少，明暗，彩苏的精粗，艳晦，是不一的。但好歹总还你一个灯彩。这灯彩实在是最能钩人的东西。夜幕垂垂地下来时，大小船上都点起灯火。从两重玻璃里映出那辐射着的黄黄的散光，反晕出一片朦胧的烟霭；透过这烟霭，在黯黯的水波里，又逗起缕缕的明漪。在这薄霭和微漪里，听着那悠然的间歇的桨声，谁能不被引入他的美梦去呢？只愁梦太多了，这些大小船儿如何载得起呀？我们这时模模糊糊的谈着明末的秦淮河的艳迹，如《桃花扇》及《板桥杂记》里所载的。我们真神往了。我们仿佛亲见那时华灯映水，画舫凌波的光景了。于是我们的船便成了历史的重载了。我们终于恍然秦淮河的船所以雅丽过于他处，而又有奇异的吸引力的，实在是许多历史的影象使然了。</p>
          <p>秦淮河的水是碧阴阴的；看起来厚而不腻，或者是六朝金粉所凝么？我们初上船的时候，天色还未断黑，那漾漾的柔波是这样的恬静，委婉，使我们一面有水阔天空之想，一面又憧憬着纸醉金迷之境了。等到灯火明时，阴阴的变为沉沉了：黯淡的水光，像梦一般；那偶然闪烁着的光芒，就是梦的眼睛了。我们坐在舱前，因了那隆起的顶棚，仿佛总是昂着首向前走着似的；于是飘飘然如御风而行的我们，看着那些自在的湾泊着的船，船里走马灯般的人物，便像是下界一般，迢迢的远了，又像在雾里看花，尽朦朦胧胧的。这时我们已过了利涉桥，望见东关头了。沿路听见断续的歌声：有从沿河的妓楼飘来的，有从河上船里度来的。我们明知那些歌声，只是些因袭的言词，从生涩的歌喉里机械的发出来的；但它们经了夏夜的微风的吹漾和水波的摇拂，袅娜着到我们耳边的时候，已经不单是她们的歌声，而混着微风和河水的密语了。于是我们不得不被牵惹着，震撼着，相与浮沉于这歌声里了。从东关头转湾，不久就到大中桥。大中桥共有三个桥拱，都很阔大，俨然是三座门儿；使我们觉得我们的船和船里的我们，在桥下过去时，真是太无颜色了。桥砖是深褐色，表明它的历史的长久；但都完好无缺，令人太息于古昔工程的坚美。桥上两旁都是木壁的房子，中间应该有街路？这些房子都破旧了，多年烟熏的迹，遮没了当年的美丽。我想象秦淮河的极盛时，在这样宏阔的桥上，特地盖了房子，必然是髹漆得富富丽丽的；晚间必然是灯火通明的。现在却只剩下一片黑沉沉！但是桥上造着房子，毕竟使我们多少可以想见往日的繁华；这也慰情聊胜无了。过了大中桥，便到了灯月交辉，笙歌彻夜的秦淮河；这才是秦淮河的真面目哩。</p>
          <p>大中桥外，顿然空阔，和桥内两岸排着密密的人家的大异了。一眼望去，疏疏的林，淡淡的月，衬着蓝蔚的天，颇像荒江野渡光景；那边呢，郁丛丛的，阴森森的，又似乎藏着无边的黑暗：令人几乎不信那是繁华的秦淮河了。但是河中眩晕着的灯光，纵横着的画舫，悠扬着的笛韵，夹着那吱吱的胡琴声，终于使我们认识绿如茵陈酒的秦淮水了。此地天裸露着的多些，故觉夜来的独迟些；从清清的水影里，我们感到的只是薄薄的夜--这正是秦淮河的夜。大中桥外，本来还有一座复成桥，是船夫口中的我们的游踪尽处，或也是秦淮河繁华的尽处了。我的脚曾踏过复成桥的脊，在十三四岁的时候。但是两次游秦淮河，却都不曾见着复成桥的面；明知总在前途的，却常觉得有些虚无缥缈似的。我想，不见倒也好。这时正是盛夏。我们下船后，借着新生的晚凉和河上的微风，暑气已渐渐销散；到了此地，豁然开朗，身子顿然轻了--习习的清风荏苒在面上，手上，衣上，这便又感到了一缕新凉了。南京的日光，大概没有杭州猛烈；西湖的夏夜老是热蓬蓬的，水像沸着一般，秦淮河的水却尽是这样冷冷地绿着。任你人影的憧憧，歌声的扰扰，总像隔着一层薄薄的绿纱面幂似的；它尽是这样静静的，冷冷的绿着。我们出了大中桥，走不上半里路，船夫便将船划到一旁，停了桨由它宕着。他以为那里正是繁华的极点，再过去就是荒凉了；所以让我们多多赏鉴一会儿。他自己却静静的蹲着。他是看惯这光景的了，大约只是一个无可无不可。这无可无不可，无论是升的沉的，总之，都比我们高了。</p>
          <p>那时河里闹热极了；船大半泊着，小半在水上穿梭似的来往。停泊着的都在近市的那一边，我们的船自然也夹在其中。因为这边略略的挤，便觉得那边十分的疏了。在每一只船从那边过去时，我们能画出它的轻轻的影和曲曲的波，在我们的心上；这显着是空，且显着是静了。那时处处都是歌声和凄厉的胡琴声，圆润的喉咙，确乎是很少的。但那生涩的，尖脆的调子能使人有少年的，粗率不拘的感觉，也正可快我们的意。况且多少隔开些儿听着，因为想象与渴慕的做美，总觉更有滋味；而竞发的喧嚣，抑扬的不齐，远近的杂沓，和乐器的嘈嘈切切，合成另一意味的谐音，也使我们无所适从，如随着大风而走。这实在因为我们的心枯涩久了，变为脆弱；故偶然润泽一下，便疯狂似的不能自主了。但秦淮河确也腻人。即如船里的人面，无论是和我们一堆儿泊着的，无论是从我们眼前过去的，总是模模糊糊的，甚至渺渺茫茫的；任你张圆了眼睛，揩净了眦垢，也是枉然。这真够人想呢。在我们停泊的地方，灯光原是纷然的；不过这些灯光都是黄而有晕的。黄已经不能明了，再加上了晕，便更不成了。灯愈多，晕就愈甚；在繁星般的黄的交错里，秦淮河仿佛笼上了一团光雾。光芒与雾气腾腾的晕着，什么都只剩了轮廓了；所以人面的详细的曲线，便消失于我们的眼底了。但灯光究竟夺不了那边的月色；灯光是浑的，月色是清的，在浑沌的灯光里，渗入了一派清辉，却真是奇迹！那晚月儿已瘦削了两三分。她晚妆才罢，盈盈的上了柳梢头。天是蓝得可爱，仿佛一汪水似的；月儿便更出落得精神了。岸上原有三株两株的垂杨树，淡淡的影子，在水里摇曳着。它们那柔细的枝条浴着月光，就像一支支美人的臂膊，交互的缠着，挽着；又像是月儿披着的发。而月儿偶然也从它们的交叉处偷偷窥看我们，大有小姑娘怕羞的样子。岸上另有几株不知名的老树，光光的立着；在月光里照起来。却又俨然是精神矍铄的老人。远处--快到天际线了，才有一两片白云，亮得现出异彩，像美丽的贝壳一般。白云下便是黑黑的一带轮廓；是一条随意画的不规则的曲线。这一段光景，和河中的风味大异了。但灯与月竟能并存着，交融着，使月成了缠绵的月，灯射着渺渺的灵辉；这正是天之所以厚秦淮河，也正是天之所以厚我们了。</p>
          <p>这时却遇着了难解的纠纷。秦淮河上原有一种歌妓，是以歌为业的。从前都在茶舫上，唱些大曲之类。每日午后一时起；什么时候止，却忘记了。晚上照样也有一回。也在黄晕的灯光里。我从前过南京时，曾随着朋友去听过两次。因为茶舫里的人脸太多了，觉得不大适意，终于听不出所以然。前年听说歌妓被取缔了，不知怎的，颇涉想了几次--却想不出什么。这次到南京，先到茶舫上去看看，觉得颇是寂寥，令我无端的怅怅了。不料她们却仍在秦淮河里挣扎着，不料她们竟会纠缠到我们，我于是很张皇了。她们也乘着七板子，她们总是坐在舱前的。舱前点着石油汽灯，光亮眩人眼目：坐在下面的，自然是纤毫毕见了--引诱客人们的力量，也便在此了。舱里躲着乐工等人，映着汽灯的余辉蠕动着；他们是永远不被注意的。每船的歌妓大约都是二人；天色一黑。她们的船就在大中桥外往来不息的兜生意。无论行着的船，泊着的船，都要来兜揽的。这都是我后来推想出来的。那晚不知怎样，忽然轮着我们的船了。我们的船好好的停着，一只歌舫划向我们来的；渐渐和我们的船并着了。铄铄的灯光逼得我们皱起了眉头；我们的风尘色全给它托出来了，这使我踧踖不安了。那时一个伙计跨过船来，拿着摊开的歌折，就近塞向我的手里，说，点几出吧！他跨过来的时候，我们船上似乎有许多眼光跟着。同时相近的别的船上也似乎有许多眼睛炯炯的向我们船上看着。我真窘了！我也装出大方的样子，向歌妓们瞥了一眼，但究竟是不成的！我勉强将那歌折翻了一翻，却不曾看清了几个字；便赶紧递还那伙计，一面不好意思地说，不要，我们......不要。他便塞给平伯。平伯掉转头去，摇手说，不要！那人还腻着不走。平伯又回过脸来，摇着头道，不要！于是那人重到我处。我窘着再拒绝了他。他这才有所不屑似的走了。我的心立刻放下，如释了重负一般。我们就开始自白了。</p>
          <p>我说我受了道德律的压迫，拒绝了她们；心里似乎很抱歉的。这所谓抱歉，一面对于她们，一面对于我自己。她们于我们虽然没有很奢的希望；但总有些希望的。我们拒绝了她们，无论理由如何充足，却使她们的希望受了伤；这总有几分不做美了。这是我觉得很怅怅的。至于我自己，更有一种不足之感。我这时被四面的歌声诱惑了，降服了；但是远远的，远远的歌声总仿佛隔着重衣搔痒似的，越搔越搔不着痒处。我于是憧憬着贴耳的妙音了。在歌舫划来时，我的憧憬，变为盼望；我固执的盼望着，有如饥渴。虽然从浅薄的经验里，也能够推知，那贴耳的歌声，将剥去了一切的美妙；但一个平常的人像我的，谁愿凭了理性之力去丑化未来呢？我宁愿自己骗着了。不过我的社会感性是很敏锐的；我的思力能拆穿道德律的西洋镜，而我的感情却终于被它压服着，我于是有所顾忌了，尤其是在众目昭彰的时候。道德律的力，本来是民众赋予的；在民众的面前，自然更显出它的威严了。我这时一面盼望，一面却感到了两重的禁制：一，在通俗的意义上，接近妓者总算一种不正当的行为；二，妓是一种不健全的职业，我们对于她们，应有哀矜勿喜之心，不应赏玩的去听她们的歌。在众目睽睽之下，这两种思想在我心里最为旺盛。她们暂时压倒了我的听歌的盼望，这便成就了我的灰色的拒绝。那时的心实在异常状态中，觉得颇是昏乱。歌舫去了，暂时宁靖之后，我的思绪又如潮涌了。两个相反的意思在我心头往复：卖歌和卖淫不同，听歌和狎妓不同，又干道德甚事？--但是，但是，她们既被逼的以歌为业，她们的歌必无艺术味的；况她们的身世，我们究竟该同情的。所以拒绝倒也是正办。但这些意思终于不曾撇开我的听歌的盼望。它力量异常坚强；它总想将别的思绪踏在脚下。从这重重的争斗里，我感到了浓厚的不足之感。这不足之感使我的心盘旋不安，起坐都不安宁了。唉！我承认我是一个自私的人！平伯呢，却与我不同。他引周启明先生的诗，因为我有妻子，所以我爱一切的女人，因为我有子女，所以我爱一切的孩子。①</p>
          <p>①原诗是，我为了自己的儿女才爱小孩子，为了自己的妻才爱女人，见《雪朝》第４８页。他的意思可以见了。</p>
          <p>他因为推及的同情，爱着那些歌妓，并且尊重着她们，所以拒绝了她们。在这种情形下，他自然以为听歌是对于她们的一种侮辱。但他也是想听歌的，虽然不和我一样，所以在他的心中，当然也有一番小小的争斗；争斗的结果，是同情胜了。至于道德律，在他是没有什么的；因为他很有蔑视一切的倾向，民众的力量在他是不大觉着的。这时他的心意的活动比较简单，又比较松弱，故事后还怡然自若；我却不能了。这里平伯又比我高了。</p>
          <p>在我们谈话中间，又来了两只歌舫。伙计照前一样的请我们点戏，我们照前一样的拒绝了。我受了三次窘，心里的不安更甚了。清艳的夜景也为之减色。船夫大约因为要赶第二趟生意，催着我们回去；我们无可无不可的答应了。我们渐渐和那些晕黄的灯光远了，只有些月色冷清清的随着我们的归舟。我们的船竟没个伴儿，秦淮河的夜正长哩！到大中桥近处，才遇着一只来船。这是一只载妓的板船，黑漆漆的没有一点光。船头上坐着一个妓女；暗里看出，白地小花的衫子，黑的下衣。她手里拉着胡琴，口里唱着青衫的调子。她唱得响亮而圆转；当她的船箭一般驶过去时，余音还袅袅的在我们耳际，使我们倾听而向往。想不到在弩末的游踪里，还能领略到这样的清歌！这时船过大中桥了，森森的水影，如黑暗张着巨口，要将我们的船吞了下去，我们回顾那渺渺的黄光，不胜依恋之情；我们感到了寂寞了！这一段地方夜色甚浓，又有两头的灯火招邀着；桥外的灯火不用说了，过了桥另有东关头疏疏的灯火。我们忽然仰头看见依人的素月，不觉深悔归来之早了！走过东关头，有一两只大船湾泊着，又有几只船向我们来着。嚣嚣的一阵歌声人语，仿佛笑我们无伴的孤舟哩。东关头转湾，河上的夜色更浓了；临水的妓楼上，时时从帘缝里射出一线一线的灯光；仿佛黑暗从酣睡里眨了一眨眼。我们默然的对着，静听那汩--汩的桨声，几乎要入睡了；朦胧里却温寻着适才的繁华的余味。我那不安的心在静里愈显活跃了！这时我们都有了不足之感，而我的更其浓厚。我们却只不愿回去，于是只能由懊悔而怅惘了。船里便满载着怅惘了。直到利涉桥下，微微嘈杂的人声，才使我豁然一惊；那光景却又不同。右岸的河房里，都大开了窗户，里面亮着晃晃的电灯，电灯的光射到水上，蜿蜒曲折，闪闪不息，正如跳舞着的仙女的臂膊。我们的船已在她的臂膊里了；如睡在摇篮里一样，倦了的我们便又入梦了。那电灯下的人物，只觉像蚂蚁一般，更不去萦念。这是最后的梦；可惜是最短的梦！黑暗重复落在我们面前，我们看见傍岸的空船上一星两星的，枯燥无力又摇摇不定的灯光。我们的梦醒了，我们知道就要上岸了；我们心里充满了幻灭的情思。</p>
          <p>１９２３年１０月１１日作完，于温州。<p>（原载１９２４年１月２５日《东方杂志》第２１卷第２号２０周年纪念号）</p>
        </div> -->
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          top: '',
          enabled: 'enabled',
          statusClassName: 'enabled',
        };
      },
      methods: {
        enableF() {
          this.statusClassName = 'enabled';
          this.enabled = 'enabled';
          //
          if (window.removeEventListener) {
            window.removeEventListener('DOMMouseScroll', this.wheel, false);
          }
          window.onmousewheel = document.onmousewheel = document.onkeydown = null;
        },
        disableF() {
          this.top = window.scrollY;
          this.statusClassName = 'disabled';
          this.enabled = 'disabled';
          //
          if (window.addEventListener) {
            window.addEventListener('DOMMouseScroll', this.wheel, false);
          }
          window.onmousewheel = document.onmousewheel = this.wheel;
          document.onkeydown = this.keydown;
        },
        wheel(e) {
          this.preventDefault(e);
        },
        // 阻止冒泡事件传递
        preventDefault(e) {
          e = e || window.event;
          if (e.preventDefault) e.preventDefault();
          e.returnValue = false;
        },
        // 阻止键盘移动网页
        keydown(e) {
          for (var i = this.keys.length; i--; ) {
            if (e.keyCode === this.keys[i]) {
              this.preventDefault(e);
              return;
            }
          }
        },
      },
    };
    </script>

    <style scoped>
    .article p {
      text-indent: 2em;
    }
    /*btn*/
    #btn-wrapper {
      position: fixed;
      z-index: 100;
      bottom: 10%;
      right: 10%;
      background-color: white;
      border: 1px solid;
      padding: 5px;
    }
    #btn-wrapper > div {
      margin-bottom: 10px;
      text-align: center;
    }
    .enabled {
      color: green;
    }
    .disabled {
      color: red;
    }
    </style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116

## # 节点的操作

(转载)S 获取子节点、父节点和兄弟节点的若干种方式

### # 一、js 获取子节点的方式

#### # 1.通过获取 dom 方式直接获取子节点

其中 test 的父标签 id 的值，div 为标签的名字。getElementsByTagName 是一个方法。返回的是一个数组。在访问的时候要按数组的形式访问。

    var a = document.getElementById('test').getElementsByTagName('div');

1

#### # 2.通过 childNodes 获取子节点

使用 childNodes 获取子节点的时候，childNodes 返回的是子节点的集合，是一个数组的格式。他会把换行和空格也当成是节点信息。

    var b = document.getElementById('test').childNodes;

1

为了不显示不必须的换行的空格，我们如果要使用 childNodes 就必须进行必要的过滤。通过正则表达式式取掉不必要的信息。下面是过滤掉

    //去掉换行的空格
    for (var i = 0; i < b.length; i++) {
      if (b[i].nodeName == '#text' && !/\s/.test(b.nodeValue)) {
        document.getElementById('test').removeChild(b[i]);
      }
    }
    //打印测试
    for (var i = 0; i < b.length; i++) {
      console.log(i + '---------');
      console.log(b[i]);
    }
    //补充 document.getElementById("test").childElementCount;  可以直接获取长度 同length

1
2
3
4
5
6
7
8
9
10
11
12

#### # 4.通过 children 来获取子节点

利用 children 来获取子元素是最方便的，他也会返回出一个数组。对其获取子元素的访问只需按数组的访问形式即可。

    var getFirstChild = document.getElementById('test').children[0];

1

#### # 5.获取第一个子节点

firstChild 来获取第一个子元素，但是在有些情况下我们打印的时候会显示 undefined，这是什么情况呢？？其实 firstChild 和 childNodes 是一样的，在浏览器解析的时候会把他当换行和空格一起解析，其实你获取的是第一个子节点，只是这个子节点是一个换行或者是一个空格而已。那么不要忘记和 childNodes 一样处理呀。

    var getFirstChild = document.getElementById('test').firstChild;

1

#### # 6.firstElementChild 获取第一个子节点

使用 firstElementChild 来获取第一个子元素的时候，这就没有 firstChild 的那种情况了。会获取到父元素第一个子元素的节点 这样就能直接显示出来文本信息了。他并不会匹配换行和空格信息。

    var getFirstChild = document.getElementById('test').firstElementChild;

1

#### # 7.获取最后一个子节点

lastChild 获取最后一个子节点的方式其实和 firstChild 是类似的。同样的 lastElementChild 和 firstElementChild 也是一样的。不再赘余。

    var getLastChildA = document.getElementById('test').lastChild;
    var getLastChildB = document.getElementById('test').lastElementChild;

1
2

### # 二、js 获取父节点的方式

#### # 1.parentNode 获取父节点

获取的是当前元素的直接父元素。parentNode 是 w3c 的标准。

    var p = document.getElementById('test').parentNode;

1

#### # 2.parentElement 获取父节点

parentElement 和 parentNode 一样，只是 parentElement 是 ie 的标准。

    var p1 = document.getElementById('test').parentElement;

1

#### # 3.offsetParent 获取所有父节点

一看 offset 我们就知道是偏移量 其实这个是于位置有关的上下级 ，直接能够获取到所有父亲节点， 这个对应的值是 body 下的所有节点信息。

    var p2 = document.getElementById('test').offsetParent;

1

### # 三、js 获取兄弟节点的方式

#### # 1.通过获取父亲节点再获取子节点来获取兄弟节点

    var brother1 = document.getElementById('test').parentNode.children[1];

1

#### # 2.获取上一个兄弟节点

在获取前一个兄弟节点的时候可以使用 previousSibling 和 previousElementSibling。他们的区别是 previousSibling 会匹配字符，包括换行和空格，而不是节点。previousElementSibling 则直接匹配节点。

    var brother2 = document.getElementById('test').previousElementSibling;
    var brother3 = document.getElementById('test').previousSibling;

1
2

#### # 3.获取下一个兄弟节点

同 previousSibling 和 previousElementSibling，nextSibling 和 nextElementSibling 也是类似的。

    var brother4 = document.getElementById('test').nextElementSibling;
    var brother5 = document.getElementById('test').nextSibling;

1
2

作者：-老 K-
来源：CSDN
原文：https://blog.csdn.net/laok_/article/details/75760572
版权声明：本文为博主原创文章，转载请附上博文链接！

## # 原生 Ajax 学习

- https://zacklive.com/javascript-dom-ajax/
- 你真的会使用 XMLHttpRequest 吗？

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

#### # 检测并兼容所有浏览器包括 IE7 之流的远古浏览器中是否存在 XHR 对象

    function createXHR() {
      if (typeof XMLHttpRequset != 'undefined') {
        return new XMLHttpRequest();
      } else if (typeof ActiveXobject != 'undefined') {
        if (typeof arguments.callee.activeXString != 'string') {
          var versions = [
              'MSXML2.XMLHttp.6.0',
              'MSXML2.XMLHttp.3.0',
              'MSXML2.XMLHttp',
            ],
            i,
            len;
          for (i = 0, len = versions.length; i < len; i++) {
            try {
              new ActiveXObject(versions[i]);
              arguments.callee.activeXString = versions[i];
              break;
            } catch (ex) {
              // 跳过
            }
          }
        }
        return new ActiveXObject(arguments.callee.activeXString);
      } else {
        throw new Error('No XHR object available');
      }
    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

#### # 创建 XHR 对象

    var xhr = createXHR();

1

#### # 使用

    /**
     * xhr对象中的open参数设定
     * @param {string} method   要使用的HTTP方法，比如「GET」、「POST」、
     *                          「PUT」、「DELETE」、等。对于非HTTP(S) URL被忽略。
     * @param {string} url      一个DOMString表示要向其发送请求的URL。
     * @param {Boolean} async   可选;一个可选的布尔参数，默认为true，表示要不要异步执行操作。
     *                          如果值为false，send()方法直到收到答复前不会返回。如果true，
     *                          已完成事务的通知可供事件监听器使用。
     *                          如果multipart属性为true则这个必须为true，否则将引发异常。
     * @param {String} user     可选.可选的用户名用于认证用途；默认为null。
     * @param {String} password 可选的密码用于认证用途，默认为null。
     */
    // 语法
    xhr.open(method, url);
    xhr.open(method, url, async);
    xhr.open(method, url, async, user);
    xhr.open(method, url, async, user, password);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

    xhr.open('get', 'example.txt', false);
    xhr.send(null);

    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
      alert(xhr.responseText);
    } else {
      alert('Request was unsuccessful: ' + xhr.status);
    }

1
2
3
4
5
6
7
8

### # readyState

状态码 | 说明
--- | ---
0 | 未初始化.尚未调用 open()方法
1 | 启动。已经调用 open()方法，但尚未调用 send()方法。
2 | 发送。已经调用 send()方法，但尚未接收到响应。
3 | 接收。已经接收到部分响应数据。
4 | 完成。已经接收到全部响应数据，而且已经可以在客户端使用了。

    var xhr = createXHR();
    xhr.onreadystatechange = function() {
      if (xhr.readyState == 4) {
        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
          alert(xhr.responseText);
        } else {
          alert('Request was unsuccessful: ' + xhr.status);
        }
      }
    };
    xhr.open('get', 'example.txt', true);
    xhr.send(null);

1
2
3
4
5
6
7
8
9
10
11
12

### # HTTP 头部信息

- 可使用`setRequestHeader()`方法可以设置自定义的请求头部信息

参数 | 说明
--- | ---
Accept | 浏览器能够处理的内容类型。
Accept-Charset | 浏览器能够显示的字符集。
Accept-Encoding | 浏览器能够处理的压缩编码。
Accept-Language | 浏览器当前设置的语言。
Connection | 浏览器与服务器之间连接的类型。
Cookie | 当前页面设置的任何 Cookie。
Host | 发出请求的页面所在的域 。
Referer | 发出请求的页面的 URI。注意，HTTP 规范将这个头部字段拼写错了，而为保证与规范一致，也只能将错就错了。（这个英文单词的正确拼法应该是 referrer。）
User-Agent | 浏览器的用户代理字符串。

    var xhr = createXHR();
    xhr.onreadystatechange = function() {
      if (xhr.readyState == 4) {
        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
          alert(xhr.responseText);
        } else {
          alert('Request was unsuccessful: ' + xhr.status);
        }
      }
    };
    xhr.open('get', 'example.php', true);
    xhr.setRequestHeader('MyHeader', 'MyValue');
    xhr.send(null);

1
2
3
4
5
6
7
8
9
10
11
12
13

### # GET 请求

    // 语法
    xhr.open('get', 'example.php?name1=value1&name2=value2', true);
    // 向现有URL的末尾添加查询字符串参数
    function addURLParam(url, name, value) {
      url += url.indexOf('?') == -1 ? '?' : '&';
      url += encodeURIComponent(name) + '=' + encodeURIComponent(value);
      return url;
    }
    // 使用
    var url = 'example.php';
    //添加参数
    url = addURLParam(url, 'name', 'Nicholas');
    url = addURLParam(url, 'book', 'Professional	JavaScript');
    //初始化请求
    xhr.open('get', url, false);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

### # POST 请求

    // 语法
    xhr.open('post', 'example.php', true);
    // 数据序列化,并提交
    function submitData() {
      var xhr = createXHR();
      xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
          if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
            alert(xhr.responseText);
          } else {
            alert('Request	was	unsuccessful:	' + xhr.status);
          }
        }
      };
      xhr.open('post', 'postexample.php', true);
      xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
      var form = document.getElementById('user-info');
      xhr.send(serialize(form));
    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

### # FormData

    // 创建`FormData`并添加数据
    var data = new FormData();
    data.append('name', 'Nicholas');
    // 使用
    var xhr = createXHR();
    xhr.onreadystatechange = function() {
      if (xhr.readyState == 4) {
        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
          alert(xhr.responseText);
        } else {
          alert('Request	was	unsuccessful:	' + xhr.status);
        }
      }
    };
    xhr.open('post', 'postexample.php', true);
    var form = document.getElementById('user-info');
    xhr.send(new FormData(form));

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

#### # 超时设定

    xhr.timeout = 1000; //将超时设置为1秒钟(仅适用于IE8+)

1

### # es5 示例代码

#### # 跨域

#### # 异常处理

### # es6 示例代码

#### # 跨域

#### # promise 调用

## # 正则截取指定字符串

### # 参考文章

### # 正则截取指定字符串

    let str='{"asd":\\1234\\1234\\1234\\1234,"true"},
             {"sada":\\1111\\1234\\1234\\4444,"true"}';
    let substr = str.match(/"sada":(\S*),"true"/);
    console.log(substr[1]); // \\1111\\1234\\1234\\4444

1
2
3
4

## # 浏览器基本信息判断

    /*
      * 智能机浏览器版本信息:
      *
      */
    var browser = {
      versions: (function() {
        var u = navigator.userAgent,
          app = navigator.appVersion;
        console.log(u);
        return {
          //移动终端浏览器版本信息
          trident: u.indexOf('Trident') > -1, //IE内核
          presto: u.indexOf('Presto') > -1, //opera内核
          webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
          gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
          mobile: !!u.match(/Mobile/g), //去掉浏览器内核判断
          //        mobile: !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/), //是否为移动终端
          ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
          android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
          iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者QQHD浏览器
          iPad: u.indexOf('iPad') > -1, //是否iPad
          webApp: u.indexOf('Safari') == -1, //是否web应该程序，没有头部与底部
        };
      })(),
      language: (navigator.browserLanguage || navigator.language).toLowerCase(),
    };
    document.writeln('语言版本: ' + browser.language);
    document.writeln(' 是否为移动终端: ' + browser.versions.mobile);
    document.writeln(' 是否为webKit: ' + browser.versions.webKit);
    document.writeln(' ios终端: ' + browser.versions.ios);
    document.writeln(' android终端: ' + browser.versions.android);
    document.writeln(' 是否为iPhone: ' + browser.versions.iPhone);
    document.writeln(' 是否iPad: ' + browser.versions.iPad);
    document.writeln(navigator.userAgent);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

## # JavaScript|jQuery 判断元素即将出现在文档可视区域或文档可视区域的顶部

    /* JavaScript判断元素即将出现在文档可视区域或离开文档可视区域.
    一、判断元素是否处于可视文档区域顶部
    判断条件:DOMTop.offsetTop + clientHeight - 10 < clientHeight + scrollTop
    解析:
      获取元素距离文档顶端的长度,然后与窗口的高度相加;
      接着,再通过获取窗口滚动条顶端与文档顶端的距离;
      并通过判断得到元素是否处于,距离可视文档区域的顶部10个单位的位置.
    二、判断元素是否即将出现在可视窗口的底部
    判断条件:DOMTop.offsetTop -10 < clientHeight + scrollTop
    解析:基本思路同上一致.
     */
    function init() {
      var DOMTop = document.getElementById('box');
      document.addEventListener('scroll', function() {
        var clientHeight = document.documentElement.clientHeight;
        var scrollTop = document.documentElement.scrollTop;
        if (DOMTop.offsetTop + clientHeight - 10 < clientHeight + scrollTop) {
          console.log('发现元素');
        }
      });
    }

    window.onload = init;
    // delete init();

    /*jQuery判断元素即将出现在文档可视区域或离开文档可视区域.
    思路同上一致,表达方式不同
     当元素距离可视区域还有10的长度时,执行相关程序*/
    /*$(document).ready(function () {
      $(window).scroll(function () {
        // console.log($(window).scrollTop() +  $(window).height())
        // 文档距离屏幕可视区域的距离
        var DOMTop = $('.box').offset().top + 10;
        // 文档已经滑动的距离 + 窗口的高度
        var DOMScrollHeight = $(window).scrollTop() +  $(window).height();
        // 元素距离可视区域顶部距离为10的时候触发
        if (DOMTop < DOMScrollHeight) {
          console.log('DOMTop' + DOMTop);
          console.log('DOMScrollHeight' + DOMScrollHeight);
        }
      });
    });*/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

## # 导航条动画，设定

    function navAnimation() {
      let DOMTop = document.getElementById('nav'), // 获取导航对象
        clientHeight = document.documentElement.clientHeight, // 获取窗口可视区域高度
        tru = true, // 是否替换类名的依据
        clientHeightScrollTop =
          clientHeight + DOMTop.offsetTop + DOMTop.clientHeight; // 是否替换类名的依据
      // 监听文档滚动条事件，绑定动画
      document.addEventListener(
        'scroll',
        function() {
          let scrollTop = null;
          if (document.body.scrollTop !== 0) {
            scrollTop = document.body.scrollTop;
          } else {
            scrollTop = document.documentElement.scrollTop;
          }
          if (tru && clientHeightScrollTop < clientHeight + scrollTop) {
            DOMTop.setAttribute('class', 'page-nav top');
            tru = false;
          }
          if (clientHeightScrollTop > clientHeight + scrollTop) {
            DOMTop.setAttribute('class', 'page-nav');
            tru = true;
          }
        },
        false,
      );
    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

## # 锚链接跳转过渡

    /*
    # 锚链接跳转过度
    条件：
      1.目标位置 & 滚动条位置 距离过近
      2.目标位置 > 滚动条位置
      3.目标位置 < 滚动条位置
    策略：
      1.获取需要绑定事件的对象；
      2.使用for循环语句，给获取到的对象集合绑定事件；
      3.window.scrollTo(X,Y); 备注：X=window水平方向的滚动条移动位置；Y=window水平方向的滚动条移动位置;
      4.根据条件，执行不同事件。
      5.获取`目标位置 & 滚动条位置`的间距，除以25。然后用该数值与`滚动条位置`相加或相减。而累加或累减的过程通过setInterval()定时器方法来控制。
      6.程序执行完毕之后，用clearInterval()方法清除定时器。
     */
    anchorLinkJumpTransition();

    function anchorLinkJumpTransition() {
      let aTag = document.querySelectorAll('.animation-top a');
      for (let i = 0; i < aTag.length; i++) {
        aTag[i].addEventListener(
          'click',
          function() {
            var $target = document.getElementById(this.hash.slice(1));
            scrollToTop($target.offsetTop);

            function scrollToTop(scrollDuration) {
              let scrollTop = null, // 滚动条当前位置
                scrollStep = null, // 滚动条累加前的位置
                s = 0; // 关闭计时器的条件 s = 25时
              if (document.body.scrollTop !== 0) {
                scrollTop = document.body.scrollTop;
              } else {
                scrollTop = document.documentElement.scrollTop;
              }
              scrollStep = scrollTop = Number.parseInt(scrollTop);
              console.log('滚动前，滚动条位置:' + scrollTop);
              console.log('目标位置：' + scrollDuration);
              // 目标位置 & 滚动条位置 距离过近
              console.log(Math.abs(scrollTop - scrollDuration));
              if (Math.abs(scrollTop - scrollDuration) > 21) {
                let scrollInterval = setInterval(function() {
                  if (s < 26) {
                    // s 是累加的，所以用来跟`目标位置 & 滚动条位置`的间距，相乘，获得过渡效果。
                    window.scrollTo(
                      0,
                      scrollStep + ((scrollDuration - scrollTop) / 25) * s,
                    );
                    s++;
                  } else {
                    clearInterval(scrollInterval);
                    scrollStep = null;
                  }
                }, 10);
              }
            }
          },
          false,
        );
      }
    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

## # 文章标题的动画

    function animateIn() {
      let animateIn = document.querySelectorAll('.container .title strong');
      // console.log(animateIn.getAttribute('class'))
      // console.log(animateIn)
      let that = null;
      for (let i = 0; i < animateIn.length; i++) {
        animateIn[i].addEventListener('click', function () {
          if (that !== null) {
            that.removeAttribute('class');
            if (that === this) {
              this.removeAttribute('class');
              that = null;
              return;
            }
          }
          this.setAttribute('class', 'animate-in');
          that = this;
        })
      }
    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20