定时器
//设置定时器，页面加载完启动，返回值--定时器id
1. var timeId = setInterval(事件函数,事件(毫秒)); //设置定时器，页面加载完启动
clearInterval(定时器id)；//清除指定定时器
//一次性定时器，页面加载完启动，返回值--定时器id
2.setTimeout(时间函数，事件(毫秒))
clearTimeout(定时器id); //清除定时器 // 一次性定时器不清理会占据空间
定时器案例
1.协议按钮禁用倒计时
<body>
<textarea name="texta" id="textarea" cols="30" rows="10">断桥是否下过雪，我望着湖面；水中寒月如雪，指尖轻点融解；
</textarea>
<input type="button" value="请仔细阅读协议(5)" disabled="disabled" id="btn"/>
<script src="common.js"></script>
<script>
var time = 5;
var timeId = setInterval(function(){
time--;
if(time <= 0)
{
my$("btn").disabled = false;
clearInterval(timeId);
my$("btn").value = "同意";
return;
}
my$("btn").value = "请仔细阅读协议("+time+")";
},1000);
</script>
</body>
----------------------------------------------------------------------------
2.div背景颜色渐变
<style>
div{
width: 300px;
height: 200px;
background-color: hotpink;
}
</style>
<div id="dv"></div>
<input type="button" value="渐变" id="btn"/>
<script src="common.js"></script>
<script>
my$("btn").onclick = function () {
var opacity = 10;
var timeId = setInterval(function () {
opacity--;
if(opacity == 0){
clearInterval(timeId);
}
my$("dv").style.opacity =opacity/10;
},200);
}
</script>
---------------------------------------------------------------------------
3.移动元素----offersetLeft
4.轮播图
简单轮播图
左右焦点轮播图
无缝连接轮播图
完整轮播图
offset
offset用于获取style标签里设置的样式
如果样式的代码是在style的标签中设置,外面是获取不到的
如果样式的代码是在style的属性设置,外面是可以获取
offset属性:
offset.Width、offset.Height
offset.top、offsetleft:
1.属性值;(未脱离文档流)
父级元素的margin+父级元素的padding+父级元素的border+自己的margin
2.脱离文档流(用了定位)
自己的margin+自己的left
.....
---------------------------------------------------------------------------
直接通过document获取元素
document.body //获取body标签--元素
document.title //title标签中的值
documtent.ducumentElement //获取html标签
案例：图片跟着鼠标移动
<script>
//鼠标在页面中移动,图片跟着鼠标移动
document.onmousemove=function (e) {
//鼠标的移动的横纵坐标
//可视区域的横坐标
//可视区域的纵坐标
my$("im").style.left=e.clientX+"px";
my$("im").style.top=e.clientY+"px";
};
</script>