`
gg19861207
  • 浏览: 181745 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jquery实现股票涨跌效果

阅读更多

jquerystock.js:

//进入页面以后就显示股票当前的价格信息
var obj;
var sid;
$(document).ready(function(){
var stockNode = $("#stock").css("border","1px solid green").css("background","blue")
.css("color","red").css("width","150px").css("position","absolute"); //只有将Position属性定义为absolute才可以在想要的位置出现对话框
stockNode.hide();
getStockInfo();
//每隔一秒与服务器交互一次,页面自动刷新当前的股票价格信息
setInterval(getStockInfo,1000);
var as = $("a");
//定义鼠标划入的事件
as.mouseover(function(){

var aNode = $(this);
var divNode = aNode.parent();
sid = divNode.attr("id");
//updatediv();
//控制弹出框的位置
//1.查处链接的位置
var offset = aNode.offset();
//2.设置弹出框的位置
stockNode.css("left",offset.left + "px").css("top",offset.top + aNode.height() + "px");

stockNode.show();

});
//定义鼠标划出的事件
as.mouseout(function(){
stockNode.hide();
});

});

function getStockInfo(){
//1.向服务器发送请求,得到数据
$.get("GetStackInfo",null,function(data){
//2.解析从服务器返回的数据
obj = eval(data);
//3.根据主键得到对象
var szzs = obj["300001"];
var pfyh = obj["000001"];
var span3 = $("#300001").children("span");
span3.html(szzs.now);
if(szzs.now > szzs.yes){
span3.css("color","red");
}else{
span3.css("color","green");
}
var span1 = $("#000001").children("span");
span1.html(pfyh.now);
if(pfyh.now > pfyh.yes){
span1.css("color","red");
}else{
span1.css("color","green");
}
//每隔一秒获得新的obj对象,就改变"stock" div 的有关属性
updatediv();

});


}

//更新显示框中的内容
function updatediv(){
var stockObj = obj[sid];
for(var prop in stockObj){
if(prop != "name"){
$("#"+ prop).children("span").html(stockObj[prop]);
}
}
}

Stock.java

/**
* Created by IntelliJ IDEA.
* User: lucky
* Date: 2009-8-16
* Time: 18:03:42
* To change this template use File | Settings | File Templates.
*/
public class Stock {


public Stock(double yestaday, double today, String id, String name) {
this.yestaday = yestaday;
this.today = today;
this.id = id;
this.name = name;
this.now = today;
}
/**
* 昨天的收盘价
*/
private double yestaday;

/**
* 今天的开盘价
*/
private double today;

/**
* 现在的价格
*/
private double now;

/**
* 股票代码
*/
private String id;
/**
* 股票名称
*/
private String name;

public double getToday() {
return today;
}

public double getNow() {
return now;
}

public String getName() {
return name;
}public void setYestaday(double yestaday) {
this.yestaday = yestaday;
}

public void setToday(double today) {
this.today = today;
}

public void setNow(double now) {
this.now = now;
}

public void setId(String id) {
this.id = id;
}

public String getId() {
return id;
}

public void setName(String name) {
this.name = name;
}


public double getYestaday() {
return yestaday;
}
public String toString(){
return this.name + ":" + this.now;
}
}

JQueryStock.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquerystock.js"></script>
<title></title>
</head>
<body>
<div id="300001"><a href="#">上证指数</a><span></span></div>
<div id="000001"><a href="#">浦发银行</a><span></span></div>
<div id="stock">
<div id="yes"><span></span></div>
<div id="tod"><span></span></div>
<div id="now"><span></span></div>

</div>
</body>
</html>

分享到:
评论

相关推荐

    使用jQuery实现的效果

    在本文中,我们将深入探讨如何使用jQuery来实现各种前端效果,包括动画、事件处理、DOM操作等。jQuery是一个流行的JavaScript库,它简化了JavaScript的许多复杂性,使得开发者能够更轻松地实现动态网页效果。 首先...

    基于jQuery实现滚动刷新效果

    Jquery实现简单的滚动刷新效果: 实际情况使用Ajax获取后台数据更新前端页面即可实现页面滚动刷新效果 HTML正文: &lt;form id="form1" runat="server"&gt; &lt;/form&gt; Javascript操作代码: $(document)....

    jquery实现动态背景效果

    要使用jQuery实现动态背景效果,你需要遵循以下步骤: 1. **引入jQuery库**:确保在HTML文件中包含jQuery库的链接。通常,你可以从CDN(内容分发网络)获取,例如: ```html &lt;script src="https://code.jquery....

    Demo 用jQuery实现最简单的滚屏效果2(加了上下按钮

    Demo 用jQuery实现最简单的滚屏效果2(加了上下按钮 ...Demo 用jQuery实现最简单的滚屏效果2(加了上下按钮Demo 用jQuery实现最简单的滚屏效果2(加了上下按钮Demo 用jQuery实现最简单的滚屏效果2(加了上下按钮

    jquery实现table拖拽列效果

    用jquery实现table拖拽列功能,可动态改变表格列宽度,并且实现table表格100%的问题,如果列缩小,则自动拉伸最后一列以实现table100%的效果,如果拉伸长度比原长度大,则显示x滚动条。

    jquery实现网页换肤效果

    记得以前腾讯网页上有个根据用户心情自定义换皮肤颜色,感觉这个用户体验蛮好的,给出几套样式,...话说现在腾讯不知道咋的,去掉这个功能了,没事现在jquery博客给大家用jquery来实现这个效果.转自http://www.jqueryba.com/

    jquery实现动态背景效果.rar

    本资源“jquery实现动态背景效果.rar”显然聚焦于利用jQuery来创建吸引人的动态背景特效,这对于提升网页用户体验至关重要。下面将详细探讨jQuery如何实现动态背景效果以及与C#的关联。 首先,jQuery提供了丰富的...

    JQuery实现的各种小效果

    在本文中,我们将深入探讨如何使用JQuery这一强大的JavaScript库来实现各种网页效果和实用插件。JQuery简化了DOM操作,使得实现复杂的交互和动画变得更加便捷。以下是一些使用JQuery实现的关键知识点: 1. **导航...

    jQuery实现彩虹文字效果 jQuery实现彩虹文字效果网页特效.zip

    "jQuery实现彩虹文字效果"是一个这样的特效,它利用JavaScript库jQuery以及CSS样式来创建一种视觉上吸引人的文字颜色变换效果,就像彩虹一样五彩斑斓。这个效果通常用于网站标题、标语或者任何希望突出显示的文字...

    前端+jQuery+实现烟花特效

    前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+...

    jQuery实现网页3D效果

    **jQuery实现网页3D效果详解** 在Web开发中,为了提升用户体验,许多开发者追求更为生动、立体的视觉呈现,这就是3D效果的由来。jQuery,作为一款强大的JavaScript库,虽然其本身并不直接支持3D功能,但通过扩展...

    利用Ajax+Jquery实现异步进度条效果

    "利用Ajax+Jquery实现异步进度条效果"这个主题正是围绕这一目标展开,它涉及到C#后端开发、.NET框架、Ajax技术以及Jquery库的前端应用。下面将详细阐述这些知识点。 首先,C#是一种面向对象的编程语言,广泛应用于...

    jQuery实现菜单叠加效果代码

    jQuery实现菜单叠加效果代码 包含html css javascript源代码

    jquery实现单行滚动效果

    jquery实现单行滚动效果

    jQuery实现星星评价效果demo

    "jQuery实现星星评价效果demo"是一个关于如何使用jQuery库来创建一个直观且动态的星级评分系统的实例。这个项目适用于那些希望在网站上添加评论评分功能或者产品评级功能的开发者。 首先,jQuery是一个轻量级的...

    jQuery相册图片滤镜效果.zip

    《jQuery相册图片滤镜效果实现详解》 在网页设计中,动态的图片展示和交互体验是提升用户体验的重要手段。jQuery相册图片滤镜效果,就是一种能够为网站增添视觉吸引力和互动性的技术,尤其适用于企业网站和电商商城...

    jQuery实现图片震动效果jquery博客右侧广告效果

    jQuery实现图片震动效果

    jQuery实现彩虹文字效果.zip

    本项目"jQuery实现彩虹文字效果"正是利用jQuery来为网页中的特定文字添加炫酷的彩虹效果,提升了用户体验。 首先,我们要理解jQuery库的核心概念。jQuery通过提供简洁的API,使得开发者能够快速地选中DOM元素、改变...

    jQuery图片左右滚动效果代码.zip

    在本文中,我们将深入探讨如何实现一个基于jQuery的图片左右滚动效果,这通常用于网站的轮播图或幻灯片展示。这个效果包含了左右箭头,可以手动切换,同时具备自动轮播的功能,大大增强了用户体验。 首先,我们需要...

    jQuery实现切换页面过渡动画效果

    是一款效果非常酷的jQuery和CSS3通过AJAX调用切换页面过渡动画特效插件。该页面切换特效使用AJAX来动态加载链接内容,在页面加载的时候,使用CSS3来制作非常酷的页面过渡动画效果。插件中使用pushState方法来管理...

Global site tag (gtag.js) - Google Analytics