JavaScript定时器
1.往复运动动画
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>motion</title>
<script type="text/javascript">
window.onload = function(){ var iLeft = 0; var iSpeed = 3; var oDiv = document.getElementById('Div1'); /*clearInterval() 关闭*/ var timer = setInterval(function(){ iLeft += iSpeed; oDiv.style.left = iLeft + 'px'; if(iLeft>700){ /*右侧判断*/ iSpeed = -3; } if(iLeft<0){ /*左侧判断*/ iSpeed = 3; } },20) /*setInterval(函数，完成时间)*/}</script>
<style type="text/css">
.div1{ width: 100px; height: 100px; background-color: yellow; margin: 100px 0; position: absolute;}body{ margin: 0;}</style>
</head>
<body>
<div class="div1" id="Div1"></div>
</body>
</html>
2.无缝滚动
例子：小南子
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>小南子</title>
<script type="text/javascript">
window.onload = function(){ var oDiv = document.getElementById('slide'); /*获取块元素*/ var oBtn01 = document.getElementById('btn01'); var oBtn02 = document.getElementById('btn02'); var oUl = oDiv.getElementsByTagName('ul')[0]; /*获取的是元素集，取第一个*/ var iRan = 0; /*位移初始值*/ var iSpeed = -2; var iNowspeed = 0; /*临时存储*/ oUl.innerHTML = oUl.innerHTML+oUl.innerHTML; /*oUl.innerHTML是全部li，两个相加，相当于图片拼接*/ function moving(){ /*移动函数*/ iRan += iSpeed; /*位移量*/ if(iRan<-2060){ /*五个li移出*/ iRan = 0; /*回到初值，速度快，肉眼看不出*/ } if(iRan>0){ /*当第一张图片往右，立即拉到第二段图片的第一张*/ iRan = -2060; } oUl.style.left = iRan + 'px'; /*position的left*/ } var timer = setInterval(moving,20); /*定时器*/ oBtn01.onclick = function(){ /*点击控制方向*/ iSpeed = -2; } oBtn02.onclick = function(){ iSpeed = 2; } oDiv.onmouseover = function(){ /*鼠标移进*/ iNowspeed = iSpeed; iSpeed = 0; /*停止*/ } oDiv.onmouseout = function(){ /*鼠标移出*/ iSpeed = iNowspeed; /*恢复上次移动*/ }}</script>
<style type="text/css">
*{ /*把li的padding和margin消除*/ margin: 0; padding: 0;}.list_con{ width: 1236px; /*3张图片可视*/ height: 526px; /*图片高度*/ overflow: hidden; /*隐藏溢出*/ border: 1px solid #000; /*边框*/ margin: 10px auto 0; /*相对body*/ position: relative; /*父级position，relative*/ background-color: #F0F0F0; /*背景色*/}.list_con ul{ width: 3296px; /*8张图片宽度，太小会导致拼接出错*/ height: 506px; list-style: none; /*除去li样式*/ position: absolute; /*相对list_con*/ left: 0; /*初始位置*/ top: 0;}.list_con ul li{ float: left; /*向左靠齐*/ width: 392px; /*一张图片宽度*/ height: 506px; margin: 10px; /*图片间的距离*/ /*position: absolute;*/}.btn_con{ width: 1456px; /*两个按钮的所在的范围*/ height: 50px; margin: 230px auto 0; /*按钮位置*/ position: absolute; float: left;}.btn_con .left,.right{ width: 50px; /*按钮大小*/ height: 50px; background-color: gold; /*背景色*/ position: absolute; /*left: 0px; top: 0px;*/ font-size: 50px; /*<>的大小*/ border-radius: 25px; /*圆角*/ line-height: 50px; /*垂直居中*/ font-family: 'Arial'; /*字体*/ text-align: center; /*水平居中*/ cursor: pointer; /*鼠标光标，移到按钮会变成小手，像接触链接一样*/ opacity: 0.5; /*透明度*/}.right{ left: 1305px; /*按钮位置*/}.left{ left: 10px;}</style>
</head>
<body>
<div class="btn_con" id="btn"> <div class="left" id="btn01"><</div> <div class="right" id="btn02">></div> </div><div class="list_con" id="slide"> <ul> <li><a href="#"><img src="images/小林子1.jpg" alt="nanzi"></a></li> <li><a href="#"><img src="images/小林子2.png" alt="nanzi"></a></li> <li><a href="#"><img src="images/小林子3.png" alt="nanzi"></a></li> <li><a href="#"><img src="images/小林子4.png" alt="nanzi"></a></li> <li><a href="#"><img src="images/小林子5.png" alt="nanzi"></a></li> </ul></div>
</body>
</html>
3.变量作用域
变量作用域指的是变量的作用范围，JavaScript中的变量分为全局变量和局部变量。
（1）全局变量：在函数之外定义的变量，为整个页面公用，函数内部外部都可以访问。
（2）局部变量：在函数内部定义的变量，只能在定义改变量的函数内部访问，外部无法访问
声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。
