1. 回顾position属性：static ，fixed，relative，absolute
Paste_Image.png
2.Js中的时间函数：setTimeout和clearTimeout
setTimeout: 实现让某个函数在经过一段预定的时间之后才开始执行
clearTimeout: 实现取消某个时间事件
3.我们来看下一个简单的实例：通过js，改变文字的位置。
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function moveMessage() {
//检查
if (!document.getElementById) return false;
if (!document.getElementById("message")) return false;
//获取到元素
var elem = document.getElementById("message");
//设置元素属性
elem.style.position = "absolute";
elem.style.left = "200px";
elem.style.top = "100px";
}
window.onload = function () {
moveMessage();
}
</script>
</head>
<body>
<p id="message">Where!</p>
</body>
</html>
实现的效果如下：
Paste_Image.png
我们可以看到成功地改变了 文字的位置。
思考一：为什么要设置position属性为absolute呢？设置其他属性可以吗？
我们再尝试用setTimeout函数来实现显示网页3秒后，才改变文字的位置。
<script>
function moveMessage() {
//检查
if (!document.getElementById) return false;
if (!document.getElementById("message")) return false;
//获取到元素
var elem = document.getElementById("message");
//设置元素属性
elem.style.position = "absolute";
elem.style.left = "200px";
elem.style.top = "100px";
}
window.onload = function () {
/**
* 第一个参数为要调用的函数名字
* 第二个参数为设定的时间，单位为毫秒
* 我们这里设定为3000ms，即3s后，会调用moveMessage()函数
*/
setTimeout('moveMessage()', 3000);
}
</script>
网友评论