m.lom599.com_手机版乐白家网址_乐百家手机首页登录

写个一个简单的canvas图表,模板引擎Crox用法大全

作者: 手机版乐白家网址  发布:2019-08-15

模板引擎Crox用法大全(更新版),模板crox

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>crox</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="${base}/js/jquery1.11.min.js"></script>
<script src="${base}/js/crox1.3.1.js"></script>
</head>
<body>
    <div id='tt'>
        转义取值:
        <div>A: {{root.e>2}} - B: {{'a btc'<4}}</div>
        不转义取值:
        <div>A: {{{root.e>2}}} - B: {{{'a btc'<'5'}}}</div>
        原样输出:
        <div>"{{#raw}}{{root.e>2}}胜多负少{{/raw}}"</div>
        <br> 布尔:
        <div>"{{root.bbb}}"</div>
        ['']取值:
        <div>"{{root['没引号']}}"</div>
        复合属性:
        <div>"{{root["复合.属性"]}}"</div>
        <br> 声明一个变量 , 并赋值:
        <div>{{set c = root.ee}} c.e: {{c.e}}</div>
        if判断:
        <div>{{#if root.e > root.e  1 }} E > E   1 {{else}} E <= E  1 {{/if}}</div>
        遍历对象:
        <div>
            <!--两个 string 会声明一个名字为其值的变量,第一个表示 值,第二个表示 索引 (可选)。  -->
            {{#forin root val index}} {{index}} => {{val}}, {{/forin}}
        </div>
        遍历数组:
        <div>
            <!--也可以用forin  -->
            {{#each root.list val index}} {{index}} => {{val}}, {{/each}}
        </div>
        直接调用js函数或方法:
        <div>{{console.log(root.bb.toUpperCase())}}</div>
        <div>{{empty(root.f,'amIurs发现新大陆!')}}</div>
    </div>
    <hr />
</body>
<script type="text/javascript">
    var data =
            {没引号: '没引号ok' , '有引号': '有引号ok' , "复合.属性": '能得到' , bb: 'a btc' , ee: {d: 3 , e: '哈哈' ,
            } , e: 3 , f: '' , bbb: true , null值: null ,
                list: ['a' , 'b' , 'c' , false , null , '结束']
            };
    $('#tt').after(crox('tt' , data));//后期处理

    function crox(ele , data) {
        var source = $('#'   ele).hide().html();
        var source = source.replace(/&gt;/g , '>').replace(/&lt;/g , '<');

        var temp = Crox.compile(source);
        var result = temp(data);//将数据 填充到模板
        console.log(result);

        return '<div id=' ele '-crox>'   result   '</div>';
    }

    function empty(str , val) {
        return str != null && str.toString() != '' ? str : val;
    }
</script>
</html>

 

! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" html head title crox / title meta http-equiv ="keywords" con...

超文本标记语言(HTML)5 第一次向HTML 中引入新的元素。新的结构元素包括aside、figure 和section。新的内联元素包括time、meter 和progress。新的内嵌元素有video 和audio。新的交互元素有details、datagrid 和command。
 
  超文本标记语言(HTML)的开发到1999 年HTML 4 就停止了。万维网联盟(W3C)把重点转向将HTML 的底层语法从标准通用标记语言(SGML)改为可扩展标记语言(XML),以及可缩放向量图型(SVG)、XForms 和MathML 这些全新的标记语言。浏览器厂商则把精力放到选项卡和富站点摘要(RSS)阅读器这类浏览器特性上。Web 设计人员开始学习使用异步JavaScript XML(Ajax),在现有的框架下通过层叠样式表(CSS)和JavaScript? 语言建立自己的应用程序。但是在接下来的八年中,HTML 本身没有任何变化。
 
  最近,它又复活了。三家重要的浏览器厂商 —Apple、Opera 和Mozilla Foundation — 成立了Web Hypertext Application Technology Working Group(WhatWG)来开发传统HTML 的新版本。最近,W3C 也注重到了这些活动,也启动了自己的新一代HTML 项目,双方的成员有很多是相同的。这两个项目最终很可能合并。虽然很多细节还在争论之中,但下一版本HTML 的大体轮廓已经清楚了。
 
  Web 开发人员从1999 年就一直期待HTML 的新版本(通常称为HTML 5,但是也称为Web Applications 1.0),现在它终于发布了。它保持了HTML 原来的特色:没有名称空间或模式。元素不必结束。浏览器会宽容地对待错误。p 仍然是p,table 仍然是table。
 
  假如在1999 年将一位Web 开发人员冷冻起来,现在再解冻,那么他会碰到一些新的让人迷惑的元素。是的,他熟悉的元素(比如div)仍然保留了;但是,HTML 现在还包含section、header、footer 和nav 等新元素。em、code 和strong 仍然存在,但是增加了meter、time 和m。img 和embed 仍然可用,但是还增加了video 和audio。但是,他仔细观察一下就会发现,这些元素实际上没什么区别。其中许多元素可能在1999 年是开发人员需要而没有得到的。通过与他已经把握的元素进行简单的类比,这些新元素都很轻易理解。实际上,与Ajax 或CSS 相比,它们非常轻易把握。
 
  最后,当他打开300MHz 的笔记本(运行的是Windows 98,也是在1999 年冷冻起来的)时,他可能对Netscape 4 和Windows? Internet Explorer? 5 中显示的新页面效果很吃惊。当然,这些老式浏览器不熟悉新元素,会完全忽略它们,但是页面仍然会显示,内容仍然是完整的。
 
  这并不是什么虚构的故事。HTML 5 的设计原则就是在不支持它的浏览器中能够平稳地退化。原因很简单:我们都是这样的 “原始人”。浏览器现在有选项卡、CSS 和XmlHttpRequest,但是它们的HTML 显示引擎仍然停留在1999 年的水平。除了用户量大大增加之外,Web 其实在本质上没什么进步。HTML 5 考虑到了这一点。它目前为Web 开发人员一些真正的好处,随着浏览器的缓慢升级,页面浏览者会逐渐享受到这些好处。
 
  我们来看看HTML 5 提供了什么

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8">  
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  
<title>canvas绘制图表</title>  
<style type="text/css">  
*{  
    margin:0;  
    padding:0;  
}  
body{  
    text-align:center;  
    background-color:black;  
}  
#c1{  
    background-color:white;  
}  
</style>  
<script type="text/javascript">  
function rnd(n,m){  
    return parseInt(Math.random()*(m-n) n);  
}  
window.onload = function(){  
    var canvas = document.getElementById('c1');  
    var gd = canvas.getContext('2d');  
    var aData = [100,200,300];  
    var space = 20;  
    var topSpace = 100;  
    var iMax=Math.max.apply(null,aData)  
    var w=40;  
    var lastR=0;    //前一个柱子的right  
    for(var i=0;i<3;i  ){  
        var l=lastR space;  
        var h=(aData[i]/iMax)*(canvas.height-topSpace);  
        var t=canvas.height-h;  
        gd.fillStyle='rgb(' rnd(0, 256) ', ' rnd(0, 256) ', ' rnd(0, 256) ')';  
        gd.fillRect(l,t,w,h);  
        lastR=l w;  
    }  
}  
</script>  
</head>  
<body>  
    <canvas width='500' height="500" id="c1"></canvas>  
</body>  
</html>  

本文由m.lom599.com发布于手机版乐白家网址,转载请注明出处:写个一个简单的canvas图表,模板引擎Crox用法大全

关键词: m.lom599.com 乐百家lebet5588