首先，使用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

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

  1. 跟我一起做一个vue的小项目（二）

    这个vue项目是紧跟着之前的项目跟我一起做一个vue的小项目(一)来的. 我继续后面的开发(写的比较粗糙,边学边记录) 下图是header头部的样式 header组件内容如下 //header.vue ...

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

    今天来做一个PHP电影小爬虫.我们来利用simple_html_dom的采集数据实例,这是一个PHP的库,上手很容易.simple_html_dom 可以很好的帮助我们利用php解析html文档.通过 ...

  3. 4-13 Webpacker-React.js; 用React做一个下拉表格的功能: <详解>

    Rails5.1增加了Webpacker: Webpacker essentially is the decisions made by the Rails team and bundled up i ...

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

    var request = require('request') var url = 'http://www.baidu.com/home/xman/data/superload' var cooki ...

  5. 用Nodejs做一个简单的小爬虫

    Nodejs将JavaScript语言带到了服务器端,作为js主力用户的前端们,因此获得了服务器端的开发能力,但除了用express搭建一个博客外,还有什么好玩的项目可以做呢?不如就做一个网络爬虫吧. ...

  6. 实战：一、使用mongo做一个注册的小demo

    思路:1.使用mongoose 进行 数据库的链接 2.使用Schema来进行传输字段的定义 3.安装koa-router进行数据处理4.安装koa-bodyparser 进行post数据交互5.解决 ...

  7. 跟我一起做一个vue的小项目（八）

    接下来我们进行的是城市选择页面的路由配置 添加city.vue,使其点击城市,然后跳转到city页面 //router.js import Vue from 'vue' import Router f ...

  8. 跟我一起做一个vue的小项目（七）

    先看下我们所做项目的效果 这些数据都是我们在data中定义的,不是从后端数据中请求的.那么 接下来我们使用axios渲染数据 npm install axios --save 每个组件里面的数据都不相 ...

  9. 【酷Q插件制作】教大家做一个简单的签到插件

    酷Q插件已经有很多了,社区分享一大堆,不过还是自己写才有乐趣,哈哈.不得不吐槽一下,酷Q竟然不更新了,出了个酷Q pro,还收费!!诶.不过这也影响不了咱写插件的心情,今天教大家写一个酷Q签到插件,虽 ...

随机推荐

  1. leetcode 76 dp& 强连通分量&并查集经典操作

    800. Similar RGB Color class Solution { int getn(int k){ return (k+8)/17; } string strd(int k){ char ...

  2. NKOJ3485 【2015多校联训4】数据

    问题描述 Mr_H 出了一道信息学竞赛题,就是给 n 个数排序.输入格式是这样的:试题有若干组数据.每组数据的第一个是一个整数 n,表示总共有 n 个数待排序:接下来 n 个整数,分别表示这n 个待排 ...

  3. php pdo操作数据库的方法

    PDO 安装 你可以通过 PHP 的 phpinfo() 函数来查看是否安装了PDO扩展. 1.在 Unix /linux系统上安装 PDO 在Unix上或Linux上你需要添加以下扩展: exten ...

  4. 【笔记】LR配置ODBC连接数据库进行参数化(mysql )未完待续

    很多时候我们需要大量的参数数据,但是光光靠手填写是非常麻烦的,既然被测对象的数据都在数据库,那么我们直接读取数据库回来就轻松简便很多. data  wizard 提供了一个从ODBC的连接获得数据转化 ...

  5. python-None

    今天偶然间,有人问了一个问题,项目中出现了一个这样的错误. 看到后,就想到是前后数据类型不一致.当时他定义了一些默认初始值为None(刚接触python代码,之前是c,java),然后就后边出现了这样 ...

  6. oralce默认语言

    默认语言设置可以确定数据库如何支持与区域设置相关的信息,例如: 日和月份的名称及其缩写 A.M..P.M..A.D. 和 B.C. 的等价表示方法的符号 指定 ORDER BY SQL 子句时字符数据 ...

  7. PHP学习（函数）

    可变函数,即通过变量的值来调用函数,因为变量的值是可变的,所以可以通过改变一个变量的值来实现调用不同的函数. 经常会用在回调函数.函数列表,或者根据动态参数来调用不同的函数.可变函数的调用方法为变量名 ...

  8. linux 下安装编译配置 QT

    注: 1,自己 make qt-everywhere-opensource-src s时,在./configure前主动装好以下3个 sudo apt-get install libX11-dev l ...

  9. [转]GDB调试基础

    一.gdb常用命令: 命令 描述 backtrace(或bt) 查看各级函数调用及参数 finish 连续运行到当前函数返回为止,然后停下来等待命令 frame(或f) 帧编号 选择栈帧 info(或 ...

  10. bzoj4033 树上染色

    Description 有一棵点数为N的树,树边有边权.给你一个在0~N之内的正整数K,你要在这棵树中选择K个点,将其染成黑色,并 将其他的N-K个点染成白色.将所有点染色后,你会获得黑点两两之间的距 ...