如何用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>

效果图如下:

源码在这里哦:

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

时间: 2024-07-30 10:06:00

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

今天来做一个PHP电影小爬虫。

今天来做一个PHP电影小爬虫.我们来利用simple_html_dom的采集数据实例,这是一个PHP的库,上手很容易.simple_html_dom 可以很好的帮助我们利用php解析html文档.通过这个php封装类可以很方便的解析html文档,对其中的html元素进行操作 (PHP5+以上版本)下载地址:https://github.com/samacs/simple_html_dom下面我们以 http://www.paopaotv.com 上的列表页 http://paopaotv.com

如何用面对对象来做一个躁动的小球?

今天来看看怎样用面对对象来做一个躁动的小球. 首先我们先创建一个对象,他的属性包含小球的随机水平.纵向坐标,随机宽.高,随机颜色,以及创建小球的方法. html: <div id="wrap"></div> js: function Boll(x,y,w,h,color){ // 随机宽高 var wh = randFn(5, 40); // 随机颜色 var c = 'rgb('+randFn(0, 255)+',' + randFn(0,255)+','+r

使用node.js做一个自用的天气插件

var request = require('request') var url = 'http://www.baidu.com/home/xman/data/superload' var cookie = '你登录百度后的cookie' var options = { method: "GET", url: url, qs: { "type": "weather", "asyn": 1, "t": new

做一个自己的小Linux

实战操作自制一个小Linux 概述:通过前面的系统启动流程,我们大致知道了Linux系统启动时都需要哪些文件和步骤,知道了这些理论内容,现在我们可以自己动手制作一个自己的小Linux. 实践步骤: 1.在已有的Linux添加新的硬盘 2.对此新的硬盘进行分区,两个分区分别为/boot和/分区( 为自制的Linux下所准备的) 3.将刚刚的分区格式化并挂载至两个目录上(我这里为/mnt/boot和/mnt/sysroot) 4.在此新硬盘上安装grub并且编写grub配置文件 5.将vmlinuz

利用JS跨域做一个简单的页面访问统计系统

其实在大部分互联网web产品中,我们通常会用百度统计或者谷歌统计分析系统,通过在程序中引入特定的JS脚本,然后便可以在这些统计系统中看到自己网站页面具体的访问情况.但是有些时候,由于一些特殊情况,我们需要自己来设计统计系统.由于前段时间公司的业务需求,我也是自己尝试了下,本文提供的是一个基本思路,统计系统也比较简单. 几个基本统计需求: 1.统计web每个页面用户访问量 2.统计用户访问者的和IP地址信息 3.页面之间的跳转情况 4.访问高峰时间段 服务器结构: 数据库表设计: 以上只是我简单列

利用JS跨域做一个简单的页面訪问统计系统

事实上在大部分互联网web产品中,我们一般会用百度统计或者谷歌统计分析系统,通过在程序中引入特定的JS脚本,然后便能够在这些统计系统中看到自己站点页面详细的訪问情况.可是有些时候,因为一些特殊情况,我们须要自己来设计统计系统.因为前段时间公司的业务需求,我也是自己尝试了下,本文提供的是一个基本思路,统计系统也比較简单. 几个基本统计需求: 1.统计web每一个页面用户訪问量 2.统计用户訪问者的和IP地址信息 3.页面之间的跳转情况 4.訪问高峰时间段 server结构: 数据库表设计: 以上仅

做一个开源的小程序登录模块组件(token)

先了解下SSO 对于单点登陆浅显一点的说就是两种,一种web端的基于Cookie.另一种是跨端的基于Token,一般想要做的都优先做Token吧,个人建议,因为后期扩展也方便哦. 小程序也是呢,做成token的形式是较好的. 流程图 PS:图中4的文字打错了~ 1.启动服务 2.小程序初次加载app.js校验token,使用code去换取token 3.检测User信息是否存在code,不存在则注册新用户,最后返回对应用户Id 4.将随机Token与UserId一起存入Redis中 5.返回To

canvas学习作业,模仿做一个祖玛的小游戏

这个游戏的原理我分为11个步骤,依次如下: 1.布局, 2.画曲线(曲线由两个半径不同的圆构成) 3.画曲线起点起始圆和曲线终点终止圆 4.起始的圆动起来, 5.起始的圆沿曲线走起来 6.起始的圆沿曲线走起来,并在曲线初始位置处产生新圆 7.添加图片,这个图片是为了发射子弹 8.让图片跟随鼠标动起来 9.让动起来的图片跟随鼠标的位置发送子弹,并让子弹的颜色变红 10.图片发射的子弹和轨迹上的小圆碰撞检测 11.碰撞检测后让发射的子弹和轨迹上的小圆消失 这就是该程序步骤的的分解. 第一点:布局 <

html5面向对象做一个贪吃蛇小游戏

canvas加面向对象方式的贪吃蛇 2016-08-25 这个小游戏可以增加对面向对象的理解,可以加强js逻辑能力,总之认真自己敲一两遍收获还是不少啊!!适合刚学canvas的同学练习!! 废话不多说,直接来讲思路和代码. ----------------------------------------------------------------------------------------------------------------- 开发思路:首先要有蛇吃的食物,就是一个个canv