如何用JS和HTML 做一个桌面炒股小插件【原创】

首先，使用node-webkit 做环境，废话不多说，直接贴HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="scripts/jQuery_1.8.2.min.js"></script>
    <script src="data.js"></script>
    <link href="css/clear.css" rel="stylesheet" />
    <link href="css/main.css" rel="stylesheet" />
    <script type="text/javascript">
        var gui = require("nw.gui");
        var win = gui.Window.get();
        win.setShowInTaskbar(false)
        win.y = 0;
        win.x = win.window.screen.availWidth - 300;
        var tray = new gui.Tray({
            title: "桌面股票",
            icon: "icon.png"
        });
        tray.tooltip = "点击打开";
        var menu = new gui.Menu();
        menu.append(new gui.MenuItem({
            label: '退出',
            click: function () {
                win.close();
            }
        }));
        tray.menu = menu;
        tray.click = function () {
            win.show();
        }
        function Refresh() {
            var zj = 0;
            for (var item in stockData) {
                (function (name, value) {
                    $.get("http://hq.sinajs.cn/list=sh" + name, function (data) {
                        eval(data);
                        var stockvalue = window["hq_str_sh" + name].split(',');
                        var ce = stockvalue[3] - stockvalue[2];
                        var yk = stockvalue[3] - value.value;
                        var tr = $("[data-id='" + name + "']");
                        tr.find("td:eq(0)").html(stockvalue[0]);
                        tr.find("td:eq(1)").html(stockvalue[3]);
                        tr.find("td:eq(2)").html(stockvalue[2]);
                        tr.find("td:eq(3)").html(ce.toFixed(2));
                        tr.find("td:eq(4)").html((yk * value.times).toFixed(2));
                        zj += +((yk * value.times).toFixed(2));
                        if (ce < 0) {
                            tr.find("td:eq(3)").css("color", "#0CC500");
                        }
                        else if (ce > 0) {
                            tr.find("td:eq(3)").css("color", "#C5001E");
                        }
                        else {
                            tr.find("td:eq(3)").css("color", "#000");
                        }

                        if (yk < 0) {
                            tr.find("td:eq(4)").css("color", "#0CC500");
                        }
                        else if (yk > 0) {
                            tr.find("td:eq(4)").css("color", "#C5001E");
                        }
                        else {
                            tr.find("td:eq(4)").css("color", "#000");
                        }

                        $("table tbody tr:last td:last").html(zj);
                        if (zj < 0) {
                            $("table tbody tr:last td:last").css("color", "#0CC500");
                        }
                        else if (zj > 0) {
                            $("table tbody tr:last td:last").css("color", "#C5001E");
                        }
                        else {
                            $("table tbody tr:last td:last").css("color", "#000");
                        }
                    });
                })(item, stockData[item]);

            }

           
            
        }

        function init() {
            var html = [];
            for (var item in stockData) {
                html.push("<tr data-id='" + item + "' data-value='" + stockData[item] + "'><td></td><td></td><td></td><td></td><td></td></tr>")
            }
            html.push("<tr data-id='zj'><td></td><td></td><td></td><td></td><td></td></tr>")
            $("tbody").append(html.join(''));
        }

        $(function () {
            setInterval (function () {
                Refresh();
            }, 2000);
            init();
            Refresh();
        });
    </script>
</head>
<body>
    <div id="container">
        <table style="width:100%">
            <thead>
                <tr>
                    <td>名称</td>
                    <td>当前</td>
                    <td>昨收</td>
                    <td>幅度</td>
                    <td>盈亏</td>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</body>
</html>