jsp页面增加天气和时间的显示

来源：互联网发布：手机淘宝老版本编辑：程序博客网时间：2024/05/21 23:33

    <SCRIPT type="text/javascript">
           var days=new Array("日","一","二","三","四","五","六");
           function showDT(){
               var curDT = new Date();
               var dtStr = curDT.getFullYear() + "年"
                       + (curDT.getMonth()+1) + "月" + curDT.getDate() + "日"
                       + "星期" + days[curDT.getDay()] + " "
                       + curDT.getHours() + ":" + curDT.getMinutes() + ":" + curDT.getSeconds();
               $(".curTime").html(dtStr);
               window.setTimeout(showDT, 1000);
           }
           $(function(){
               showDT(); //调用时间函数
              flvContainerHtml = $("#flvContainer").html();
              homePageHtml = $(document.body).html();
               //显示天气预报
               $.ajax({
                   url:"", //用来获取天气的相关信息，采取是jsoup的跨域请求，后台的代码需要自己逻辑编写。
                   dataType:"jsonp",
                   success:function(json){
                       /**方式四：直接请求得到模版后调用template.compile()编译执行。**/
                       if (!window.artWeather) {
                           $.get("art/weather.html",function(data){
                               window.artWeather = template.compile(data);
                               $(".weather-wrapper").html(window.artWeather(json));
                           });
                       } else {
                           $(".weather-wrapper").html(window.artWeather(json));
                       }
                   }
               });
           });

</SCRIPT>

在jsp源文件中，有相应的标签与之对应，这里面用到template-web.js 这个模板标签库

<div style="width:180px;float:left;font-size:16px;text-align:center;">
   <span style="display:block;margin-top:5px;">今日天气</span>
   <span class="weather" style="display:block;">
   <%= week[0].weather%>，<%= week[0].temperature%>
   </span>
   <span class="img-wrapper">
       <img src="<%= week[0].pictures[0]%>" style="width:40px;height:40px" />
       <% if (week[0].pictures.length>1) { %>
           <img src="<%= week[0].pictures[1]%>" style="width:40px;height:40px" />
       <% } %>
   </span>
</div>
<div style="width:180px;float:right;font-size:16px;text-align:center;">
   <span style="display:block;margin-top:5px;">明日天气</span>
   <span class="weather" style="display:block;">
   <%= week[1].weather%>，<%= week[1].temperature%>
   </span>
   <span class="img-wrapper">
       <img src="<%= week[1].pictures[0]%>" style="width:40px;height:40px" />
       <% if (week[1].pictures.length>1) { %>
           <img src="<%= week[1].pictures[1]%>" style="width:40px;height:40px" />
       <% } %>
   </span>
</div>

阅读全文

0 0