📄 photo.htm
字号:
<html>
<head>
<title>在线交互式电子相册</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
</head>
<script language="javascript">
//定义一个变量用于存放XMLHttpRequest对象
var xmlHttp;
var selected=0;//当前相片号
//该函数用于创建一个XMLHttpRequest对象
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
//这是一个通过AJAX获取相片的方法
function getPhoto(){
//创建一个XMLHttpRequest对象
createXMLHttpRequest();
//将状态触发器绑定到一个函数
xmlHttp.onreadystatechange = processor;
//建立对服务器的调用
xmlHttp.open("GET", "GetPhoto?selected="+selected);
//发送请求
xmlHttp.send(null);
}
//处理从服务器返回的结果
function processor() {
if(xmlHttp.readyState == 4) { //如果响应完成
if(xmlHttp.status == 200) {//如果返回成功
//更新相片文件
document.all.photo.src = xmlHttp.responseText;
}
}
}
//响应“上一张”
function prev(){
selected = (selected-1+5)%5;
getPhoto();
}
//响应“下一张”
function next(){
selected = (selected+1+5)%5;
getPhoto();
}
</script>
<body>
<TABLE border="0" bgcolor="#c0c0c0" width="300px" height="240px">
<TR>
<TD colspan="2" align="center"><h2>电子相册</h2></TD>
</TR>
<TR>
<TD colspan="2" align="center"><img id="photo" src="photo/photo1.jpg"></TD>
</TR>
<TR>
<TD align="center"><span onClick="prev()" style="cursor:hand;">上一张</span></TD>
<TD align="center"><span onClick="next()" style="cursor:hand;">下一张</span></TD>
</TR>
</TABLE>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -