javascript 翻页测试页(动态创建标签并自动翻页)

时间:2020-05-12 人气:0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>翻页测试页</title> 
</head>

<body> 
</body> 
</html> 
<script language="javascript"> 
<!-- 
var div = document.createElement("div");

for(var i = 1; i <= 100; i ++) { 
    var l = document.createElement("div"); 
    l.style.margin = "0px"; 
    l.style.padding = "0px 6px"; 
    l.style.fontSize = "14px"; 
    l.style.color = "#ffffff"; 
    l.style.backgroundColor = "#316AC5"; 
    l.style.width = "24px"; 
    l.style.height = "20px"; 
    l.style.styleFloat = "left"; 
    l.innerHTML = i; 
    div.appendChild(l); 
     
    var c = document.createElement("p"); 
    c.style.margin = "0px"; 
    c.style.fontSize = "14px"; 
    c.innerHTML = "this is line " + i + "."; 
    c.style.lineHeight = "20px"; 
    div.appendChild(c); 
} 
div.id = "div"; 
div.style.border = "#ECE9D8 1px solid"; 
div.style.width = "600px"; 
div.style.height = "480px"; 
div.style.overflow = "auto"; 
document.body.appendChild(div);

div = document.createElement("div"); 
div.id = "info"; 
div.style.fontSize = "14px"; 
document.body.appendChild(div);

var $ = function(id) { 
    return typeof(id) == "object" ? id : document.getElementById(id); 
}

var updateInfo = function(moveto,isMove) { 
    $("info").innerHTML = "当前位置 : " + $("div").scrollTop; 
    $("info").innerHTML += "    此次翻页到达位置 : " + moveto + "    翻页状态 : " + (isMove ? "<font style='color:#ee0000;'>翻页中...</font>" : "<font style='color:#00cc66;'>已完成</font>"); 
    $("info").innerHTML += "<br>翻页层的相关属性 : scrollHeight(总高度):" + $("div").scrollHeight + "    offsetHeight(可见域高度):" + $("div").offsetHeight + "    scrollTop(当前翻页高度):" + $("div").scrollTop;     
} 
setInterval("scroll('div')",5000) 
//--> 
</script>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

加载全部内容