9_js 日期对象Date()、js定时器、获取窗口属性、获取dom尺寸、脚本化css

日期对象Date()

封装函数，打印当前是何年何月何日何时，几分几秒

直接看w3c上的介绍吧
https://www.w3school.com.cn/js/jsref_obj_date.asp

js定时器

• setInterval

       var time = 1000;
       setInterval(function () {
           console.log("a");
       }, time);// 每过一秒执行一次
       time = 2000;// 这边把time重新修改之后，setInterval不会受到任何影响，因为time只会取一次值
  

      var firstTime = new Date().getTime();
      setInterval(function () {
          var lastTime = new Date().getTime();
          console.log(lastTime - firstTime);// setInterval的一秒是不精准的
          firstTime = lastTime;
      }, 1000);
  

• setTimeout;
  用来做一些试用期的功能，或者穿插广告等功能
• clearInterval();
• clearTimeout();
• 全局对象 window上的方法,内部函数this指向 window
• 注意: setInterval(“func()”,1000);

三分钟定时器

    minutes: <input type="text" value="0">
    seconds: <input type="text" value="0">
    <script>
        var minutesNode = document.getElementsByTagName('input')[0];
        var secondsNode = document.getElementsByTagName('input')[1];
        var minutes = 0,
            seconds = 0;
        var timer = setInterval(function () {
            seconds++;
            if(seconds == 60) {
                seconds = 0;
                minutes ++;
            }
            secondsNode.value = seconds;
            minutesNode.value = minutes;
            if (minutes == 3) { // 三分钟定时器
                clearInterval(timer);
            }
        },1000);
    </script>

查看滚动条的滚动距离

• window.pageXOffset/pageYOffset
  • IE8及8以下不兼容
  • document.body/documentElement.scrollLeft/scrollTop
    • 兼容性比较混乱，用时取两个值相加，因为不可能存在两个同时有值，其中一个必定为零
  • 封装兼容性方法，求滚动轮滚动距离getScrollOffset()

查看滚动条的滚动距离(兼容IE8及IE8以下的浏览器)

        function getScrollOffset() {
            if(window.pageXOffset) {
                return {
                    x: window.pageXOffset,
                    y: window.pageYOffset
                }
            }else{
                    return {
                        x : document.body.scrollLeft + document.documentElement.scrollLeft,
                        y : document.body.scrollTop + document.documentElement.scrollTop
                    }
            }
        }

查看视口的尺寸

• window.innerWidth/innerHeight

  • IE8及IE8以下不兼容

• document.documentElement.clientWidth/clientHeight

  • 标准模式下，任意浏览器都兼容

• document.body.clientWidth/clientHeight

  • 适用于怪异模式（混杂模式）下的浏览器

  什么是标准模式和怪异模式呢?
  把加上就是标准模式
  把它去掉就是怪异模式，怪异模式就是它所识别的不再是最新的语法，而是试图去兼容旧版本的语法。

• 封装兼容性方法，返回浏览器视口尺寸getViewportOffset()

document.compatMode 返回：

1. “CSS1Compat” 当前是标准模式
2. “BackCompat” 当前向后兼容（怪异模式/混杂模式）

        function getViewportOffset(){
            if(window.innerWidth){
                return {
                    w : window.innerWidth,
                    h : window.innerHeight
                }
            }else{
                if(document.compatMode === "BackCompat"){
                    return {
                        w : document.body.clientWidth,
                        h : document.body.clientHeight
                    }
                }else{
                    return {
                        w : document.documentElement.clientWidth,
                        h : document.documentElement.clientHeight
                    }
                }
            }
        }

查看元素的几何尺寸

• domEle.getBoundingClientRect();
• 兼容性很好
• 该方法返回一个对象，对象里面有left,top,right,bottom等属性。left和top代表该元素左上角的X和Y坐标，right和bottom代表元素右下角的X和Y坐标
• height和width属性老版本IE并未实现
  如果要知道这两个属性的值，就用left、right、top、bottom相减即可
• 返回的结果并不是“实时的”

    <div style="width:100px;height:100px;background-color: red;position:absolute;left:100px;top:100px"></div>
    <script>
        var div = document.getElementsByTagName('div')[0];
        var data = div.getBoundingClientRect();
        console.log(data);
    </script>

查看元素的尺寸

• dom.offsetWidth，dom.offsetHeight

查看元素的位置

• dom.offsetLeft, dom.offsetTop
• 对于无定位父级的元素，返回相对文档的坐标。对于有定位父级的元素，返回相对于最近的有定位的父级的坐标。
• dom.offsetParent
• 返回最近的有定位的父级，如无，返回body, body.offsetParent 返回null
• eg：求元素相对于文档的坐标

让滚动条滚动

• window上有三个方法
• scroll(),scrollTo(),scrollBy();
• 三个方法功能类似，用法都是将x,y坐标传入。即实现让滚动轮滚动到当前位置。scroll()和scrollTo()功能一样，都是滚动到该界面的x,y坐标，scrollBy()是从当前开始向后滚动x,y距离
• 区别：scrollBy()会在之前的数据基础之上做累加。
• eg：利用scrollBy() 快速阅读的功能

