zoukankan      html  css  js  c++  java
  • 如何用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="100%">
                <thead>
                    <tr>
                        <td>名称</td>
                        <td>当前</td>
                        <td>昨收</td>
                        <td>幅度</td>
                        <td>盈亏</td>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </body>
    </html>

    效果图如下:

    源码在这里哦:

     http://pan.baidu.com/s/1c0lRcxq

  • 相关阅读:
    [翻译] AAPullToRefresh
    [翻译] DKTagCloudView
    【转】Data URL和图片,及Data URI的利弊
    【转】C#获取当前日期时间(转)
    【转】Android的setTag
    【转】Android之Adapter用法总结
    【转】jpg png区别和使用
    【转】Android UI开发第三十一篇——Android的Holo Theme
    【转】android中的Style与Theme
    【转】关于Eclipse创建Android项目时,会多出一个appcompat_v7的问题
  • 原文地址:https://www.cnblogs.com/xiaodoublog/p/4598505.html
Copyright © 2011-2022 走看看