<!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. C语言学习书籍推荐《学通C语言的24堂课》下载

    下载地址:点我 编辑推荐 <学通C语言的24堂课>:用持续激励培养良好习惯以良好习惯铸就伟大梦想——致亲爱的读者朋友在开始学习<学通C语言的24堂课>的同时,强烈建议读者朋友同 ...

  2. 【tf.keras】在 cifar 上训练 AlexNet，数据集过大导致 OOM

    cifar-10 每张图片的大小为 32×32,而 AlexNet 要求图片的输入是 224×224(也有说 227×227 的,这是 224×224 的图片进行大小为 2 的 zero paddin ...

  3. 剑指offer第二版-总结：二叉树的遍历

    思想:前序(根左右),中序(左根右),后序(左右根) 前序非递归遍历: 首先判断根是否为空,将根节点入栈 1.若栈为空,则退出循环 2.将栈顶元素弹出,访问弹出的节点 3.若弹出的节点的右孩子不为空则 ...

  4. infiniband install driver

    硬件:Mellanox InfiniBand,主要包括 HCA(主机通道适配器)和交换机两部分 软件:CentOS 6.4 MLNX_OFED_LINUX-2.1-1.0.0-rhel6.4-x86_ ...

  5. msf出现Database not connected等问题【已解决】

         kali启动msf后,出现Module database cache not built yet, using slow search,或是Database not connected,或是 ...

  6. npm-472错误

    今天无聊给npm进行了一波升级,却没想到导致出现bug,搞了半天才解决了....这里进行一下分享 1.安装npm npm install -g 升级到最新版npm install -g npm@< ...

  7. HTML入门编写

    今天给大家带来的是HTML初步讲解(即第一趴). 问题区: 1.什么是HTML? 先来个百度解说压阵. html,全称Hypertext Markup Language,也就是"超文本链接标 ...

  8. RabbitMQ 从入门到精通（二）

    目录 1. 消息如何保障百分之百的投递成功? 1.1 方案一:消息落库,对消息状态进行打标 1.2 方案二:消息的延迟投递,做二次确认,回调检查 2. 幂等性 2.1 幂等性是什么? 2.2 消息端幂 ...

  9. mui.storage 将数据持久化到本地

    在一个用mui做得app中,要求把历史记录放在本地(感觉...无法言喻的sd),但最终还是做了,以下来记录本次的学习到的内容 mui.plusReady(function() { //这里是一开始定义 ...

  10. ehcache的使用 Shiro与Ehcache的结合（附：EhcacheUtils）

    ehcache 缓存的使用 合理的使用缓存会极大的提高程序的运行效率.切记:缓存请勿滥用. 配置ehcache与Shiro shiro初识请查看该文章 https://blog.csdn.net/py ...