TA的每日心情 | 开心
2021-3-12 23:18 |
|---|
签到天数: 2 天 [LV.1]初来乍到
|
|
这是一个用了 prototype 的简单应用,作为学习prototype的入门实例真的不错,来自 Swelldom.net 主页,站长作了少许改动.另外天气预报的数据,大家自己弄吧,做个小偷程序什么的,我这里就用下面的JSP代替了:
getweather.jsp
<%@ page contentType="text/HTML; charset=gb2312" %>
<%
String city=request.getParameter("city");
if(city.equals("0"))
out.print("北京,2006-7-17,多云,30,南风2级");
else if(city.equals("1"))
out.print("上海,2006-7-17,多云,35,雷雨大风4级");
else if(city.equals("2"))
out.print("天津,2006-7-17,多云,35,大风5级");
else
out.print("没有数据,没有数据,没有数据,没有数据,没有数据");
%>
页面代码:weather.htm <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML><HEAD><TITLE>weather</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<SCRIPT language=javascript src="icons/prototype.js"></SCRIPT>
<SCRIPT language=javascript src="icons/common.js"></SCRIPT> <STYLE type=text/css>BODY {
FONT-SIZE: 12px; FONT-FAMILY: Courier New, Courier, mono
}
TD {
FONT-SIZE: 12px; FONT-FAMILY: Courier New, Courier, mono
}
TH {
FONT-SIZE: 12px; FONT-FAMILY: Courier New, Courier, mono
}
BODY {
MARGIN: 0px
}
</STYLE>
<SCRIPT language=javascript>
function loadPage(){
loadCity();
loadWeather();
}
//======================================================;
function loadWeather(s){
if($("selectCity")) $("selectCity").disabled = true;
if(s == undefined) s = "0";
var o = $("weatherTd");
o.innerHTML = getLoadInfo();
loadAjaxData("getweather.jsp",{city:s},successWeather,errorWeather);
}
function successWeather(v){
if($("selectCity")) $("selectCity").disabled = false;
var o = $("weatherTd");
o.innerHTML = getWeatherHTML(v.responseText);
}
function errorWeather(){
if($("selectCity")) $("selectCity").disabled = false;
var o = $("weatherTd");
o.innerHTML = getErrorInfo();
}
function getWeatherHTML(s){
var a = s.split(",");
var ta = ["城市","日期","天气","气温","风力"];
var s = getWeatherShow(a[2])+"<br>";
for(var i=0;i<ta.length;i++){
s += ta +":"+a+"<br>";
}
return s;
}
function getWeatherShow(s){
var a = s.split("转");
s = "";
for(var i=0;i<a.length;i++){
s += getWeatherIcon(a);
}
return s;
}
function getWeatherIcon(s){
var icons = new Array();
icons[0] = {name:"",src:"w0.gif"};
icons[1] = {name:"中雨",src:"w0.gif"};
icons[2] = {name:"中雪",src:"w0.gif"};
icons[3] = {name:"暴雨",src:"w0.gif"};
icons[4] = {name:"多云",src:"w0.gif"};
icons[5] = {name:"小雨",src:"w0.gif"};
icons[6] = {name:"大雨",src:"w0.gif"};
icons[7] = {name:"阴",src:"w0.gif"};
icons[8] = {name:"晴",src:"w0.gif"};
icons[9] = {name:"雾",src:"w0.gif"};
icons[10] = {name:"雨加雪",src:"w0.gif"};
icons[11] = {name:"扬沙",src:"w0.gif"};
icons[12] = {name:"冰雹",src:"w0.gif"};
icons[13] = {name:"小雪",src:"w0.gif"};
icons[14] = {name:"雷阵雨",src:"w0.gif"};
icons[15] = {name:"大雪",src:"w0.gif"};
icons[16] = {name:"阵雨",src:"w0.gif"};
var r = icons[0].src;
for(var i=1;i<icons.length;i++){
if(icons.name == s){
r = icons.src;
break;
}
}
return "<img src="icons/"+r+"" width="60" height="60" border="0" align="absmiddle">";
}
//======================================================;
function loadCity(){
var o = $("cityTd");
o.innerHTML = getLoadInfo();
loadAjaxData("city.jsp",null,successCity,errorCity);
}
function successCity(v){
var o = $("cityTd");
o.innerHTML = getCityHTML(v.responseText);
}
function errorCity(){
var o = $("cityTd");
o.innerHTML = getErrorInfo();
}
function getCityHTML(s){
var a = s.split(",");
s = "城市：<select id="selectCity" onChange="loadWeather(this.value);">";
for(var i=0;i<a.length;i++){
s += "<option value=""+i+"">"+a+"</option>";
}
s += "</select>";
return s;
}
//======================================================;
function getLoadInfo(){
return "<img src="icons/loading.gif" width="16" height="16" border="0" align="absmiddle">正在加载数据...";
}
function getErrorInfo(){
return "<img src="icons/warning.gif" width="14" height="14" border="0" align="absmiddle">数据加载失败!";
}
//======================================================;
</SCRIPT> <META content="MSHTML 6.00.2900.2912" name=GENERATOR></HEAD>
<BODY onload=loadPage();>
<H2 align=center>Ajax版的天气预报</H2><BR>
<TABLE height=150 cellSpacing=1 cellPadding=5 width=300 align=center bgColor=#999999 border=0>
<TBODY>
<TR>
<TD id=cityTd bgColor=#eeeeee height="5%"> </TD></TR>
<TR>
<TD id=weatherTd bgColor=#ffffff height="95%"><BR></TD></TR></TBODY></TABLE> </BODY></HTML> 其它文件请下载.
function TempSave(ElementID)
{
CommentsPersistDiv.setAttribute("CommentContent",document.getElementById(ElementID).value);
CommentsPersistDiv.save("CommentXMLStore");
}
function Restore(ElementID)
{
CommentsPersistDiv.load("CommentXMLStore");
document.getElementById(ElementID).value=CommentsPersistDiv.getAttribute("CommentContent");
}
源码下载：http://203.93.208.26/kj/cwb/dir5/Testweather.zip |
|
|手机版|Java学习者论坛
( 声明：本站资料整理自互联网，用于Java学习者交流学习使用，对资料版权不负任何法律责任，若有侵权请及时联系客服屏蔽删除 )
发表于 2014-10-13 04:53:10