<!DOCTYPE html>
<html>
<head>
<title>index</title>
<meta charset="utf-8">
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="template.js"></script>
<style type="text/css">
table.gridtable {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #666666;
border-collapse: collapse;
}
table.gridtable th {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #dedede;
}
table.gridtable td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #ffffff;
}
</style>
</head>
<body>
<div id="content"></div>
</body>
<script id="weather" type="text/html">
<h1>{{title}}</h1>
{{if status==1000}}
<div>温度：{{data.wendu}}℃</div>
<div>{{data.ganmo}}</div>
<div>{{data.forecast.length}}日预报：</div>
<table class="gridtable">
<tr>
<th>日期</th>
<th>天气</th>
<th>风力</th>
<th>风向</th>
<th>最高气温</th>
<th>最低气温</th>
</tr>
{{each data.forecast as row i}}
<tr>
<td>{{row.date}}</td>
<td>{{row.type}}</td>
<td>{{row.fengli}}</td>
<td>{{row.fengxiang}}</td>
<td>{{row.high}}</td>
<td>{{row.low}}</td>
</tr>
{{/each}}
</table>

{{else}}出错了{{/if}}
</script>
<script type="text/javascript">
var city="";
$.ajax({
url:"http://wthrcdn.etouch.cn/weather_mini",
type:"get",
dataType:"jsonp",
data:{
city:"北京",
},
success:function(json){
json.title=city+'天气预报';
var data=json;
var html=template('weather',data);
$("#content").html(html);
},
error:function(){
alert('error');
}
})
</script>
</html>

template.demo.js的更多相关文章

  1. 下拉加载更多DEMO(js实现)

    项目的一个前端页面展示已购买商品时,要求能下拉加载更多.花了点时间研究这个功能,以前没做过. 首先需要给div加scroll事件,监听滚动条滚动动作.那何时触发加载动作呢?当滚动条滚到底的时候.如何判 ...

  2. path-control demo js

    THREE.Spline = function(a) { function b(a, b, c, d, e, f, g) { a = 0.5 * (c - a); d = 0.5 * (d - b); ...

  3. webpack配合vue.js实现完整的单页面demo

    本篇文章主要是我在开发前研究了webpack+vue.js的单页面应用,因为需要用到node的npm,所以确保安装了node,建议官网安装最新的稳定版本.并且在项目中需要加载一些npm包,由于npm的 ...

  4. 微信JS SDK Demo 官方案例[转]

    摘要: 微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包. 通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照.选图.语音.位置等手机系统的能力,同时可以直接使用 ...

  5. 微信JS SDK Demo 官方案例

    微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包. 通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照.选图.语音.位置等手机系统的能力,同时可以直接使用微信分享 ...

  6. js的选择星级评分插件

    需要引入jquery和raty的js,并且低版本的jquery可能会出现样式问题,或者点击没反应,可换高版本试试 raty文档及下载: http://www.wbotelhos.com/raty/ 把 ...

  7. Three.js 3D特效学习

    一.Three.js基本介绍 Three.js是JavaScript编写的WebGL第三方库.提供了非常多的3D显示功能.Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场 ...

  8. Backbone Backbone-localStorage demo

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 初步学习vue.js

    vue是法语中视图的意思,Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API. 响应的数据绑定 Vue.js 的核心是一个响应的数据绑定系统,它让数据与 DOM 保持同 ...

随机推荐

  1. jacoco生成覆盖率报告

    操作步骤: 1.下载git上最新的代码到本地 git clone  {代码地址} 2.在服务器上打出相关服务的jar包 1) 登上服务器,切换到目标服务所在路径: cd /xx/xx/xx/xx 2) ...

  2. 开源：C# 代码自动生成工具，支持站点前后台

    前言 写这个项目有很长一段时间了,期间也修修改改,写到最后,自己也没咋用(研究方向变化了). 正文 具体项目开源了:https://github.com/supperlitt/WebAutoCodeO ...

  3. c++学习书籍推荐《数据结构C++语言描述:应用标准模板库STL(第2版)》下载

    本书是Ford和Topp两位教授于1996看出版的名著Data Structures with C++的第2版,在全球范围内已经有数以万计的学生从中受益.作者将C++语言作为算法描述语言,应用包含规范 ...

  4. C语言学习书籍推荐《你必须知道的495个C语言问题》

    萨米特 (Steve summit) (作者), 孙云 (译者), 朱群英 (译者) 下载地址:点我 <你必须知道的495个C语言问题>以问答的形式组织内容,讨论了学习或使用C语言的过程中 ...

  5. wcf服务编程（二）

    地址:      1.命名管道:用于同一台机器的跨进程通讯.URL表示方式为:net.pipe://  ;由于是在同一台机器的不同进程间通讯,所以不用定义端口号.

  6. 9.18考试 第三题chess题解

    在讲这道题之前我们先明确一个丝薄出题人根本没有半点提示却坑死了无数人的注意点: 走敌人和不走敌人直接到时两种走法,但只走一个敌人和走一大坨敌人到同一个点只算一种方案(当然,前提是步骤一致). 当时看完 ...

  7. Windows OS添加USB3.0驱动！

    原因:现在的win7.win2008等一些早期的系统在安装时无法使USB鼠标和键盘... 1.  素材(dism64工具.UltraISO工具.U盘一个) 2.  先使用UltrISO工具制作一个wi ...

  8. Oracle粗心大意总结篇

    有时候写sql语句不细心的话,很容易犯大错误,导致你纠结好久,找不到原因,慢慢总结: 错误1: SELECT * FROM( SELECT USER.*, ROWNUM AS CON FROM USE ...

  9. NOIp 2018 普及&提高组试题答案

    你们考的咋样呢?在评论区说出自己的分数吧!

  10. Button事件的三种实现方法

    onclick事件的定义方法,分为三种,分别为在xml中进行指定方法:在Actitivy中new出一个OnClickListenner():实现OnClickListener接口三种方式. 1.在xm ...