js代码
2016-05-19 19:30
369 查看
1.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
//(函数）检查用户输入的用户名，是否含有[*,%,&,<,>,/,\,!,@,#]特殊字符，如果有，则输出“用户名含有特殊字符”，否则输出“用户名符合要求”
//(核心思想：循环输出数组元素与循环输出用户名，然后比较)
//函数就是定义调用，形参实参，返回值
var str = window.prompt("请输入你的用户名"); //str = "*beijing"
function checkOtherChar(username)
{
//定义特殊符号的数组
vararr = ["*","%","&","<",">","/","\\","!","@","#"];
//循环数组：取出数组中的每一个字符
for(vari=0;i<arr.length;i++)
{
//循环用户名：取出每一个字符
for(varj=0;j<username.length;j++)
{
//比对：数组的每一个，与用户名的每一个字符，进行比较
//如果找到，则退出循环；如果没找到，则“用户名合法”
if(arr[i]== username.charAt(j))
{
returntrue;//立即中止函数，跳出函数
}
}
}
returnfalse; //如果返回false，则说明“用户名合法”
}
//判断函数的返回值，来决定是否找到特殊符号
if(checkOtherChar(str))
{
document.write("用户名含有特殊符号！");
}else
{
document.write("用户名合法！");
}
</script>
</head>
<body>
</body>
</html>
//BOM里最重要的就是window对象，window对象最重要的方法就//
//是定时器和延时器
2图片自动切换.html.
<script type="text/javascript">
//网页加载完成，去调用JS函数
window.onload = init; //函数传地址，不能带括号
//定义函数
function init()
{
//定时器：每隔1秒，调start2()函数一次
//定时器总是调用其它函数，而延时器总是调用自己所在的函数。
window.setInterval("start2()",1000);
}
//全局变量
var i = 1;
function start2()
{
//获取网页中id=img01的图片元素对象
var imgObj =document.getElementById("img01");
//图片对象有src属性，那么 imgObj对象也有src属性
imgObj.src ="images/dd_scroll_"+i+".jpg";
i++;
//如果超过6，则i=1。
if(i>6)
{
i = 1;
}
}
</script>
</head>
<body>
<img id="img01"src="images/dd_scroll_1.jpg" />
</body>
</html>
3.简单计数器.html
<script type="text/javascript">
//实例：简单计数器
//全局变量
var i = 0;
var timer;
function start2(){
//获取网页中id=result的<input>元素对象
var inputObj =document.getElementById("result");
//<input>标记有什么属性，那么，对应的元素对象就有什么属性。
inputObj.value ="该程序已经运行了"+i+"秒！";
i++;
//延时器
//延时器要想实现重复执行，必须在函数中不断调用自己。
//这么实现以后，延时器就可以模拟定时器的效果了。
timer =window.setTimeout("start2()",1000);
}
function stop2(){
window.clearTimeout(timer);
}
</script>
</head>
<body>
<input id="result" type="button"value="该程序已经运行了0秒！" /><br>
<input type="button" value="开始"onclick="start2()" />
<input type="button" value="停止"onclick="stop2()" />
</body>
</html>
3.函数传地址.html
<scripttype="text/javascript">
window.onload = init;//是将函数的地址传给了事件，而不是将函数的执行结果传给事件。
//有名函数或普通函数，作为地址引用，不能带括号。
function init(){
//更改网页背景色
window.document.body.bgColor= "#009933";
//变量初始化
var url2 ="";
var name2 ="win2";
var options2 ="width=500,height=300,left=300,top=200";
//打开一个新窗口，winObj就是新窗口对象
var winObj =window.open(url2,name2,options2);
//往新窗口中输入内容
var str ="<h2>张三的基本信息</h2>";
str += "姓名：张三";
str +="<br>性别：男";
str +="<br>年龄：30岁";
str +="<br><img src='images/6521917_203931082000_2.gif' />";
winObj.document.write(str);
//5秒钟后，新窗口自动关闭
winObj.setTimeout("window.close()",2000);
}
</script>
</head>
<body>
<a href="news.html" target="win2">公司新闻</a>
</body>
</html>
4.window对象方法open.html
<script type="text/javascript">
function init()
{
//更改网页背景色
window.document.body.bgColor= "#009933";
//变量初始化
var url2 ="";
var name2 ="win2";
var options2 ="width=500,height=300,left=300,top=200";
//打开一个新窗口，winObj就是新窗口对象
var winObj =window.open(url2,name2,options2);
//往新窗口中输入内容
var str ="<h2>张三的基本信息</h2>";
str += "姓名：张三";
str +="<br>性别：男";
str +="<br>年龄：30岁";
str +="<br><img src='images/6521917_203931082000_2.gif' />";
winObj.document.write(str);
//5秒钟后，新窗口自动关闭
winObj.setTimeout("window.close()",2000);
}
</script>
</head>
<body onload="init()">
<a href="news.html" target="win2">公司新闻</a>
</body>
</html>
5.window对象方法confirm.html
<script type="text/javascript">
function confirmDel()
{
if(window.confirm("你确认要删除吗？"))
{
//跳转到delete.php页面，执行删除操作
location.href ="delete.php";
}
}
</script>
</head>
<body>
<table width="700" border="1"align="center" rules="all" cellpadding="5">
<tr>
<th>新闻id</th>
<th>新闻标题</th>
<th>发布日期</th>
<th>操作选项</th>
</tr>
<tr>
<td>10010</td>
<td>李克强：商业银行法修正草案删除75%存贷比规定</td>
<td>2015-03-12</td>
<td><ahref="#">修改</a> <a href="#"onClick="confirmDel()">删除</a></td>
</tr>
</table>
</body>
</html>
6.自定义对象.html
<scripttype="text/javascript">
//（1）使用new关键字结合构造函数Object()来创建一个空的对象
var obj = new Object();
//增加属性
obj.name = "张三";
obj.sex = "男";
obj.age = 24;
obj.isMarried = true;
obj.edu = "大专";
obj.school;
//增加方法：将一个函数定义赋给了对象属性，那么该属性变成方法。
obj.showInfo = function(){
varstr = "<h2>"+obj.name+"的基本信息</h2>";
str+= "姓名："+obj.name;
str+= "<br>性别："+obj.sex;
str+= "<br>年龄："+obj.age;
str+= "<br>婚否："+(obj.isMarried ? "已婚" : "未婚");
str+= "<br>学历："+obj.edu;
str+= "<br>毕业院校："+(obj.school ? obj.school : "未填写");
returnstr;
}
//调用对象方法，并输出结果
document.write(obj.showInfo());
document.write("<hr>");
//（2）使用大括号{}来创建对象
var obj = {
name : "张三",
sex : "男",
age : 24,
isMarried: true,
edu : "大专",
school : undefined,
showInfo:function(){
varstr = "<h2>"+obj.name+"的基本信息</h2>";
str+= "姓名："+obj.name;
str+= "<br>性别："+obj.sex;
str+= "<br>年龄："+obj.age;
str+= "<br>婚否："+(obj.isMarried ? "已婚" : "未婚");
str+= "<br>学历："+obj.edu;
str+= "<br>毕业院校："+(obj.school ? obj.school : "未填写");
returnstr;
}
};
//调用对象的方法，并输出结果
document.write(obj.showInfo());
</script>
</head>
<body>
</body>
</html>
7.随机显示小星星.html
<script type="text/javascript">
//实例：随机显示小星星
/*
(1)网页背景色为黑色
(2)创建图片节点，追加到<body>父节点
(3)图片随机大小
(4)图片随机定位坐标(x,y)
(5)定时器
(6)网页加载完成，开始星星
(7)星星显示的范围，跟窗口的宽高一样。(0,window.innerWidth)
(8)点击星星，星星消失
*/
//网页加载完成
window.onload = function(){
//更改网页背景色
document.body.bgColor= "#000";
//定时器：1秒钟，显示一个星星
window.setInterval("star()",100);
}
//动画主函数
function star()
{
//创建图片节点
var imgObj =document.createElement("img");
//添加src属性
imgObj.setAttribute("src","../img/xingxing.gif");
//添加width属性。getRandom()随机数函数
var width =getRandom(15,85);
imgObj.setAttribute("width",width);
//添加style属性(行内样式)。
var x =getRandom(0,window.innerWidth);
var y =getRandom(0,window.innerHeight);
imgObj.setAttribute("style","position:absolute;left:"+x+"px;top:"+y+"px;");
//添加onclick事件属性
//this代表当前对象，this是一个对象。
//this是系统关键字。this只能在函数内使用。
imgObj.setAttribute("onclick","removeImg(this)");
//将图片节点，挂载到<body>父节点下
document.body.appendChild(imgObj);
}
//函数：求随机数函数
function getRandom(min,max)
{
//随机数
var random = Math.random()*(max-min)+min;
//向下取整
random =Math.floor(random);
//返回结果
return random;
}
//函数：删除节点
function removeImg(obj)
{
document.body.removeChild(obj);
}
</script>
</head>
<body>
</body>
</html>
8.书讯自动上划.html（注意为什么要使用window.onload = function()）
<style type="text/css">
body,ul,li{margin:0px;padding:0px;}
ul,li{list-style:none;}
body{font-size:12px;}
#dome{
width:180px;
height:250px;
border:1px solid #000;
margin:50px auto;
padding:0px 10px;
overflow:hidden; /*溢出隐藏*/
}
#dome li{padding:4px 0px;}
</style>
<script type="text/javascript">
/*****************************************书讯快递***********************************************/
//（1）取得三个对象的id
//（2）三个DIV的高度一致
//（3）dome2中的内容与dome1的内容一样
//（4）dome的scrollTop属性来实现滚动
//（5）鼠标放上dome停止滚动、鼠标移开dome继续滚动
window.onload = function(){
//(1)获取三个<div>的id
var dome =document.getElementById("dome");
var dome1 =document.getElementById("dome1");
var dome2 =document.getElementById("dome2");
//(2)三个<div>的高度一样
//这里的style属性，又是一个style对象，代表CSS对象。
//style对象的属性与CSS的属性一样。
//这里的style对象代表行内样式。
dome1.style.height =dome.offsetHeight + "px";
dome2.style.height =dome.offsetHeight + "px";
/*dome1.style.backgroundColor= "#99cc66";
dome2.style.backgroundColor= "#ffff66";
*/
//(3)将dome1中的内容复制到dome2中
dome2.innerHTML =dome1.innerHTML;
//(4)dome的scrollTop属性来实现滚动
window.setInterval("start2(dome)",40);
}
function start2(dome)
{
if(dome.scrollTop==dome.offsetHeight)
{
dome.scrollTop= 0;
}else
{
dome.scrollTop++;
}
}
</script>
</head>
<body>
<div id="dome">
<divid="dome1">
<ul>
<li>·2010考研英语大纲到货75折...</li>
<li>·权威定本四大名著（人民文...</li>
<li>·口述历史权威唐德刚先生国...</li>
<li>·袁伟民与体坛风云：实话实...</li>
<li>·我们台湾这些年：轰动两岸...</li>
<li>·畅销教辅推荐：精品套书50...</li>
<li>·2010版法律硕士联考大纲75...</li>
<li>·计算机新书畅销书75折抢购</li>
<li>·2009年孩子最喜欢的书>></li>
<li>·弗洛伊德作品精选集59折</li>
</ul>
</div>
<divid="dome2"></div>
</div>
</body>
</html>
9.无刷新分页ajax加json
Index分页.html
<script type="text/javascript">
//ajax无刷新方式获得第n页信息
functionshowpage(url){
varxhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState==4){
//alert(xhr.responseText);
eval("var jn_info="+xhr.responseText);
//document.write(jn_info[]);
//遍历jn_info [{},{},{},{},{},{},{},页码列表]
var s = "<table><trstyle=\"font-weight:bold;\"><td>序号</td><td>名称</td><td>价格</td><td>数量</td><td>重量</td></tr>";
for(var m=0; m<jn_info.length-1; m++){
s +="<tr><td>"+jn_info[m].i+"</td>";
s += "<td>"+jn_info[m].n+"</td>";
s += "<td>"+jn_info[m].p+"</td>";
s += "<td>"+jn_info[m].u+"</td>";
s +="<td>"+jn_info[m].w+"</td></tr>";
}
s += "<tr><tdcolspan='5'>"+jn_info[jn_info.length-1]+"</td></tr>";
s += "</table>";
document.getElementById('result').innerHTML = s;
}
}
xhr.open('get',url);
xhr.send(null);
}
window.onload = function(){
showpage('./data.php?page=1');//获得分页信息
}
</script>
<style type="text/css">
h2{width:700px; margin:auto;
background-color:pink;text-align:center;}
table{width:700px; border:1px solid black; margin:auto;border-collapse:collapse;}
td{border:1px solid black;}
</style>
</head>
<body>
<h2>ajax无刷新分页效果</h2>
<divid="result"></div>
</body>
</html>
Data.php
<?php
header("content-type:text/html;charset=utf-8");
//传统方式实现分页效果
$link = mysql_connect('localhost','root','123456');
mysql_select_db('shop0710',$link);
mysql_query('set names utf8');
//实现数据分页
//① 引入分页的类文件
include("./page.class.php");
//② 获得商品的总条数
$sql = "select * from sw_goods order by goods_iddesc";
$qry = mysql_query($sql);
$total = mysql_num_rows($qry); //总条数
$per = 7;//每页显示7条数据
//③ 实例化分页类对象
$page_obj = new Page($total, $per);
//④ 拼装一条sql语句获得每页信息
$sql3 = "select goods_id ,goods_name ,goods_price,goods_number ,goods_weight w from sw_goods ".$page_obj->limit;
$qry3 = mysql_query($sql3);
//⑤ 获得页码列表
$pagelist = $page_obj -> fpage(array(3,4,5,6,7,8));
$info = array();
while($rst3 = mysql_fetch_assoc($qry3)){
$info[] =$rst3; //把多条商品信息变为一个$info的“二维数组”信息
//该二维数组：一维是索引的、二维是关联类型
}
$info[] = $pagelist;
//把每页的商品信息通过“json”格式提供出来
echo json_encode($info);//[{},{},{},{},{},{},{},页码列表]
10.tp框架使用ajax验证用户名
<html>
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
//(函数）检查用户输入的用户名，是否含有[*,%,&,<,>,/,\,!,@,#]特殊字符，如果有，则输出“用户名含有特殊字符”，否则输出“用户名符合要求”
//(核心思想：循环输出数组元素与循环输出用户名，然后比较)
//函数就是定义调用，形参实参，返回值
var str = window.prompt("请输入你的用户名"); //str = "*beijing"
function checkOtherChar(username)
{
//定义特殊符号的数组
vararr = ["*","%","&","<",">","/","\\","!","@","#"];
//循环数组：取出数组中的每一个字符
for(vari=0;i<arr.length;i++)
{
//循环用户名：取出每一个字符
for(varj=0;j<username.length;j++)
{
//比对：数组的每一个，与用户名的每一个字符，进行比较
//如果找到，则退出循环；如果没找到，则“用户名合法”
if(arr[i]== username.charAt(j))
{
returntrue;//立即中止函数，跳出函数
}
}
}
returnfalse; //如果返回false，则说明“用户名合法”
}
//判断函数的返回值，来决定是否找到特殊符号
if(checkOtherChar(str))
{
document.write("用户名含有特殊符号！");
}else
{
document.write("用户名合法！");
}
</script>
</head>
<body>
</body>
</html>
//BOM里最重要的就是window对象，window对象最重要的方法就//
//是定时器和延时器
2图片自动切换.html.
<script type="text/javascript">
//网页加载完成，去调用JS函数
window.onload = init; //函数传地址，不能带括号
//定义函数
function init()
{
//定时器：每隔1秒，调start2()函数一次
//定时器总是调用其它函数，而延时器总是调用自己所在的函数。
window.setInterval("start2()",1000);
}
//全局变量
var i = 1;
function start2()
{
//获取网页中id=img01的图片元素对象
var imgObj =document.getElementById("img01");
//图片对象有src属性，那么 imgObj对象也有src属性
imgObj.src ="images/dd_scroll_"+i+".jpg";
i++;
//如果超过6，则i=1。
if(i>6)
{
i = 1;
}
}
</script>
</head>
<body>
<img id="img01"src="images/dd_scroll_1.jpg" />
</body>
</html>
3.简单计数器.html
<script type="text/javascript">
//实例：简单计数器
//全局变量
var i = 0;
var timer;
function start2(){
//获取网页中id=result的<input>元素对象
var inputObj =document.getElementById("result");
//<input>标记有什么属性，那么，对应的元素对象就有什么属性。
inputObj.value ="该程序已经运行了"+i+"秒！";
i++;
//延时器
//延时器要想实现重复执行，必须在函数中不断调用自己。
//这么实现以后，延时器就可以模拟定时器的效果了。
timer =window.setTimeout("start2()",1000);
}
function stop2(){
window.clearTimeout(timer);
}
</script>
</head>
<body>
<input id="result" type="button"value="该程序已经运行了0秒！" /><br>
<input type="button" value="开始"onclick="start2()" />
<input type="button" value="停止"onclick="stop2()" />
</body>
</html>
3.函数传地址.html
<scripttype="text/javascript">
window.onload = init;//是将函数的地址传给了事件，而不是将函数的执行结果传给事件。
//有名函数或普通函数，作为地址引用，不能带括号。
function init(){
//更改网页背景色
window.document.body.bgColor= "#009933";
//变量初始化
var url2 ="";
var name2 ="win2";
var options2 ="width=500,height=300,left=300,top=200";
//打开一个新窗口，winObj就是新窗口对象
var winObj =window.open(url2,name2,options2);
//往新窗口中输入内容
var str ="<h2>张三的基本信息</h2>";
str += "姓名：张三";
str +="<br>性别：男";
str +="<br>年龄：30岁";
str +="<br><img src='images/6521917_203931082000_2.gif' />";
winObj.document.write(str);
//5秒钟后，新窗口自动关闭
winObj.setTimeout("window.close()",2000);
}
</script>
</head>
<body>
<a href="news.html" target="win2">公司新闻</a>
</body>
</html>
4.window对象方法open.html
<script type="text/javascript">
function init()
{
//更改网页背景色
window.document.body.bgColor= "#009933";
//变量初始化
var url2 ="";
var name2 ="win2";
var options2 ="width=500,height=300,left=300,top=200";
//打开一个新窗口，winObj就是新窗口对象
var winObj =window.open(url2,name2,options2);
//往新窗口中输入内容
var str ="<h2>张三的基本信息</h2>";
str += "姓名：张三";
str +="<br>性别：男";
str +="<br>年龄：30岁";
str +="<br><img src='images/6521917_203931082000_2.gif' />";
winObj.document.write(str);
//5秒钟后，新窗口自动关闭
winObj.setTimeout("window.close()",2000);
}
</script>
</head>
<body onload="init()">
<a href="news.html" target="win2">公司新闻</a>
</body>
</html>
5.window对象方法confirm.html
<script type="text/javascript">
function confirmDel()
{
if(window.confirm("你确认要删除吗？"))
{
//跳转到delete.php页面，执行删除操作
location.href ="delete.php";
}
}
</script>
</head>
<body>
<table width="700" border="1"align="center" rules="all" cellpadding="5">
<tr>
<th>新闻id</th>
<th>新闻标题</th>
<th>发布日期</th>
<th>操作选项</th>
</tr>
<tr>
<td>10010</td>
<td>李克强：商业银行法修正草案删除75%存贷比规定</td>
<td>2015-03-12</td>
<td><ahref="#">修改</a> <a href="#"onClick="confirmDel()">删除</a></td>
</tr>
</table>
</body>
</html>
6.自定义对象.html
<scripttype="text/javascript">
//（1）使用new关键字结合构造函数Object()来创建一个空的对象
var obj = new Object();
//增加属性
obj.name = "张三";
obj.sex = "男";
obj.age = 24;
obj.isMarried = true;
obj.edu = "大专";
obj.school;
//增加方法：将一个函数定义赋给了对象属性，那么该属性变成方法。
obj.showInfo = function(){
varstr = "<h2>"+obj.name+"的基本信息</h2>";
str+= "姓名："+obj.name;
str+= "<br>性别："+obj.sex;
str+= "<br>年龄："+obj.age;
str+= "<br>婚否："+(obj.isMarried ? "已婚" : "未婚");
str+= "<br>学历："+obj.edu;
str+= "<br>毕业院校："+(obj.school ? obj.school : "未填写");
returnstr;
}
//调用对象方法，并输出结果
document.write(obj.showInfo());
document.write("<hr>");
//（2）使用大括号{}来创建对象
var obj = {
name : "张三",
sex : "男",
age : 24,
isMarried: true,
edu : "大专",
school : undefined,
showInfo:function(){
varstr = "<h2>"+obj.name+"的基本信息</h2>";
str+= "姓名："+obj.name;
str+= "<br>性别："+obj.sex;
str+= "<br>年龄："+obj.age;
str+= "<br>婚否："+(obj.isMarried ? "已婚" : "未婚");
str+= "<br>学历："+obj.edu;
str+= "<br>毕业院校："+(obj.school ? obj.school : "未填写");
returnstr;
}
};
//调用对象的方法，并输出结果
document.write(obj.showInfo());
</script>
</head>
<body>
</body>
</html>
7.随机显示小星星.html
<script type="text/javascript">
//实例：随机显示小星星
/*
(1)网页背景色为黑色
(2)创建图片节点，追加到<body>父节点
(3)图片随机大小
(4)图片随机定位坐标(x,y)
(5)定时器
(6)网页加载完成，开始星星
(7)星星显示的范围，跟窗口的宽高一样。(0,window.innerWidth)
(8)点击星星，星星消失
*/
//网页加载完成
window.onload = function(){
//更改网页背景色
document.body.bgColor= "#000";
//定时器：1秒钟，显示一个星星
window.setInterval("star()",100);
}
//动画主函数
function star()
{
//创建图片节点
var imgObj =document.createElement("img");
//添加src属性
imgObj.setAttribute("src","../img/xingxing.gif");
//添加width属性。getRandom()随机数函数
var width =getRandom(15,85);
imgObj.setAttribute("width",width);
//添加style属性(行内样式)。
var x =getRandom(0,window.innerWidth);
var y =getRandom(0,window.innerHeight);
imgObj.setAttribute("style","position:absolute;left:"+x+"px;top:"+y+"px;");
//添加onclick事件属性
//this代表当前对象，this是一个对象。
//this是系统关键字。this只能在函数内使用。
imgObj.setAttribute("onclick","removeImg(this)");
//将图片节点，挂载到<body>父节点下
document.body.appendChild(imgObj);
}
//函数：求随机数函数
function getRandom(min,max)
{
//随机数
var random = Math.random()*(max-min)+min;
//向下取整
random =Math.floor(random);
//返回结果
return random;
}
//函数：删除节点
function removeImg(obj)
{
document.body.removeChild(obj);
}
</script>
</head>
<body>
</body>
</html>
8.书讯自动上划.html（注意为什么要使用window.onload = function()）
<style type="text/css">
body,ul,li{margin:0px;padding:0px;}
ul,li{list-style:none;}
body{font-size:12px;}
#dome{
width:180px;
height:250px;
border:1px solid #000;
margin:50px auto;
padding:0px 10px;
overflow:hidden; /*溢出隐藏*/
}
#dome li{padding:4px 0px;}
</style>
<script type="text/javascript">
/*****************************************书讯快递***********************************************/
//（1）取得三个对象的id
//（2）三个DIV的高度一致
//（3）dome2中的内容与dome1的内容一样
//（4）dome的scrollTop属性来实现滚动
//（5）鼠标放上dome停止滚动、鼠标移开dome继续滚动
window.onload = function(){
//(1)获取三个<div>的id
var dome =document.getElementById("dome");
var dome1 =document.getElementById("dome1");
var dome2 =document.getElementById("dome2");
//(2)三个<div>的高度一样
//这里的style属性，又是一个style对象，代表CSS对象。
//style对象的属性与CSS的属性一样。
//这里的style对象代表行内样式。
dome1.style.height =dome.offsetHeight + "px";
dome2.style.height =dome.offsetHeight + "px";
/*dome1.style.backgroundColor= "#99cc66";
dome2.style.backgroundColor= "#ffff66";
*/
//(3)将dome1中的内容复制到dome2中
dome2.innerHTML =dome1.innerHTML;
//(4)dome的scrollTop属性来实现滚动
window.setInterval("start2(dome)",40);
}
function start2(dome)
{
if(dome.scrollTop==dome.offsetHeight)
{
dome.scrollTop= 0;
}else
{
dome.scrollTop++;
}
}
</script>
</head>
<body>
<div id="dome">
<divid="dome1">
<ul>
<li>·2010考研英语大纲到货75折...</li>
<li>·权威定本四大名著（人民文...</li>
<li>·口述历史权威唐德刚先生国...</li>
<li>·袁伟民与体坛风云：实话实...</li>
<li>·我们台湾这些年：轰动两岸...</li>
<li>·畅销教辅推荐：精品套书50...</li>
<li>·2010版法律硕士联考大纲75...</li>
<li>·计算机新书畅销书75折抢购</li>
<li>·2009年孩子最喜欢的书>></li>
<li>·弗洛伊德作品精选集59折</li>
</ul>
</div>
<divid="dome2"></div>
</div>
</body>
</html>
9.无刷新分页ajax加json
Index分页.html
<script type="text/javascript">
//ajax无刷新方式获得第n页信息
functionshowpage(url){
varxhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState==4){
//alert(xhr.responseText);
eval("var jn_info="+xhr.responseText);
//document.write(jn_info[]);
//遍历jn_info [{},{},{},{},{},{},{},页码列表]
var s = "<table><trstyle=\"font-weight:bold;\"><td>序号</td><td>名称</td><td>价格</td><td>数量</td><td>重量</td></tr>";
for(var m=0; m<jn_info.length-1; m++){
s +="<tr><td>"+jn_info[m].i+"</td>";
s += "<td>"+jn_info[m].n+"</td>";
s += "<td>"+jn_info[m].p+"</td>";
s += "<td>"+jn_info[m].u+"</td>";
s +="<td>"+jn_info[m].w+"</td></tr>";
}
s += "<tr><tdcolspan='5'>"+jn_info[jn_info.length-1]+"</td></tr>";
s += "</table>";
document.getElementById('result').innerHTML = s;
}
}
xhr.open('get',url);
xhr.send(null);
}
window.onload = function(){
showpage('./data.php?page=1');//获得分页信息
}
</script>
<style type="text/css">
h2{width:700px; margin:auto;
background-color:pink;text-align:center;}
table{width:700px; border:1px solid black; margin:auto;border-collapse:collapse;}
td{border:1px solid black;}
</style>
</head>
<body>
<h2>ajax无刷新分页效果</h2>
<divid="result"></div>
</body>
</html>
Data.php
<?php
header("content-type:text/html;charset=utf-8");
//传统方式实现分页效果
$link = mysql_connect('localhost','root','123456');
mysql_select_db('shop0710',$link);
mysql_query('set names utf8');
//实现数据分页
//① 引入分页的类文件
include("./page.class.php");
//② 获得商品的总条数
$sql = "select * from sw_goods order by goods_iddesc";
$qry = mysql_query($sql);
$total = mysql_num_rows($qry); //总条数
$per = 7;//每页显示7条数据
//③ 实例化分页类对象
$page_obj = new Page($total, $per);
//④ 拼装一条sql语句获得每页信息
$sql3 = "select goods_id ,goods_name ,goods_price,goods_number ,goods_weight w from sw_goods ".$page_obj->limit;
$qry3 = mysql_query($sql3);
//⑤ 获得页码列表
$pagelist = $page_obj -> fpage(array(3,4,5,6,7,8));
$info = array();
while($rst3 = mysql_fetch_assoc($qry3)){
$info[] =$rst3; //把多条商品信息变为一个$info的“二维数组”信息
//该二维数组：一维是索引的、二维是关联类型
}
$info[] = $pagelist;
//把每页的商品信息通过“json”格式提供出来
echo json_encode($info);//[{},{},{},{},{},{},{},页码列表]
10.tp框架使用ajax验证用户名
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- django1.8中如何显示图片，应用css样式，javascript事件
- json总结
- js总结1
- javascript的理解及经典案例
- java解析JavaScript片段
- JSP的动作元素
- Jsp——response对象
- js 获取页面高度和宽度兼容 ie firefox chrome等
- JS操作iframe里的DOM || contentWindow,contentDocument
- <JS>显示和基本操作
- 基础级 - sweetAlert
- javascript语言精粹
- JS 创建 Map
- javascript之debounce函数
- javascript数组去重的四种方法
- js 从一个select选择数据添加到另一个select(包括移除)
- js input绑定enter回车键事件
- JsonMode json嵌套解析
- jsp页面div浮动弹出
- js 中 foreach循环（for in）中，最后会多出一个值