如何用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
如何用JS和HTML 做一个桌面炒股小插件【原创】的更多相关文章
- 跟我一起做一个vue的小项目（二）
这个vue项目是紧跟着之前的项目跟我一起做一个vue的小项目(一)来的. 我继续后面的开发(写的比较粗糙,边学边记录) 下图是header头部的样式 header组件内容如下 //header.vue ...
- 今天来做一个PHP电影小爬虫。
今天来做一个PHP电影小爬虫.我们来利用simple_html_dom的采集数据实例,这是一个PHP的库,上手很容易.simple_html_dom 可以很好的帮助我们利用php解析html文档.通过 ...
- 4-13 Webpacker-React.js; 用React做一个下拉表格的功能: <详解>
Rails5.1增加了Webpacker: Webpacker essentially is the decisions made by the Rails team and bundled up i ...
- 使用node.js做一个自用的天气插件
var request = require('request') var url = 'http://www.baidu.com/home/xman/data/superload' var cooki ...
- 用Nodejs做一个简单的小爬虫
Nodejs将JavaScript语言带到了服务器端,作为js主力用户的前端们,因此获得了服务器端的开发能力,但除了用express搭建一个博客外,还有什么好玩的项目可以做呢?不如就做一个网络爬虫吧. ...
- 实战：一、使用mongo做一个注册的小demo
思路:1.使用mongoose 进行 数据库的链接 2.使用Schema来进行传输字段的定义 3.安装koa-router进行数据处理4.安装koa-bodyparser 进行post数据交互5.解决 ...
- 跟我一起做一个vue的小项目（八）
接下来我们进行的是城市选择页面的路由配置 添加city.vue,使其点击城市,然后跳转到city页面 //router.js import Vue from 'vue' import Router f ...
- 跟我一起做一个vue的小项目（七）
先看下我们所做项目的效果 这些数据都是我们在data中定义的,不是从后端数据中请求的.那么 接下来我们使用axios渲染数据 npm install axios --save 每个组件里面的数据都不相 ...
- 【酷Q插件制作】教大家做一个简单的签到插件
酷Q插件已经有很多了,社区分享一大堆,不过还是自己写才有乐趣,哈哈.不得不吐槽一下,酷Q竟然不更新了,出了个酷Q pro,还收费!!诶.不过这也影响不了咱写插件的心情,今天教大家写一个酷Q签到插件,虽 ...
随机推荐
- 2019-8-31-dotnet-Framework-源代码-类库的意思
title author date CreateTime categories dotnet Framework 源代码 类库的意思 lindexi 2019-08-31 16:55:58 +0800 ...
- 基于keras中IMDB的文本分类 demo
本次demo主题是使用keras对IMDB影评进行文本分类: import tensorflow as tf from tensorflow import keras import numpy a ...
- Python判断文件和文件夹是否存在的方法
Python判断文件和文件夹是否存在的方法 这篇文章主要介绍了Python判断文件和文件夹是否存在的方法,本文还讲解了判断是否为文件或者目录的方法.os.path.lexist的作用.FTP中判断文件 ...
- SAS信用评分之模型拟合以及验证的大坑
SAS信用评分之模型拟合以及验证的大坑 今天的内容是来讲我这段时间被模型拟合和模型验证坑过的那些事.我也是千辛万苦终于是把模型给建出来了.此处应该有掌声.因为模型老是效果不好这件事,我躲在被窝里哭了好 ...
- SQL知识总结（1）
什么是数据库: sql组成: DDL:数据定义语句,有CREATE/DROP等: DML:数据操作语句,有DELETE/UPDATE/INSERT/INSERT等; DQL:数据查询语句,有SELEC ...
- PHP开发api接口安全验证的实例，值得一看
php的api接口 在实际工作中,使用PHP写api接口是经常做的,PHP写好接口后,前台就可以通过链接获取接口提供的数据,而返回的数据一般分为两种情况,xml和json,在这个过程中,服务器并不知道 ...
- 盘点Apache毕业的11个顶级项目
自1999年成立至今,Apache 软件基金会已成功建立起自己强大的生态圈.其社区涌现了非常多优秀的开源项目,同时有越来越多国内外项目走向这个国际开源社区进行孵化.据悉,目前所有的 Apache 项目 ...
- Directx11教程(44) alpha blend(1)
原文:Directx11教程(44) alpha blend(1) 我们知道,D3D11中按Frame来渲染物体,每个Frame中又可能包含若干个primitive,如下面的示意图所示: ...
- 阿里小二的日常工作要被TA们“接管”了！
昨天有人偷偷告诉我说 阿里巴巴其实是一家科技公司! 我想了整整一夜 究竟是谁走漏了风声 那么重点来了,阿里到底是如何在内部的办公.生活中,玩转“黑科技”的呢? AI取名:给你专属的“武侠”花名 花名是 ...
- linux之架构图和八台服务器
(1) (2)