<!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. zeroMQ 4 java

    自己最开始是在cloud foundry中接触过消息服务器(nats),或者说是消息中间件,也算是初步知道了一个消息服务器对于分布式的网络系统的重要性,后来自己也曾想过在一些项目中使用它,尤其是在一些 ...

  2. Redis中的Stream数据类型作为消息队列的尝试

    Redis的List数据类型作为消息队列,已经比较合适了,但存在一些不足,比如只能独立消费,订阅发布又无法支持数据的持久化,相对前两者,Redis Stream作为消息队列的使用更为有优势.   相信 ...

  3. http接口测试和使用，首先要了解什么是http请求

    http接口测试和使用,首先要了解什么是http请求: http请求通俗讲就是把客户端的东西通过http协议发送到服务端,服务端根据http协议的定义解析客户端发过 来的东西! http请求中常用到的 ...

  4. [转载] 管Q某犇借的手写堆

    跟gxy大神还有yzh大神学了学手写的堆,应该比stl的优先队列快很多. 其实就是维护了一个二叉堆,写进结构体里,就没啥了... 据说达哥去年NOIP靠这个暴力多骗了分 合并果子... templat ...

  5. Java虚拟机知识点【内存】

    运行时数据区 程序计数器(Program Counter)   每个线程独占自己的程序计数器.如果当前执行的方式不是native的,那程序计数器保存JVM正在执行的字节码指令的地址,如果是native ...

  6. 学习笔记-jvm运行时数据区

    按照线程私有和共享区域来划分 线程私有 程序计数器 指向当前线程正在执行的字节码行号地址,如果是本地方法,值为undefined 虚拟机中唯一不会oom的区域 为什么会有程序计数器 - java天生多 ...

  7. 洛谷P1129 [ZJOI2007]矩阵游戏 题解

    题目链接:https://www.luogu.org/problemnew/show/P1129 分析: 这道题不是很好想,但只要想的出来,代码不成问题. 思路1 举几个例子,我们发现, 对于任何数来 ...

  8. 常用的re模块的正则匹配的表达式

    07.01自我总结 常用的re模块的正则匹配的表达式 一.校验数字的表达式 1.数字 ^[0-9]\*$ 2.n位的数字 ^\d{n}$ 3.至少n位的数字 ^\d{n,}$ 4.m-n位的数字 ^\ ...

  9. 基于Bitnami gitlab OVA包的gitlab 环境搭建

    前言 最近在折腾gitlab,本篇记录搭建的过程方便以后查找 环境 Windows server + VMware 安装 为方便本次我们直接采用Bitnami的VOA安装包(VOA格式可同时兼容Vir ...

  10. DAX 第六篇：统计函数

    统计函数用于创建聚合,对数据进行统计分析.在使用统计函数时,必须考虑到数据模型,表之间关系,数据重复等因素,一般都会搭配过滤函数实现数据的提取和分析. 统计量一般是:均值.求和.计数.最大值.最小值. ...