前端小结

1 animation的使用

  <div >

        <span></span>

     <ul class=’active’>

       <li></li> <li></li> <li></li>

    </ul>

</div>

1 .active写动画 

2 @keyframes flash{}

   3 Ul先none   后  divspan:hover ul  block

  4 ul需要绝对定位

5要么就是在动画播放完了之后给它一个状态 animation-fill-mode : none | forwards | backwards |both; none，播放完之后不改变默认行为，默认值，forwards则是停在动画最后的的那个画面，backwards则是回调到动画最开始出现的画面，both则应用为动画结束或开始的状态，

 6 小三角的动画

方法一

.iden div .rota{

        -webkit-transition:all 1s;

      transition:all 1s;

 

      }

      .iden div:hover.rota{

      -webkit-transform:rotate(90deg);

        -moz-transform:rotate(90deg);

         -o-transform:rotate(90deg);

         transform:rotate(90deg);

    }

方法二

 

.left ul.first li:hover i.menu-icon {

     -webkit-animation:IconRotate .5sforwards ;

    -moz-animation:IconRotate .5sforwards ;

    -o-animation:IconRotate .5sforwards ;

    animation:IconRotate .5sforwards ;

}

  @-webkit-keyframes IconRotate {

    from {-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);}

   to   { -webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg);}

}

@-moz-keyframes IconRotate  {

    from { -webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);}

   to   { -webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg);}

}

@-o-keyframes IconRotate  {

    from {-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);}

   to   { -webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg);}

}

@keyframes IconRotate  {

    from {-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);}

   to   { -webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg);}

}

2 喷粉项目里面

  1  for(var key in data.result){

        if(key=='pre1-alk'){

            pre1_alk=data.result[key];

          }          

      }

    2  <tr  id="pre1-temp" class="temp">

       <th rowspan="3">预脱脂1</th>

       <th ><a href="detail.html?nodeId=pre1-temp">温度(25℃-60℃ )</a></th>

</tr>

var  str1= document.getElementById("pre1-temp");

for(var i=0;i<5;i++){

str1.innerHTML+="<td>"+pre1_temp[i]+"</td>";

}

3 生成4行8列的表格

for(var i=0;i<4;i++){

         document.write('<tr></tr>');

         for(varj=0;j<8;j++){

            document.write('<td>'+j+'</td>')

         }

    }

4  highchart图里面 下面时间显示为斜的

plotOptions: {

            series:{

                   label:{

                         connectorAllowed:false

                   }

            }

    },

5  appendchild

for(vari=0;i<150;i++){

           var spans=document.createElement('span');

                            div1.appendChild(spans);

                  }

  <tableid="theList">

        <thead>

            <th>姓名</th>

            <th>年龄</th>

            <th>性别</th>

            <th>操作</th>

        </thead>

        <tbody id="myBody"></tbody>

  </table>

function render(data) {

    for (let i = 0; i < data.length; i++) {

        let tr =document.createElement('tr')

        tr.innerHTML = '<td>'+data[i].name+'</td><td>'+data[i].age+'</td><td>'+data[i].sex+'</td><td><ahref="javascript:;">修改</a>&nbsp;&nbsp;<ahref="javascript:;">删除</a></td>'

        document.getElementById('myBody').appendChild(tr)

   }

}

6  数组

数组的添加和删除

arr[arr.length]=’张三’;

arr.push(‘张三’);

arr.unshift(‘公孙’);

arr.pop()  arr.shift()

数组的遍历

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

for(var keyin value){value[key]}

数组方法

Join   concat slice   splice   sort reverse

7 定时器

setInterval(demo,1000);

functiondemo(){

  var number=oDiv.innerHTML;

  number++;

  oDiv.innerHTML=number;

  if(number>=50){

  clearInterval(timer);

}

 

}

8 Math的几个函数

  Math.floor()   math.ceil()  math.round()

Math.max ()   Math.min ()  Math.random ()

9  对象数组

10 key values

11 父元素清除浮动

结尾处加空div标签 clear:both 

<div class="div1"> 
<divclass="left">Left</div> 
<divclass="right">Right</div> 
<div class="clearfloat"></div> 
</div> 

12 排他思想  用闭包做

不是排除所有   用闭包排除上一个

精髓在于  可以知道上一个的序号

13 闭包   物体的运动  速度可以当做参数传进去

Img1.οnmοusedοwn=move(30);

Function move(speed){

  Returnfunction(){

     Num+=speed;

     Img1.style.marginLeft=num+’px’;

}

}