手机阅读器的自动阅读功能

<!doctype html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <h1>第一章星空中的青铜巨棺</h1>
　　<p>生命是世间最伟大的奇迹。</p>
　　<p>四方上下曰宇。宇虽有实，而无定处可求。往古来今曰宙。宙虽有增长，不知其始之所至。</p>
　　<p>浩瀚的宇宙，无垠的星空，许多科学家推测，地球可能是唯一的生命源地。</p>
　　<p>人类其实很孤独。在苍茫的天宇中，虽然有亿万星辰，但是却很难寻到第二颗生命源星。</p>
　　<p>不过人类从来没有放弃过探索，自上世纪以来已经发射诸多太空探测器。</p>
　　<p>旅行者二号是一艘无人外太空探测器，于一九七七年在美国肯尼迪航天中心发射升空。</p>
　　<p>它上面携带着一张主题为“向宇宙致意”的镀金唱片，里面包含一些流行音乐和用地球五十五种语言录制的问候辞，以冀有一天被可能存在的外星文明拦截和收到。</p>
　　<p>从上世纪七十年代到现在，旅行者二号一直在孤独的旅行，在茫茫宇宙中它如一粒尘埃般渺小。</p>
　　<p>同时代的外太空探测器，大多或已经发生故障，或已经中断讯号联系，永远的消失在了枯寂的宇宙中。</p>
　　<p>三十几年过去了，科技在不断发展，人类已经研制出更加先进的外太空探测器，也许不久的将来对星空的探索会取得更进一步的发展。</p>
　　<p>但纵然如此，在相当长的时间内，新型外太空探测器依然无法追上旅行者二号的步伐。</p>
　　<p>三十三年过去了，旅行者二号距离地球已经有一百四十亿公里。</p>
　　<p>此时此刻，它已经达到第三宇宙速度，轨道再也不能引导其飞返太阳系，成为了一艘星际太空船。</p>
　　<p>黑暗与冰冷的宇宙中，星辰点点，犹如一颗颗晶莹的钻石镶嵌在黑幕上。</p>
　　<p>旅行者二号太空探测器虽然正在极速飞行，但是在幽冷与无垠的宇宙中却像是一只小小的蚁虫在黑暗的大地上缓缓爬行。</p>
　　<p>三十多年过去后，就在今日这一刻，旅行者二号有了惊人的发现！</p>
　　<p>在枯寂的宇宙中，九具庞大的尸体静静的横在那里……</p>
　　<p>二零一零年五月二十二日，美国宇航局接收到旅行者二号传送回的一组神秘的数据信息，经过艰难的破译与还原，他们看到了一幅不可思议的画面。</p>
　　<p>在这一刻宇航局主监控室内所有人同时变色，最后如木雕泥塑般一动不动，他们震惊到了无以复加的地步！</p>
　　<p>直至过了很久众人才回过神来，而后主监控室内一下子沸腾了。</p>
　　<p>“上帝，我看到了什么？”</p>
　　<p>“这怎么可能，无法相信！”</p>
　　<p>……</p>
　　<p>旅行者二号早已不受引导，只能单一的前进，传送回这组神秘的数据信息后，在那片漆黑的宇宙空间匆匆而过，驶向更加幽暗与深远的星域。</p>
　　<p>由于那片星空太遥远，纵然有了重大发现，捕捉到了一幅震撼性的画面，人类目前也无能为力。</p>
　　<p>这组神秘信息并没有对外公布。而不久后，旅行者二号发生了故障，中断了与地球的讯号传送。</p>
　　<p>也许至此可以画上一个句号了，不过有时候事情往往会出乎人们的预料。</p>
　　<p>无论是对星空的观测与探索，还是进行生命与物理的科学研究，空间站都具有得天独厚的优越环境。</p>
　　<p>从一九七一年苏联首先发射载人空间站成功，到目前为止全世界已发射了九个空间站。</p>
　　<p>二零一零年六月十一日，此时此刻，绕地而行的国际空间站内，几名宇航员同时变了颜色，瞳孔急骤收缩。</p>
　　<p>时至今日，神的存在，早已被否定。如果还有人继续信仰，那也只是因心灵空虚而寻找一份寄托而已。</p>
　　<p>但是就在这一刻，几名宇航精英的思想受到了强烈的的冲击，他们看到了一幅不可思议的画面。</p>
　　<p>在国际空间站外，冰冷与黑暗并存的宇宙中，九条庞然大物一动不动，仿佛亘古就已横在那里，让人感觉到无尽的苍凉与久远，那竟然是九具龙尸！</p>
　　<p>与古代神话传说中的龙一般无二。</p>
　　<p>每具龙尸都长达百米，犹如铁水浇铸而成，充满了震撼性的力感。</p>
　　<p>九具龙尸皆是五爪黑龙，除却龙角晶莹剔透、紫光闪闪外，龙身通体呈黑色，乌光烁烁，鳞片在黑暗中闪烁着点点神秘的光华。</p>
　　<p>龙，传说中的存在，与神并立，凌驾于自然规律之上。但是，科学发展到现在，还有谁会相信龙真的存在？</p>
　　<p>国际空间站内的几名宇航员，思想受到了强烈的冲击，眼前所见让他们感觉不可思议！</p>
　　<p>枯寂的宇宙中，冰冷的龙尸似不可摧毁的钢铁长城，甚至能够感觉到尸身中所蕴含的恐怖力量。</p>
　　<p>只是，它们已经失去了生气，永远的安息在了幽冷的宇宙空间中。</p>
　　<p>“那是……”</p>
　　<p>被深深震撼过后，几名宇航精英的瞳孔再次急骤收缩，他们看到了更为让人震惊的画面。</p>
　　<p>九具龙尸都长达百米，在尾端皆绑缚着碗口粗的黑色铁索，连向九具龙尸身后那片黑暗的宇宙空间，在那里静静的悬着一口长达二十米的青铜棺椁。</p>
　　<p>巨索千锤百炼，粗长而又坚固，点点乌光令它显得阴寒无比。</p>
　　<p>青铜巨棺古朴无华，上面有一些模糊的古老图案，充满了岁月的沧桑感，也不知道在宇宙中漂浮多少年了。</p>
　　<p>九龙拉棺！</p>
　　<p>在这漆黑而又冰冷的宇宙中，九具龙尸与青铜巨棺被粗长的黑色铁索连在一起，显得极其震撼。</p>
　　<p>在面对那不可思议的监控画面一阵失神后，几名宇航精英第一时间发出了呼叫讯号。</p>
    <p>“呼叫地球……”</p>

    <div style="width:100px;height:100px;background-color:orange;color:#fff;font-size:40px;
    font-weight:bold;text-align: center;line-height: 100px;position:fixed;bottom:200px;
    right:50px;border-radius:50%;opacity:0.5;">start</div>
    <div style="width:100px;height:100px;background-color:#0f0;color:#fff;font-size:40px;
    font-weight:bold;text-align: center;line-height: 100px;position:fixed;bottom:80px;
    right:50px;border-radius:50%;opacity:0.5;">stop</div>
    <script>
        var start = document.getElementsByTagName('div')[0];
        var stop = document.getElementsByTagName('div')[1];
        var timer = 0;
        var key = true;// 如果不加锁时，一直点start按钮会变快，而且stop起不了作用了，因为之前创建的定时器被timer覆盖，所以要加个锁来控制一下
        start.onclick = function (){
            if(key) {
                timer = setInterval(function (){
                    window.scrollBy(0,10);
                },100);
                key = false;
            }
        }
        stop.onclick = function (){
            clearInterval(timer);
            key = true;
        }
    </script>
