百度IFE2018任务--20-21天 - 《web前端》

原生javascript中，用cssText如何重写内联css
注意：前面的分号是为了兼容ie，加号是为了不清除已有的内联样式
代码：

Element.style.cssText += ';width:100px;height:100px;top:100px;left:100px;'

自定义一个方法来实现追加className的效果代码如下
代码：

function addClass(element,value) {
    if (!element.className) {
        element.className = value;
    } else {
        newClassName = element.className;
        newClassName += " "; //这句代码将追加的类名分开
        newClassName += value;
        element.className = newClassName;
    }
}

跨浏览器事件处理程序
代码：

var EventUtil = {
   addHandlers: function (element, type, handlers) {
      if (element.addEventListener) {
          // Chrome、FireFox、Opera、Safari、IE9.0及其以上版本
         element.addEventListener(type, handlers, false);
      } else if (element.attachEvent) {
          // IE8.0及其以下版本
         element.attachEvent('on' + type, handlers);
      } else {
          // 早期浏览器
         element['on' + type] = handlers;
      }
   },
   removeHandlers: function (element, type, handlers) {
      if (element.removeEventListener) {
         element.removeEventListener(type, handlers, false);
      } else if (element.detachEvent) {
         element.detachEvent('on' + type, handlers);
      } else {
         element['on' + type] = null;
      }
   }
};

点击某一个 Li 标签时，将 Li 的背景色显示在 P 标签内，并将 P 标签中的文字颜色设置成 Li 的背景色
代码：

<body>            
    <ul class="palette">
        <li style="background-color:crimson"></li>
        <li style="background-color:bisque"></li>
        <li style="background-color:blueviolet"></li>
        <li style="background-color:coral"></li>
        <li style="background-color:chartreuse"></li>
        <li style="background-color:darkolivegreen"></li>
        <li style="background-color:cyan"></li>
        <li style="background-color:#194738"></li>        
    </ul>
    <p class="color-picker"></p>
    <script>
        /*
            基于如上 HTML，实现如下功能：
            点击某一个 Li 标签时，将 Li 的背景色显示在 P 标签内，并将 P 标签中的文字颜色设置成 Li 的背景色
        */
        var ul = document.querySelector('.palette');
        var p = document.querySelector('.color-picker');
        ul.onclick = function(e){
            var ev = e || window.event;
            //target是火狐，srcElement是IE
            var target = ev.target || ev.srcElement;
            var color = target.style.backgroundColor;
            p.textContent = color;
            p.style.cssText = 'color:'+color+';';
        }
    </script>
</body>

setInterval
参考：https://www.cnblogs.com/everest33Tong/p/6322484.html
setInterval(“fun()”,1000); 这句如果写在window.onload的内部，会报错
原因：这种调用fun的写法类似eval语句，是将引号内的代码进行处理执行。这时候，是在全局作用域内找fun()函数，但是window.onload对于window来说属于局部，局部外是找不到局部内的fun()函数的。

分别使用 setTimeout 和 setInterval 实现以下功能：
点击按钮时，开始改变 fade-obj 的透明度，开始一个淡出（逐渐消失）动画，直到透明度为0
在动画过程中，按钮的状态变为不可点击
在动画结束后，按钮状态恢复，且文字变成“淡入”
在按钮显示淡入的状态时，点击按钮，开始一个“淡入”（逐渐出现）的动画，和上面类似按钮不可点，直到透明度完全不透明
淡入动画结束后，按钮文字变为“淡出”
暂时不要使用 CSS animation （以后我们再学习）
思路：setTimeout方式的关键点是递归，每次递归都会将透明度修改1/10的程度，透明度走到底，递归就返回空值来结束这个过程。总共两个方法，淡入一个，淡出一个，每个方法都有递归。
代码（setTimeout方式）：

var fadeObj = document.querySelector('#fade-obj');
var o = 1;
var fadeBtn = document.querySelector('#fade-btn');
function cha(){
    if(o < 0){
        console.log(o);
        fadeBtn.removeAttribute('disabled');
        fadeBtn.textContent = '淡入';
        return;
    }
    o -= 0.1;
    fadeObj.style.opacity = o; 
    setTimeout(cha,100);
}
function cha2(){
    if(o > 1){
        console.log(o);
        fadeBtn.removeAttribute('disabled');
        fadeBtn.textContent = '淡出';
        return;
    }
    o += 0.1;
    fadeObj.style.opacity = o; 
    setTimeout(cha2,100);
}
fadeBtn.onclick = function(){
    if(fadeBtn.textContent == '淡出'){
        setTimeout(cha,100);
        fadeBtn.setAttribute('disabled','disabled');
    }else{
        setTimeout(cha2,100);
        fadeBtn.setAttribute('disabled','disabled');
    }
}

学习来实现一个帧动画：
基于一个我们提供的图片，实现 IFE2016中Erik笑容的动画
图片地址：http://ife.baidu.com/2016/sta…
注意，依然不要使用 CSS animation，因为我们这里要学习的是使用 JavaScript 来操作 CSS，而不是为了完成这个任务。
思路：分正方向和反方向。用定时器不断执行，每执行一次，就将整体图片向某个方向移动一张图的位置，同时将这个移动的位置对应的数字来修改背景图的纵坐标就可以了。
代码：

<head>
    <meta charset="UTF-8">    
    <title>IFE ECMAScript</title>
    <style>
        .round{
            width:480px;
            height:480px;
        }
    </style>
</head>
<body>            
    <div class="round">
    </div>
    <script>
        var roundBox = document.querySelector('.round');
        roundBox.style.backgroundImage = 'url(./erik_ce204002.jpg)';
        roundBox.style.backgroundRepeat = 'no-repeat';
        var m = 0;
        var fangxiang = true;
        setInterval(function(){
            if(fangxiang){
                if(m <= -8160){
                    fangxiang = false;
                }
                m -= 480;
                roundBox.style.backgroundPositionY = m + 'px';
            }else{
                if(m >= 0){
                    fangxiang = true;
                }
                m += 480;
                roundBox.style.backgroundPositionY = m + 'px';
            }
        },100);
    </script>
</body>