<!DOCTYPE unspecified PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>天气预报查询</title> <meta content="text/html; charset=utf-8"> <script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="weather_forecast.js"></script> <style type="text/css"> table.weather { table-layout: fixed; text-align: center; } table.index { width: 580px; } body { font-family: 仿宋; } select { width: 80px; } </style> </head> <body> <center> <select id="province"> <option value="">---省---</option> <?php //打开数据库 $connect = mysql_connect ( "localhost", "root", "" ); mysql_select_db ( "weather_forecast" ); mysql_query ( "set names utf8" ); //查询省份数据 $sql = "select * from `province`"; $result = mysql_query ( $sql ); if ($result && mysql_num_rows ( $result ) > 0) { //如果数据不为空，则逐条解析并加入下拉列表 while ( $arr = mysql_fetch_array ( $result ) ) { echo "<option value='" . $arr ["id"] . "'>" . $arr ["name"] . "</option>"; } } mysql_close ( $connect ); ?> </select> <select id="city"> <option value="">---市---</option> </select> <button id="commit">查询</button> <hr /> <div id="weather"></div> </center> </body> </html>
city.php（获取城市信息页）
forecast.php（请求跨域地址访问页）
weather_forecast.js（ajax请求脚本）
$(function() { $("#province").change( function() { $.ajax({ url : "/ajax/weather_forecast/city.php", type : "POST", data : { province : $("#province option:selected").val() }, dataType : "json", success : function(data) { if (data == null || data == "") { $("#city").empty(); $myoption = $("<option value=''>---市---</option>"); $("#city").append($myoption); return; } $("#city").empty(); for ( var i = 0; i < data.length; i++) { $myoption = $("<option value='" + data[i].city_number + "'>" + data[i].name + "</option>"); $("#city").append($myoption); } } }); }); $("button").click( function() { if ($("#city").val() == null || $("#city").val() == "") { window.alert("请选择正确省份和城市"); return; } $.ajax({ url: "/ajax/weather_forecast/forecast.php", type: "POST", data: {city_number:$("#city").val()}, dataType: "json", success: function (data){ var info = data.weatherinfo; var $table = "<table class='weather' border='1'><tr><th></th><th>今天</th><th>明天</th><th>后天</th></tr>"; $table += "<tr><th>温度</th><td>"+info.temp1+"</td><td>"+info.temp2+"</td><td>"+info.temp3+"</td></tr>"; $table += "<tr><th>天气</th><td>"+info.weather1+"</td><td>"+info.weather2+"</td><td>"+info.weather3+"</td></tr>"; $table += "<tr><th>风速</th><td>"+info.wind1+"</td><td>"+info.wind2+"</td><td>"+info.wind3+"</td></tr>"; $table += "<tr><th>风速级别</th><td>"+info.fl1+"</td><td>"+info.fl2+"</td><td>"+info.fl3+"</td></tr>"; $table += "</table><br />"; $table += "<table class='index' border='1'><tr><th colspan='3'>详细情况</th></tr>"; $table += "<tr><th width='20%'>今天穿衣指数</th><td width='10%'>"+info.index+"</td><td width='70%'>"+info.index_d+"</td></tr>"; $table += "<tr><th>48小时穿衣指数</th><td>"+info.index48+"</td><td>"+info.index48_d+"</td></tr>"; $table += "<tr><th>紫外线及48小时紫外线</th><td>"+info.index_uv+"</td><td>"+info.index48_uv+"</td></tr>"; $table += "<tr><th>洗车</th><td colspan='2'>"+info.index_xc+"</td></tr>"; $table += "<tr><th>外出旅游</th><td colspan='2'>"+info.index_tr+"</td></tr>"; $table += "<tr><th>舒适指数</th><td colspan='2'>"+info.index_co+"</td></tr>"; $table += "<tr><th>晨练</th><td colspan='2'>"+info.index_cl+"</td></tr>"; $table += "<tr><th>晾晒</th><td colspan='2'>"+info.index_ls+"</td></tr>"; $table += "<tr><th>过敏</th><td colspan='2'>"+info.index_ag+"</td></tr>"; $table += "</table>"; $("#weather").html($table); } }); }); });
4、黄金价格实时监控
4.1需要两个页面，一个是展示页面，另一个是数据更新页面
4.2需要根据上次的数据和本次的数据算出涨跌并动态加载相应的图片资源
4.3设置两个计时器，一个负责发送ajax请求，另一个负责倒计时
4.4源代码
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>黄金价格走势</title> <script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="gold_price.js"></script> </head> <body> <div align="center"> <h1>黄金价格走势</h1> <h3>每隔5秒刷新页面，距下次刷新还有<font id="sec">5</font>秒</h3> <table align="center" width="300px"> <tr><td width="30%">市场</td><td width="30%">最新价格</td><td width="40%">涨跌</td></tr> <tr id="ld"><td width="30%">伦敦</td><td width="30%">0</td><td width="40%">0</td></tr> <tr id="tw"><td width="30%">台湾</td><td width="30%">0</td><td width="40%">0</td></tr> <tr id="dj"><td width="30%">东京</td><td width="30%">0</td><td width="40%">0</td></tr> </table> </div> </body> </html>
gold_price.js
$(function (){ run(); //开启定时器 var interval = null; var interval2 = null; function run() { if (interval == null) { //设置定时器，每5秒钟执行getPrice函数一次 interval = setInterval(getPrice, "5000"); } if (interval2 == null) { interval2 = setInterval(jishi, "1000"); } } //停止定时器 function stop() { if (interval != null) clearTimeout(interval); } //发送ajax请求 function getPrice() { $.ajax({ url: "/ajax/gold_price/price.php", type: "POST", data: {ld: $("#ld td:eq(1)").text(), tw: $("#tw td:eq(1)").text(), dj: $("#dj td:eq(1)").text()}, dataType: "json", success: function(data) { //伦敦 $("#ld > td:eq(1)").text(data.ld.price); var $value = "0"; if (parseInt(data.ld.price_change) == 0) { $value = "0"; }else if (parseInt(data.ld.price_change) > 0) { $value = "<img src='up.png' alt='rise'>"+data.ld.price_change; }else { $value = "<img src='down.png' alt='fall'>"+data.ld.price_change.substring(1); } $("#ld > td:eq(2)").html($value); //台湾 $("#tw > td:eq(1)").text(data.tw.price); var $value = "0"; if (parseInt(data.tw.price_change) == 0) { $value = "0"; }else if (parseInt(data.tw.price_change) > 0) { $value = "<img src='up.png' alt='rise'>"+data.tw.price_change; }else { $value = "<img src='down.png' alt='fall'>"+data.tw.price_change.substring(1); } $("#tw > td:eq(2)").html($value); //东京 $("#dj > td:eq(1)").text(data.dj.price); var $value = "0"; if (parseInt(data.dj.price_change) == 0) { $value = "0"; }else if (parseInt(data.dj.price_change) > 0) { $value = "<img src='up.png' alt='rise'>"+data.dj.price_change; }else { $value = "<img src='down.png' alt='fall'>"+data.dj.price_change.substring(1); } $("#dj > td:eq(2)").html($value); } }); } function jishi() { var t = parseInt($("#sec").text()); if (t > 1) { $("#sec").text(--t); }else { $("#sec").text("0"); $("#sec").text("5"); } } });
price.php
<?php //设置返回的格式 header ( "Content-Type:text/html;charset=utf-8" ); //设置禁用缓存 header ( "Cache-Control:no-cache" ); //接收数据 $ld_old = $_POST['ld']; $tw_old = $_POST['tw']; $dj_old = $_POST['dj']; //生成三个动态数据 $ld = rand(500, 1500); $tw = rand(500, 1500); $dj = rand(500, 1500); //计算涨跌，发送结果 $info = '{"ld":{"price":"'.$ld.'","price_change":"'.($ld-$ld_old).'"},'; $info .= '"tw":{"price":"'.$tw.'","price_change":"'.($tw-$tw_old).'"},'; $info .= '"dj":{"price":"'.$dj.'","price_change":"'.($dj-$dj_old).'"}}'; //写会数据 echo $info;
原创文章，作者：优速盾-小U，如若转载，请注明出处：https://www.cdnb.net/bbs/archives/31848
