javascript_DOM 編程藝術學習筆記（八）
一、定時器
1、設置定時器
setTimeout("function",interval);
第一個參數是個字符串，是需要執行方法的名字；第二個參數是個整形的值，用毫秒。
2、清除定時器
clearTimeout(variable);
例子：
function print(){
alert("呵呵");
}
var timeEvent = setTimeout("print()",1000); // 一秒後執行print()方法
clearTimeout(timeEvent);
最後不會執行，因爲定時器取消了
3、parseInt()將字符串轉換成整型
parseInt("99"); //結果是99
parseInt("22px"); // 結果是22
但是parseInt("sdf33"); //轉換錯誤
4、用js實現一個小動畫
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p id="message">wheel</p>
<script type="text/javascript">
addLoadEvent(positionMessage);
function positionMessage () {
if(!document.getElementById) return false;
if(!document.getElementById("message")) return false;
var elem = document.getElementById("message");
elem.style.position = "absolute";
elem.style.left = "50px";
elem.style.top = "100px";
setTimeout("moveMessage()",3000);
}
function moveMessage () {
if(!document.getElementById) return false;
if(!document.getElementById("message")) return false;
var elem = document.getElementById("message");
var xPos = parseInt(elem.style.left);
var yPos = parseInt(elem.style.top);
if(xPos == 200 && yPos == 100){
return true;
}
if(xPos < 200){
xPos++;
}
if(xPos > 200){
xPos--;
}
if(yPos < 100){
yPos++;
}
if(yPos > 100){
yPos--;
}
elem.style.left = xPos + "px";
elem.style.top = yPos + "px";
var timeEvent = setTimeout("moveMessage()",10);
}
/**
* 讓方法按順序加載
* @param {[type]} func [description]
*/
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
</script>
</body>
</html>二、動畫實例
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Web Design</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<h1>Web Design</h1>
<p>These are the things you should know.</p>
<ol id="linklist">
<li><a href="http://www.sina.com">新浪</a></li>
<li><a href="http://www.qq.com">騰訊網</a></li>
<li><a href="http://www.jd.com">京東網</a></li>
</ol>
<div id="slideshow">
<img src="long.gif" height="150" width="450" alt="hehe" id="preview">
</div>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html> addLoadEvent(positionMessage);
function positionMessage () {
if(!document.getElementById) return false;
if(!document.getElementById("preview")) return false;
if(!document.getElementsByTagName("a")) return false;
var link = document.getElementsByTagName("a");
link[0].onmouseover = function(){
moveElement("preview",0,0,10);
}
link[1].onmouseover = function(){
moveElement("preview",-150,0,10);
}
link[2].onmouseover = function(){
moveElement("preview",-300,0,10);
}
}
function moveElement(elementId,final_x,final_y,interval) {
if(!document.getElementById) return false;
if(!document.getElementById(elementId)) return false;
var elem = document.getElementById(elementId);
var dist = 0;
if(elem.movement){
clearTimeout(elem.movement);
}
if(!elem.style.left){
elem.style.left = "0px";
}
if(!elem.style.top){
elem.style.top = "0px";
}
var xPos = parseInt(elem.style.left);
var yPos = parseInt(elem.style.top);
if(xPos == final_x && yPos == final_y){
return true;
}
if(xPos < final_x){
dist = Math.ceil((final_x - xPos)/10);
xPos += dist;
}
if(xPos > final_x){
dist = Math.ceil((xPos - final_x)/10);
xPos--;
}
if(yPos < final_y){
dist = Math.ceil((final_y - yPos)/10);
yPos++;
}
if(yPos > final_y){
dist = Math.ceil((yPos - final_y)/10);
yPos--;
}
elem.style.left = xPos + "px";
elem.style.top = yPos + "px";
var repeat = "moveElement(\""+elementId+"\","+final_x+","+final_y+","+interval+")";
elem.movement = setTimeout(repeat,interval);
}
/**
* 讓方法按順序加載
* @param {[type]} func [description]
*/
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}#slideshow{
overflow: hidden;
width: 150px;
height: 150px;
position: relative;
}
#slideshow > img{
position: absolute;
}