1. 图片自动旋转
原理：通过页面加载完成事件，用定时器来控制图片每次旋转的角度
//转圈 window.onload=function(){ var dsq=setInterval("sa()",100); var dsq=0; var n=0; }; function sa(){ n++; var deg1=n*2; var sa1=document.getElementById("zq1"); sa1.style.transform=("rotate("+deg1+"deg)"); }
2.数字叠加
原理：可以通过监听事件或者页面加载完成事件来实现，当滚动条的值大于多少的时候，执行定时器，用定时器来控制判断，判断条件为HTML了的值小于多少的时候，是数字不断叠加，当满足条件时，停止定时器。
var a6=0; var ppp=0; window.onscroll=function(){ var pp =window.scrollY; // 数字叠加 // 找到元素并赋值 var a1=document.getElementById("gw"); // 要改变的值 var a5=100; // 添加定时器并赋值 var a7=setInterval(function(){ // 判断 if(pp>1000 && ppp===0){ // 当满足上面判断条件时，再次判断 if(a6>=1862690){ // 当满足上面条件时赋值PPP为9，结束监听事件，并结束定时器 ppp=9; clearInterval(a7); } // a6的值为本身加上a5的数 a6 +=a5; // a1里面的内容为a6的值 a1.innerHTML=a6;//a6++; } },1); };
3.图片移动
原理：通过DOM操作，来改变边距的值，在用定时器来控制移动的速度。
var xha2=xh2.style.marginTop.slice(0,-2);
获取marginTop的值，slice(0,-2) 是指获取除最后两位的值，比如，10px, 就会获取到10
window.onscroll=function (){ var pp =window.scrollY; if(pp>1400){ var xh1=document.getElementById("csa1"); var xha1=xh1.style.marginTop.slice(0,-2); var xhb1= setInterval(function(){ if(xha1<=85){ xh1.style.marginTop=xha1+1+"px"; xha1++; }else{ clearInterval(xhb1); } },1); } }
4.事件流
多个彼此嵌套元素，他们拥有相同的事件，最内部元素事件被触发后，外边多个元素的同类型事件也会被触发，多个元素他们同类型事件同时执行的效果称为“事件流”。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<div style="background: #ccc; 100px;height: 100px;" onMouseOver="show()">
</div>
<div id="qq" style=" 100px;height: 100px; background: red;" onMouseOut="dis()">
<div style=" 50px;height: 50px;background: green;"></div>
<div style=" 50px;height: 50px;background: green;"></div>
</div>
</body>
<ml>
<script>
function isMouseLeaveOrEnter(e, handler) {
var reltg=e.relatedTarget?e.relatedTarget:e.type=='mouseout'?e.toElement:e.fromElement;
while (reltg && reltg != handler){
reltg = reltg.parentNode;
}
return (reltg != handler);
}
var box=document.getElementById("qq");
box.onmouseout=function(ev){
var ev=ev||window.event;
if(!isMouseLeaveOrEnter(ev,box)){
return false;
}
box.style.display = 'none';
}
</script>