<!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. Git 的一些使用细枝末节

    新入职XX公司第一天, 使用旧同事的电脑 Step1: 在Android Studio 中配置帐号 $ git config --global user.name author #将用户名设为auth ...

  2. Android 装逼技术之暗码启动应用

    什么是暗码? 在拨号盘中输入*#*#<code>#*#*后,APP 可以监控到这些输入,然后做相应的动作,比如启动应用,是不是有点骚. 下面看下这个骚操作是如何实现的. 效果预览 源码 D ...

  3. zimg服务器图片数据迁移后，图片404异常的问题解决

    由于zimg特殊的图片存储结构及图片命名规则,其迁移数据应该当相当简单的,仅把对应的存储图片数据的文件夹复制即可.往往简单的东西总会有一些成本在里面,下面是我简单的迁移测试过程中遇到的一些问题,仅供参 ...

  4. TF项目实战（SSD目标检测）-VOC2007

    TF项目实战(SSD目标检测)-VOC2007 训练好的模型和代码会公布在网上: 步骤: 1.代码地址:https://github.com/balancap/SSD-Tensorflow 2.解压s ...

  5. Excel催化剂开源第32波-VSTO开发的插件让WPS顺利调用的方法-注册表增加注册信息

    VSTO插件开发完成后,鉴于现在WPS用户也不少,很多时候用户没办法用OFFICE软件,只能在WPS环境下办公,VSTO开发的插件,只需增加一句注册表信息,即可让WPS识别到并调用VSTO开发的功能, ...

  6. 前端插件之Bootstrap Dual Listbox使用

    工欲善其事,必先利其器 对于很多非专业前端开发来说写页面是非常痛苦的,借助框架或插件往往能够达到事半功倍的效果,本系列文章会介绍我在运维系统开发过程中用到的那些顺手的前端插件,如果你是想写XX管理系统 ...

  7. 关于tomcat-startup.bat启动失败或者一闪而过问题解决记录

    一.前言 Tomcat 服务器是一个免费的开放源代码的Web 应用服务器,属于轻量级应用服务器,在中小型系统和并发访问用户不是很多的场合下被普遍使用,是开发和调试JSP 程序的首选.对于一个初学者来说 ...

  8. vue.js 中组件的使用

    Vue中组件的使用 方式一 1.使用Vue.extend创建组件 var com1 = Vue.extend({ template: '<h3>这是使用 Vue.extend 创建的组件& ...

  9. 代码中批量执行Oracle SQL语句

    今天在写一个工具(winform),作用是批量的INSERT OR  UPDATE ORACLE数据库中的一个表. 执行的时候老是报错“[911] ORA-00911: invalid charact ...

  10. CSDN 免积分下载

    你可能不相信这个标题,那么打开下面的链接试试吧 ↓↓↓ Github项目 最新功能 ↓↓↓ 0积分资源搜索 0积分资源搜索(备用地址) CSDN资源导出 CSDN资源下载体验群 (每日可免费下载一次) ...