</body>
</html>

读写元素css属性

• dom.style.prop
  • 可读写行间样式，没有兼容性问题，碰到float这样的关键字属性，前面应加css
  • eg:dom.style.float — > dom.style.cssFloat
  • 复合属性必须拆解，组合单词变成小驼峰式写法
  • 写入的值必须是字符串格式

查询计算样式

• window.getComputedStyle(ele,null);
  获取元素的属性，null中可以获取伪元素的属性

  <!doctype html>
    <html lang="en">
    <head>
        <title>Document</title>
        <style>
            div{
                width:10em;
            }
            div::after{
                content:"";
                width: 10px;
                height: 10px;
                background-color: green;
                display: inline-block;
            }
        </style>
    </head>
    <body>
        <div style="width:100px;height:100px;background-color: red;"></div>
        <script>
            var div = document.getElementsByTagName('div')[0];
            var data = window.getComputedStyle(div, "after").width;
            console.log(data);
        </script>
    </body>
    </html>
  

• 计算样式只读
• 返回的计算样式的值都是绝对值，没有相对单位
• IE8 及 IE8以下不兼容
  查询样式
  ele.currentStyle
  计算样式只读
  返回的计算样式的值不是经过转换的绝对值
  IE独有的属性
  封装兼容性方法getStyle(obj,prop);

  <!doctype html>
  <html lang="en">
  <head>
      <title>Document</title>
  </head>
  <body>
      <div style="width:100px;height:100px;background-color: red;position:absolute;left:0;top:0;"></div>
      <script>
          function getStyle(elem, prop) {
              if (window.getComputedStyle) {
                  return window.getComputedStyle(elem, null)[prop];
              } else {
                  return elem.currentStyle[prop];
              }
          }
          var div = document.getElementsByTagName('div')[0];
          var timer = setInterval(function () {
              div.style.left = parseInt(getStyle(div, 'left')) + 1 + 'px';
              if(parseInt(div.style.left) > 500) {
                  clearInterval(timer);
              }
          }, 10);
      </script>
  </body>
  </html>