如何用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签到插件,虽 ...
随机推荐
- 关于在页面得到的servlet验证码总是上一次保存在session中的
在网上找到一份servlet产生验证码的代码,经过测试,发现在页面通过session.getAttribute()方法得到的验证码总是上一次保存在session中的,这样,它总比页面实际的验证码晚一拍 ...
- Leetcode77. Combinations组合
给定两个整数 n 和 k,返回 1 ... n 中所有可能的 k 个数的组合. 示例: 输入: n = 4, k = 2 输出: [ [2,4], [3,4], [2,3], [1,2], [1,3] ...
- Django 自定义auth_user
1 导入AbstractUser from django.contrib.auth.models import AbstractUser 1 2 创建类UserProfile并继承AbstractUs ...
- [Vue CLI 3] 配置解析之 indexPath
在 vue.config.js 配置中有一个 indexPath 的配置,我们先看看它有什么用? 用来指定 index.html 最终生成的路径(相对于 outputDir) 先看看它的默认值:在文件 ...
- Gradle中的buildScript，gradle wrapper，dependencies等一些基础知识
就想收藏一篇好文,哈哈,无他 Gradle中的buildScript代码块 - 黄博文 然后记录一些gradle的基础知识: 1.gradle wrapper就是对gradle的封装,可以理解为项目内 ...
- PLAY2.6-SCALA(十二) 表单的处理
一.表单处理流程如下 1.定义一个表单,在这里表单最多有22个字段 import play.api.data._ import play.api.data.Forms._ //要使用验证和约束 imp ...
- Directx11教程(9) 增加一个TimerClass类
原文:Directx11教程(9) 增加一个TimerClass类 在上篇教程代码的基础上,我们增加一个TimerClass类,这个类的功能很简单,就是可以计算相邻2帧的时间差.利用这个时间 ...
- Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第二十三章：角色动画
原文:Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第二十三章:角色动画 学习目标 熟悉蒙皮动画的术语: 学习网格层级变换 ...
- Leetcode830.Positions of Large Groups较大分组的位置
在一个由小写字母构成的字符串 S 中,包含由一些连续的相同字符所构成的分组. 例如,在字符串 S = "abbxxxxzyy" 中,就含有 "a", " ...
- char和achar互转
#pragma once#include "stdafx.h" #ifndef _Convert_H_#define _Convert_H_ //定义转换类class Conver ...