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> <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’;
}
}