软件开发培训班 >> 编程开发 >> JavaScript

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

　　本文标签：javascript,翻页

<!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>

技术文章快速查找

AJAX据邮政编码自动完成城市和地址信息

js截取小数点后几位的写法

一组JS创建和操作表格的函数集合

Jquery与JS两种方法仿twitter/新浪微博高度自适应无缝滚动实现代码

JS实现点击链接取消跳转效果的方法

用JavaScript使链接按钮不断变化

Jquery 跨域访问 Lightswitch OData Service的方法

js当一个变量为函数时应该注意的一点细节小结

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建