原创 HTML5：JS操作SVG实践体会

在工业信息化系统里，常常需要动态呈现系统的数据在一张示意图里，用于展现系统状态，分析结果等。这样用JavaScript操作svg 元素就有现实意义。本人近期做了一些实践，现分享一下。

需求：

你下面这样一张示意图。

A1至A8，分别用显示各个检测或控制点状态，不同状态显示不同颜色。后端技术不是本文讨论重点，前端技术才是本文讨论重点。前端用H5来实现。

方案：

一、先将该示意图导出成svg格式的文件。例如”用Viso 绘图，然后导出成svg文件“。

二、在浏览器中打开svg文件，查看源码，拷贝svg元素内容。粘贴到你的JS的IDE环境中，用于前端开发。

三、在IDE里书写你的代码，控制你要实现在逻辑。

1、清除在style 标记里<![CDATA[]]这样符号，因为它会导致你的JS无法找到你要变色的元素。

<style type="text/css">        .st1 {fill:url(#grad0-4);stroke:#4f87bb;stroke-width:0.75}    .st2 {fill:#4f87bb;font-family:黑体;font-size:1.00001em}    .st3 {font-family:Calibri;font-size:1em}    .st4 {fill:#4f87bb;font-family:黑体;font-size:0.833336em}    .st5 {marker-end:url(#mrkr4-22);stroke:#5b9bd5;stroke-linecap:round;stroke-linejoin:round;stroke-width:1}    .st6 {fill:#5b9bd5;fill-opacity:1;stroke:#5b9bd5;stroke-opacity:1;stroke-width:0.28409090909091}    .st7 {fill:#ffffff;stroke:#ebeff5;stroke-width:0.75}    .st8 {fill:#759fcc;font-family:Calibri;font-size:0.833336em}    .st9 {fill:none;fill-rule:evenodd;font-size:12px;overflow:visible;stroke-linecap:square;stroke-miterlimit:3} 

</style>

2、接下来要判断浏览器是否支持HTML5

<script type="text/javascript">
    //判断浏览器是否支持HTML5
    try {
        document.createElement("canvas").getContext("2d");
    }
    catch (e) {
        document.getElementById("support").innerHTML = "<h3>你的浏览器不支持HTML5,请安装现代化的浏览器。我们推荐使用最新版的Chrome、 FireFox</h3>";
    } 

 </script>

3、 IE比较特殊，不支持动画元素。所以判断浏览器是否支持IE

//判断是否是IE
function isIE() { //ie?
    if (!!window.ActiveXObject || "ActiveXObject" in window)
        return true;     // alert("IE");
    else
        return false;       //alert("NOT IE");
}

4、在<svg>内部加入如下代码，具体含义看备注

<script ><![CDATA[   //这个<![CDATA[不能省略
//假设已请求服务获取Json串，根据配置获得到颜色值。如下列表。
var jsn = [{"Tag": "A8", "Val": "12", "Color": "#ff0000"}, {"Tag": "A7", "Val": "11", "Color": "#ff3300"},
    {"Tag": "A3", "Val": "10", "Color": "#ff6600"},
    {"Tag": "A4", "Val": "9", "Color": "#ffcc00"},
    {"Tag": "A5", "Val": "9", "Color": "#ffff00"},
    {"Tag": "A6", "Val": "8", "Color": "#ff99cc"},
    {"Tag": "A2", "Val": "6", "Color": "#ffcccc"},
    {"Tag": "A1", "Val": "6", "Color": "#ffcccc"}];

//在svg 标记的onload事件中已经设置了SetTagDisplay
function SetTagDisplay() {
    if (isIE()) { //如果是IE使用ieSetColor方法，每隔一秒闪一次
        window.setInterval(ieSetColor, 1000);
    }
    else { //不是的话，可方便了，遍历标记，查找标记，为标记添加动画元素，就可以了。
        for (var i = 0; i < jsn.length; i++) {
            var TagName = jsn[i].Tag;
            var TagColor = jsn[i].Color;
            var sdy = document.createElementNS("http://www.w3.org/2000/svg", "animate"); //创建元素
            sdy.setAttribute("attributeName", "fill"); //动画变化属性fill，填充颜色
            sdy.setAttribute("attributeType", "CSS");
            sdy.setAttribute("from", "#ffffff"); //从白色开始
            sdy.setAttribute("to", TagColor);//变成它的
            sdy.setAttribute("begin", "1s");
            sdy.setAttribute("dur", "2s");
            sdy.setAttribute("repeatCount", "indefinite");
            document.querySelector("#"+TagName).setAttribute("visibility","visible"); //网上流传很多方法，如：evt.target.ownerDocument; svgDoc.rootElement;这些都不可用。
            document.querySelector("#"+TagName).appendChild(sdy); 

        }
    }
} 

function ieSetColor() { //IE浏览器效果
    for (var i = 0; i < jsn.length; i++) {
        var TagName = jsn[i].Tag;
        var colorInfo = jsn[i].Color;
        var varRect = document.querySelector("#" + TagName);
        varRect.setAttribute("visibility","visible");
        varRect.setAttribute("class", ""); //必须动态清除原有class 否则展现不出来效果。
        varRect.setAttribute("stroke","#ebeff5");
        varRect.setAttribute("stroke-width","0.75"); //动态设置边框
        var colorSet = varRect.getAttribute("fill");
        if (colorSet == colorInfo) {
            varRect.setAttribute("fill", "#ffffff");
        }
        else {
            varRect.setAttribute("fill", colorInfo);
        }
    }
} 

]]></script>

注意事项：

1、可以将样式移入css 文件，与普通css文件一样，不需要加CDATA。引入样入文件与用 <link href="svgTest.css" type="text/css" rel="stylesheet"/>

（网上流传其它方式引入样式文件，经实践都是不可用的。）

2、手动清除要实现效果元素的上样式（如：rect的class="st1"。或在函数内动态清除（ varRect.setAttribute("class", ""),否则无法显示动态效果

3、注意颜色f要小写,JS大小写敏感。

4、操作svg的js代码要写在svg标内。用<script ><![CDATA[ ]]></script>包裹。svg外部定义的变量，函数，svg内部的代码可以访问，调用。

全部代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script type="text/javascript">
    //判断浏览器是否支持HTML5
    try {
        document.createElement("canvas").getContext("2d");
    }
    catch (e) {
        document.getElementById("support").innerHTML = "<h3>你的浏览器不支持HTML5,请安装现代化的浏览器。我们推荐使用最新版的Chrome、 FireFox</h3>";
    }

    //判断是否是IE
    function isIE() { //ie?
        if (!!window.ActiveXObject || "ActiveXObject" in window)
            return true;     // alert("IE");
        else
            return false;       //alert("NOT IE");
    }

</script>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events"
        xmlns:v="http://schemas.microsoft.com/visio/2003/SVGExtensions/" width="11.6929in" height="8.26772in"
        viewBox="0 0 841.89 595.276" xml:space="preserve" color-interpolation-filters="sRGB" class="st9" onload="SetTagDisplay()">

    <script ><![CDATA[
    //已请求服务获取Json串，Json串排序处理，根据Value，算出动画颜色得到如下Json串。
    var jsn = [{"Tag": "A8", "Val": "12", "Color": "#ff0000"}, {"Tag": "A7", "Val": "11", "Color": "#ff3300"},
        {"Tag": "A3", "Val": "10", "Color": "#ff6600"},
        {"Tag": "A4", "Val": "9", "Color": "#ffcc00"},
        {"Tag": "A5", "Val": "9", "Color": "#ffff00"},
        {"Tag": "A6", "Val": "8", "Color": "#ff99cc"},
        {"Tag": "A2", "Val": "6", "Color": "#ffcccc"},
        {"Tag": "A1", "Val": "6", "Color": "#ffcccc"}]; //注意颜色f要小写,js大小敏感。 JS获得到的颜色都是小写f

    function SetTagDisplay() {
        if (isIE()) {
            window.setInterval(ieSetColor, 1000);
        }
        else {
            for (var i = 0; i < jsn.length; i++) {
                var TagName = jsn[i].Tag;
                var TagColor = jsn[i].Color;
                var sdy = document.createElementNS("http://www.w3.org/2000/svg", "animate");
                sdy.setAttribute("attributeName", "fill");
                sdy.setAttribute("attributeType", "CSS");
                sdy.setAttribute("from", "#ffffff");
                sdy.setAttribute("to", TagColor);
                sdy.setAttribute("begin", "1s");
                sdy.setAttribute("dur", "2s");
                sdy.setAttribute("repeatCount", "indefinite");
                document.querySelector("#"+TagName).setAttribute("visibility","visible");
                document.querySelector("#"+TagName).appendChild(sdy);

            }
        }
    }

    function ieSetColor() { //IE浏览器效果
        for (var i = 0; i < jsn.length; i++) {
            var TagName = jsn[i].Tag;
            var colorInfo = jsn[i].Color;
            var varRect = document.querySelector("#" + TagName);
            varRect.setAttribute("visibility","visible");
            varRect.setAttribute("class", ""); //必须动态清除原有class 否则展现不出来效果。
            varRect.setAttribute("stroke","#ebeff5");
            varRect.setAttribute("stroke-width","0.75");
            var colorSet = varRect.getAttribute("fill");
            if (colorSet == colorInfo) {
                varRect.setAttribute("fill", "#ffffff");
            }
            else {
                varRect.setAttribute("fill", colorInfo);
            }
        }
    }

    ]]></script>
    <v:documentProperties v:langID="2052" v:metric="true" v:viewMarkup="false">
        <v:userDefs>
            <v:ud v:nameU="msvSubprocessMaster" v:prompt="" v:val="VT4(Rectangle)"/>
            <v:ud v:nameU="msvNoAutoConnect" v:val="VT0(1):26"/>
        </v:userDefs>
    </v:documentProperties>

    <style type="text/css">
        .st1 {fill:url(#grad0-4);stroke:#4f87bb;stroke-width:0.75}
    .st2 {fill:#4f87bb;font-family:黑体;font-size:1.00001em}
    .st3 {font-family:Calibri;font-size:1em}
    .st4 {fill:#4f87bb;font-family:黑体;font-size:0.833336em}
    .st5 {marker-end:url(#mrkr4-22);stroke:#5b9bd5;stroke-linecap:round;stroke-linejoin:round;stroke-width:1}
    .st6 {fill:#5b9bd5;fill-opacity:1;stroke:#5b9bd5;stroke-opacity:1;stroke-width:0.28409090909091}
    .st7 {fill:#ffffff;stroke:#ebeff5;stroke-width:0.75}
    .st8 {fill:#759fcc;font-family:Calibri;font-size:0.833336em}
    .st9 {fill:none;fill-rule:evenodd;font-size:12px;overflow:visible;stroke-linecap:square;stroke-miterlimit:3}

    </style>

    <defs id="Patterns_And_Gradients">
        <linearGradient id="grad0-4" x1="0" y1="0" x2="1" y2="0" gradientTransform="rotate(60 0.5 0.5)">
            <stop offset="0" stop-color="#e9eff7" stop-opacity="1"/>
            <stop offset="0.24" stop-color="#f4f7fb" stop-opacity="1"/>
            <stop offset="0.54" stop-color="#feffff" stop-opacity="1"/>
        </linearGradient>
    </defs>
    <defs id="Markers">
        <g id="lend4">
            <path d="M 2 1 L 0 0 L 2 -1 L 2 1 " style="stroke:none"/>
        </g>
        <marker id="mrkr4-22" class="st6" v:arrowType="4" v:arrowSize="2" v:setback="7.04" refX="-7.04" orient="auto"
                markerUnits="strokeWidth" overflow="visible">
            <use xlink:href="#lend4" transform="scale(-3.52,-3.52) "/>
        </marker>
    </defs>
    <g v:mID="0" v:index="1" v:groupContext="foregroundPage">
        <v:userDefs>
            <v:ud v:nameU="msvThemeOrder" v:val="VT0(0):26"/>
        </v:userDefs>
        <title>页-1</title>
        <v:pageProperties v:drawingScale="0.0393701" v:pageScale="0.0393701" v:drawingUnits="24" v:shadowOffsetX="8.50394"
                v:shadowOffsetY="-8.50394"/>
        <v:layer v:name="连接线" v:index="0"/>
        <g id="shape2-1" v:mID="2" v:groupContext="shape" transform="translate(37.1568,-425.197)">
            <title>工作表.2</title>
            <desc>系统1</desc>
            <v:textBlock v:margins="rect(4,4,4,4)" v:tabSpace="42.5197"/>
            <v:textRect cx="35.4331" cy="531.496" width="70.87" height="127.559"/>
            <rect x="0" y="467.717" width="70.8661" height="127.559" class="st1"/>
            <text x="20.39" y="535.49" class="st2" v:langID="2052"><v:paragraph v:horizAlign="1"/><v:tabList/>系统<tspan class="st3">1</tspan></text>        </g>
        <g id="shape6-7" v:mID="6" v:groupContext="shape" transform="translate(184.252,-439.37)">
            <title>平行四边形</title>
            <desc>中继1</desc>
            <v:userDefs>
                <v:ud v:nameU="visVersion" v:prompt="" v:val="VT0(15):26"/>
            </v:userDefs>
            <v:textBlock v:margins="rect(4,4,4,4)" v:tabSpace="42.5197"/>
            <v:textRect cx="56.6929" cy="552.756" width="113.39" height="85.0394"/>
            <path d="M0 595.28 L102.05 595.28 L113.39 510.24 L11.34 510.24 L0 595.28 Z" class="st1"/>
            <text x="44.16" y="556.08" class="st4" v:langID="2052"><v:paragraph v:horizAlign="1"/><v:tabList/>中继<tspan class="st3">1</tspan></text>        </g>
        <g id="shape7-12" v:mID="7" v:groupContext="shape" transform="translate(376.165,-446.457)">
            <title>平行四边形.7</title>
            <desc>中继2</desc>
            <v:userDefs>
                <v:ud v:nameU="visVersion" v:prompt="" v:val="VT0(15):26"/>
            </v:userDefs>
            <v:textBlock v:margins="rect(4,4,4,4)" v:tabSpace="42.5197"/>
            <v:textRect cx="56.6929" cy="552.756" width="113.39" height="85.0394"/>
            <path d="M0 595.28 L102.05 595.28 L113.39 510.24 L11.34 510.24 L0 595.28 Z" class="st1"/>
            <text x="44.16" y="556.08" class="st4" v:langID="2052"><v:paragraph v:horizAlign="1"/><v:tabList/>中继<tspan class="st3">2</tspan></text>        </g>
        <g id="shape8-17" v:mID="8" v:groupContext="shape" v:layerMember="0" transform="translate(108.023,-490.317)">
            <title>动态连接线</title>
            <path d="M0 595.28 L43.73 595.28 L43.73 610.79 L73.91 610.79" class="st5"/>
        </g>
        <g id="shape9-23" v:mID="9" v:groupContext="shape" v:layerMember="0" transform="translate(291.969,-478.346)">
            <title>动态连接线.9</title>
            <path d="M0 591.73 L16.3 591.73 L16.3 584.65 L82.83 584.65" class="st5"/>
        </g>
        <g id="shape14-28" v:mID="14" v:groupContext="shape" transform="translate(568.078,-432.283)">
            <title>正方形</title>
            <desc>系统2</desc>
            <v:userDefs>
                <v:ud v:nameU="visVersion" v:val="VT0(15):26"/>
            </v:userDefs>
            <v:textBlock v:margins="rect(4,4,4,4)" v:tabSpace="42.5197"/>
            <v:textRect cx="56.6929" cy="538.583" width="113.39" height="113.386"/>
            <rect x="0" y="481.89" width="113.386" height="113.386" class="st1"/>
            <text x="44.16" y="541.91" class="st4" v:langID="2052"><v:paragraph v:horizAlign="1"/><v:tabList/>系统<tspan class="st3">2</tspan></text>        </g>
        <g id="shape15-33" v:mID="15" v:groupContext="shape" v:layerMember="0" transform="translate(483.882,-481.89)">
            <title>动态连接线.15</title>
            <path d="M0 588.19 L77.16 588.19" class="st5"/>
        </g>
        <g id="shape16-38" v:mID="16" v:groupContext="shape" transform="translate(42.7112,-460.098)">
            <title>矩形</title>
            <desc>A1</desc>
            <v:userDefs>
                <v:ud v:nameU="visVersion" v:val="VT0(15):26"/>
            </v:userDefs>
            <v:textBlock v:margins="rect(4,4,4,4)" v:tabSpace="42.5197"/>
            <v:textRect cx="29.8787" cy="587.657" width="59.76" height="15.2362"/>
            <rect id="A1" x="0" y="580.039" width="59.7574" height="15.2362" class="st7" visibility="hidden"/>
            <text x="24.45" y="590.66" class="st8" v:langID="2052"><v:paragraph v:horizAlign="1"/><v:tabList/>A1</text>        </g>
        <g id="shape17-41" v:mID="17" v:groupContext="shape" transform="translate(42.7112,-445.925)">
            <title>矩形.17</title>
            <desc>A2</desc>
            <v:userDefs>
                <v:ud v:nameU="visVersion" v:val="VT0(15):26"/>
            </v:userDefs>
            <v:textBlock v:margins="rect(4,4,4,4)" v:tabSpace="42.5197"/>
            <v:textRect cx="29.8787" cy="587.657" width="59.76" height="15.2362"/>
            <rect id="A2" x="0" y="580.039" width="59.7574" height="15.2362" class="st7" visibility="hidden"/>
            <text x="24.45" y="590.66" class="st8" v:langID="2052"><v:paragraph v:horizAlign="1"/><v:tabList/>A2</text>        </g>
        <g id="shape18-44" v:mID="18" v:groupContext="shape" transform="translate(42.5197,-431.752)">
            <title>矩形.18</title>
            <desc>A3</desc>
            <v:userDefs>
                <v:ud v:nameU="visVersion" v:val="VT0(15):26"/>
            </v:userDefs>
            <v:textBlock v:margins="rect(4,4,4,4)" v:tabSpace="42.5197"/>
            <v:textRect cx="29.8787" cy="587.657" width="59.76" height="15.2362"/>
            <rect id="A3" x="0" y="580.039" width="59.7574" height="15.2362" class="st7" visibility="hidden"/>
            <text x="24.45" y="590.66" class="st8" v:langID="2052"><v:paragraph v:horizAlign="1"/><v:tabList/>A3</text>        </g>
        <g id="shape19-47" v:mID="19" v:groupContext="shape" transform="translate(211.066,-445.925)">
            <title>矩形.19</title>
            <desc>A4</desc>
            <v:userDefs>
                <v:ud v:nameU="visVersion" v:val="VT0(15):26"/>
            </v:userDefs>
            <v:textBlock v:margins="rect(4,4,4,4)" v:tabSpace="42.5197"/>
            <v:textRect cx="29.8787" cy="587.657" width="59.76" height="15.2362"/>
            <rect id="A4" x="0" y="580.039" width="59.7574" height="15.2362" class="st7" visibility="hidden"/>
            <text x="24.45" y="590.66" class="st8" v:langID="2052"><v:paragraph v:horizAlign="1"/><v:tabList/>A4</text>        </g>
        <g id="shape20-50" v:mID="20" v:groupContext="shape" transform="translate(395.318,-452.48)">
            <title>矩形.20</title>
            <desc>A5</desc>
            <v:userDefs>
                <v:ud v:nameU="visVersion" v:val="VT0(15):26"/>
            </v:userDefs>
            <v:textBlock v:margins="rect(4,4,4,4)" v:tabSpace="42.5197"/>
            <v:textRect cx="29.8787" cy="587.657" width="59.76" height="15.2362"/>
            <rect id="A5" x="0" y="580.039" width="59.7574" height="15.2362" class="st7" visibility="hidden"/>
            <text x="24.45" y="590.66" class="st8" v:langID="2052"><v:paragraph v:horizAlign="1"/><v:tabList/>A5</text>        </g>
        <g id="shape21-53" v:mID="21" v:groupContext="shape" transform="translate(594.893,-466.654)">
            <title>矩形.21</title>
            <desc>A6</desc>
            <v:userDefs>
                <v:ud v:nameU="visVersion" v:val="VT0(15):26"/>
            </v:userDefs>
            <v:textBlock v:margins="rect(4,4,4,4)" v:tabSpace="42.5197"/>
            <v:textRect cx="29.8787" cy="587.657" width="59.76" height="15.2362"/>
            <rect id="A6" x="0" y="580.039" width="59.7574" height="15.2362" class="st7" visibility="hidden"/>
            <text x="24.45" y="590.66" class="st8" v:langID="2052"><v:paragraph v:horizAlign="1"/><v:tabList/>A6</text>        </g>
        <g id="shape22-56" v:mID="22" v:groupContext="shape" transform="translate(594.893,-452.48)">
            <title>矩形.22</title>
            <desc>A7</desc>
            <v:userDefs>
                <v:ud v:nameU="visVersion" v:val="VT0(15):26"/>
            </v:userDefs>
            <v:textBlock v:margins="rect(4,4,4,4)" v:tabSpace="42.5197"/>
            <v:textRect cx="29.8787" cy="587.657" width="59.76" height="15.2362"/>
            <rect id="A7" x="0" y="580.039" width="59.7574" height="15.2362" class="st7" visibility="hidden"/>
            <text x="24.45" y="590.66" class="st8" v:langID="2052"><v:paragraph v:horizAlign="1"/><v:tabList/>A7</text>        </g>
        <g id="shape23-59" v:mID="23" v:groupContext="shape" transform="translate(594.893,-438.307)">
            <title>矩形.23</title>
            <desc>A8</desc>
            <v:userDefs>
                <v:ud v:nameU="visVersion" v:val="VT0(15):26"/>
            </v:userDefs>
            <v:textBlock v:margins="rect(4,4,4,4)" v:tabSpace="42.5197"/>
            <v:textRect cx="29.8787" cy="587.657" width="59.76" height="15.2362"/>
            <rect  id="A8" x="0" y="580.039" width="59.7574" height="15.2362" class="st7" visibility="hidden"/>
            <text x="24.45" y="590.66" class="st8" v:langID="2052"><v:paragraph v:horizAlign="1"/><v:tabList/>A8</text>        </g>
    </g>
</svg>

</body>
</html>

最后实现效果

Chrome的效果好，过度平滑。

原码下载：http://files.cnblogs.com/files/XPChen/svgLightSample2.zip
下载解压后，立刻看到效果:

时间： 2024-10-25 15:02:54

原创 HTML5：JS操作SVG实践体会的相关文章

svg DOM的一些js操作

这是第一个实例,其中讲了如何新建svg,添加元素,保存svg document,查看svg. 下面将附上常用一些元素的添加方法:(为js的,但基本上跟java中操作一样,就是类名有点细微差别) Circle var svgns = "http://www.w3.org/2000/svg"; function makeShape(evt) { if ( window.svgDocument == null ) svgDocument = evt.target.ownerDocument;

HTML5中的SVG

* SVG * 基本内容 * SVG并不属于HTML5专有内容 * HTML5提供有关SVG原生的内容 * 在HTML5出现之前,就有SVG内容 * SVG,简单来说就是矢量图 * SVG文件的扩展名为".svg" * SVG使用的是XML语法 * 概念 * SVG是一种使用XML技术描述二维图形的语言 * SVG的特点 * SVG绘制图形可以被搜索引擎抓取 * SVG在图片质量不下降的情况下,被放大 * SVG与Canvas的区别 * SVG * 不依赖分辨率 * 支持事件绑定 *

JS编程最佳实践

最近花了一周时间把<编写可维护的js> 阅读了一遍, 现将全书提到的JS编程最佳实践总结如下, 已追来者! 1.return 之后不可直接换行, 否则会导致ASI(自动分号插入机制)会在return 后插入一个分号. 2.一行语句最多不超过80个字符, 如果超过则应该在运算符后换行,并且追加两个缩进. 3.采用驼峰式命名,变量前缀为名词如:myName 函数应该以动词开始如:getName,常量应该以大写字母命名,如:MAX_COUNT, 构造函数首字母大写. 4.数字的写法: 整数:coun

深入 HTML5 Web Worker 应用实践：多线程编程

深入 HTML5 Web Worker 应用实践:多线程编程 HTML5 中工作线程(Web Worker)简介至 2008 年 W3C 制定出第一个 HTML5 草案开始,HTML5 承载了越来越多崭新的特性和功能.它不但强化了 Web 系统或网页的表现性能,而且还增加了对本地数据库等 Web 应用功能的支持.其中,最重要的一个便是对多线程的支持.在 HTML5 中提出了工作线程(Web Worker)的概念,并且规范出 Web Worker 的三大主要特征:能够长时间运行(响应),理想的启

Atitit.angular.js 使用最佳实践原理与常见问题解决与列表显示案例 attilax总结

Atitit.angular.js 使用最佳实践原理与常见问题解决与列表显示案例 attilax总结 1. 本文范围 1 2. Angular的优点 1 2.1. 双向数据绑定 1 2.2. dsl化 2 2.3. 依赖注入 2 2.4. 指令 2 3. 手动绑定数据spa方式以及与ajax 与dwr的集成 2 4. 格式化数据 2 4.1. 多字段组合格式化 3 4.2. 输出html 4 5. 输出作为函数参数调用 4 6. 加载完成事件 5 7. 常见错误 5 7.1. Atitit.a

html5 中的SVG 和canvas

想到昨天看资料的时候,发现html5 中的SVG 和canvas 都可以表示图形,那它们到底有哪些区别呢?该如何正确的使用它们呢? 1.SVG:可缩放矢量图形,(Scalable Vector Graphics),SVG使用XML格式定义图像. canvas:<canvas> 标签定义图形,比如图表和其他图像;<canvas> 标签只是图形容器,您必须使用脚本来绘制图形. 2.<canvas> 标记和 SVG 的另外一个重要的不同点是:(VML我还没有了解过,后续会进行

JS操作select标签

主要利用这个来实现省市区三级联动的我利用的是ajax,每一次onchange事件都改变相对应的select中的option,数据全是ajax请求服务器查询数据库而来的,效果还可以,在本地测试的时候速度还是可以的,用户基本体会不到带来的轻微卡顿,还有种方式是把数据直接写在本地的js中作为数组存放起来,但是我的数据已经在数据库中,所以这种方式被我否定了,但是我认为这种方式运行速度应该比我的快. 下面是JS操作select的几种用法,常用的我就记录一下. 1.动态创建select function

HTML5+JS 《五子飞》游戏实现（五）移动棋子

上一章我们知道了怎么处理两个重要的吃棋动作,想要吃对方的棋子,首先得移动自己的棋子.现在里沃特跟大家分享分享,怎么移动棋子. 想要移动棋子,在页面上,首先要点击一下要移动的棋子,然后再点击一下目标位置,如果可以移动,则把棋子移动的目标位置,原来的位置就要清空. 上面这句话,我们要分两步来处理:1.判断目标是否可移动:2.可以移动则移动棋子. 1.判断目标是否可移动. 首先移动时只能按直线,其次目标位置与原始位置之间不能有其他棋子: // 是否可移动 this.canMove = functio

HTML5+JS 《五子飞》游戏实现（六）鼠标响应与多重选择

上一章我们提到了如果有多条线上的棋子可以被吃掉,那么游戏需要提示用户,让用户选择吃哪条线上的.另外因为是网页游戏,所以一定要实现鼠标单击棋子可以进行操作. 当鼠标移动棋子上面后,切换鼠标指针为手形,移开棋子后再切换回默认的状态: el.mousemove(function (e) { var o = el.offset(); var p = { x: e.clientX - o.left, y: e.clientY - o.top }; el.css("cursor", "d