<!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. 法国神器"mimikatz"简化版,一键导出结果

    神器之所以称之为神器.那是闹着玩的? 法国神器"mimikatz",那是相当的好使!!! GitHub:https://github.com/gentilkiwi/mimikatz ...

  2. Windows使用Python统一设置解析器路径

    碰到的问题: .py文件放在cgi-bin文件夹下面,这个.py文件都要设置"#!python.exe路径"来告诉CGI如何找解析器解析这个.py的文件,我是想知道这个路径可否统一 ...

  3. js 控制文本框输入要求

    把输入框中 输入的字符串含有中文逗号 改成 英文逗号 举例: <input type="text" id="keywords" style="w ...

  4. 关于在记事本写入"\n"不显示换行的原因

    Linux系统下直接使用  "\n"  即可换行 windows下需要使用   "\r\n"

  5. JVM监控jconsole

    1. 描述 ​ 程序在开发过程中,有可能会发生CPU飙高.内存溢出等问题或系统在后期调优阶段,不可避免的要监控JVM情况,JDK自带的Jconsole监控工具,结合Tomcat使用非常方便,占用内存小 ...

  6. bash 遍历目录

    bash遍历目录脚本traverse.sh: #!/bin/bash datadir=$ declare -a dirlist dirlist=`>/dev/null` for i in ${d ...

  7. Excel催化剂开源第10波-VSTO开发之用户配置数据与工作薄文件一同存储

    在传统的VBA开发中,若是用的是普通加载项方法,是可以存储数据在xlam上的,若用的是Com加载项方法同时是Addins程序级别的项目开发的,配置文件没法保存到工作薄中,一般另外用配置文件来存放供调用 ...

  8. C# 针对特定的条件进行锁操作，不用lock，而是mutex

    背景:用户领取优惠券,同一个用户需要加锁验证是否已经领取,不同用户则可以同时领取. 上代码示例: 1.创建Person类 /// <summary> /// Person类 /// < ...

  9. 非controller层获取response和request对象

    ServletRequestAttributes attrs = (ServletRequestAttributes) RequestContextHolder.getRequestAttribute ...

  10. 《C#从入门到精通（第3版）》目录

    C#从入门到精通(第3版)pdf+源码 一.基础知识 1.初识C#及其开发环境 2.开始C#之旅 3.变量与常量 4.表达式与运算符 5.字符与字符串 6.流程控制语句 7.数组与集合 8.属性和方法 ...