小结
定时器，设置一次性定时任务，格式
定时器 = setTimeout(函数名，豪秒数）
注，返回值是一个数字，整数
定时器，解除一次性的定时任务，格式
clearTimeout(定时器)
定时器，创建一个定时执行任务
定时器 = setInterval(函数名，豪秒数)
定时器，取消定时执行的任务
clearInterval(定时器)
document对象，根据类名获取对象，请获取类名为"box"的标签对象
标签对象数组 = document.getElementsByClassName("box")
事件，鼠标悬停事件，当鼠标移动到oDiv标签对象上时，触发move函数，写出代码
oDiv.onmouseover = move
标签对象.onmouseover = 函数名
setTimeout（函数名，豪秒数）
英文
set，设置
time,时间
out，超过
timeout,超过时间，超时，延时
setTimeout，设置延时
命名规则
js中，大部分方法都是小驼峰命名法
例如
parseInt等等
案例
<script>
function run(){
alert('runrun')
}
t = setTimeout(run, 2000)
</script>
效果
两秒后，执行run函数内的代码
关注setTimeout的返回值
代码
<script>
function run(){
alert('runrun')
}
t = setTimeout(run, 2000)
alert(typeof t)
alert(t)
t2 = setTimeout(run, 6000)
alert(typeof t2)
alert(t2)
</script>
结论
setTimeout()返回值是number
具体的内容相当于是一个计数
从1开始
第一次运行的setTimeout值为1
第二次，为2
用法
clearTimeout（定时器）
定时器，指的是setTimeoutt（）的返回值
例子
<script>
function run(){
alert('runrun')
}
t = setTimeout(run, 2000)
clearTimeout(t)
</script>
效果
当定时器未来的及触发函数时
就被解除了
什么也不会发生
用法
setInterval（函数名，豪秒数）
英文
interval，间隔
setInterval，设置间隔
例子
<script>
function run(){
alert('runrun')
}
t = setInterval(run, 2000)
// clearTimeout(t)
</script>
效果
每隔两秒钟
执行一次run函数
用法
clearInterval(定时器)
例子
<script>
function run(){
alert('runrun')
}
t = setInterval(run, 2000)
clearInterval(t)
</script>
效果
没有任何效果
因为定时器被取消了
函数名可用匿名函数代替
<script>
t = setInterval(function () {
alert('hihi')
}, 2000)
// clearInterval(t)
</script>
代码
<script>
window.onload = function () {
// 搞一个变量记录当前的位置
var iPos = 0
// 搞个函数
function move(){
// 先获取DIV标签对象
var oDiv = document.getElementsByTagName("div")[0] // obj
// 设置它的位置
iPos+=1 //数据的修改
oDiv.style.marginLeft = (iPos+"px")
}
// 搞个定时器
t = setInterval(move,100)
}
</script>
<style>
div{
background: red;
/*margin:auto;*/
width: 300px;
height: 200px;
/*margin-left: 100px;*/
}
</style>
<div>
我是DIV盒子
</div>
说明
本例通过margin-left来控制移动
同样，也可以通过定位的方式来移动
逻辑
先让盒子来一个相对定位
然后不断的修改盒子的left
odiv.style.left = 新的数据
逻辑
加判断
验证当前的位置数值与最大允许位移的数据
如果当前位置超过了最大允许位移的位置，则清除定时器
<script>
window.onload = function () {
var iMaxNum = 50
var iPos = 0
function move(){
var oDiv = document.getElementsByTagName("div")[0] // obj
iPos += 13
oDiv.style.marginLeft = (iPos+"px")
if (iPos >= iMaxNum){
clearInterval(t)
}
}
t = setInterval(move,100)
}
</script>
<style>
div{
background: red;
/*margin:auto;*/
width: 300px;
height: 200px;
/*margin-left: 100px;*/
}
</style>
<div>
我是DIV盒子
</div>
两个字符串比较大小不准
逻辑
移动的时候进行判断，根据当前的位置来判断
当实际的位置到达右侧最大的数值时，修改速度为负值。速度为负值的结果是，实际位置会越来越小。
实际的位置 = 之前实际的位置+速度
如果速度为负值，实际的位置数据就会越来越小
当实际位置到达左侧的最小值时，修改速度为正值。
实现
<script>
window.onload = function () {
var iMaxNum = 200
var iPos = 0
var speed = 13
function move(){
var oDiv = document.getElementsByTagName("div")[0] // obj
iPos += speed
oDiv.style.marginLeft = (iPos+"px")
if (iPos >= iMaxNum){
speed = -13
}
if (iPos <= 0){
speed = 13
}
}
t = setInterval(move,100)
}
</script>
<style>
div{
background: red;
/*margin:auto;*/
width: 300px;
height: 200px;
/*margin-left: 100px;*/
}
</style>
<div>
我是DIV盒子
</div>
布局
解决浮动元素的问题
父容器感知不到浮动的子元素
解决办法
最简单的
在父容器的样式里新增加一个
overfflow:auto;
并不推荐使用
最标准的办法
伪元素
.clearfix:after{
content:"";
display:table;
clear:both;
}
练习，遍历每一个li
通过js特效让每一个li颜色自动渐变
<script>
window.onload = function () {
var oLiArray = document.getElementsByTagName("li") // 数组
for(var i=0;i<oLiArray.length;i++){
var oLi = oLiArray[i]
bgcolor = "rgb("+i+","+(i+1)*50+","+(i+2)*50;
oLi.style.backgroundColor=bgcolor
}
}
</script>
<style>
div ul li{
width: 200px;
height: 160px;
/*background: rgb(50,100,150);*/
list-style: none;
float:left;
}
div ul{
background: yellow;
margin:0;
padding:0;
width:1000px;
/*overflow:auto;*/
}
.clearfix:after{
content:"";
display:table;
clear:both;
}
</style>
<div>
<ul class="clearfix">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
效果
代码，轮播图效果
鼠标进入会停
鼠标离开会继续走
待解决
点击按钮修改移动方向
<script>
window.onload = function () {
var oUl = document.getElementsByClassName("ulbox")[0];
var now_pos = 0;
var speed = -10;
function move() {
now_pos += speed;
oUl.style.left = now_pos;
if(now_pos<-1000){
now_pos = 0;
}
}
t = setInterval(move, 100);
oUl.onmouseover = function () {
clearInterval(t)
}
oUl.onmouseout = function () {
t = setInterval(move, 100);
}
}
</script>
<style>
div ul li{
width: 200px;
height: 160px;
/*background: rgb(50,100,150);*/
list-style: none;
float:left;
}
.outter{
width:1000px;
height: 160px;
border:1px solid black;
overflow: hidden;
/*overflow:hidden;*/
}
div .ulbox{
/*background: yellow;*/
width:2000px;
margin:0;
padding:0;
position: relative;
left:0;
}
.clearfix:after{
content:"";
display:table;
clear:both;
}
.red{
background: red;
}
.yellow{
background: yellow;
}
.green{
background: green;
}
.blue{
background: blue;
}
.pink{
background: pink;
}
</style>
<div class="outter">
<ul class="clearfix ulbox">
<li class="red">1</li>
<li class="yellow">2</li>
<li class="green">3</li>
<li class="blue">4</li>
<li class="pink">5</li>
<li class="red">1</li>
<li class="yellow">2</li>
<li class="green">3</li>
<li class="blue">4</li>
<li class="pink">5</li>
</ul>
</div>
<input type="button" value="<---" id="btnleft">
<input type="button" value="--->" id="btnright">
效果
待完成–有按钮特效的