怎样实现层 相对曲线向后倒退? 就象是显示股票走势的图形一样,随着行情曲线的前移,层相对曲线向后倒退,或就是实现股票走势的效果,我已经实现画线,但不知道层怎样处理,请赐教,先谢谢了. 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 JS 能画曲线?LZ 把画线的代码贴出来看看先! 层移动是根据曲线走的么?曲线走是根据某个时间还是根据数据库中曲线的数据实时跑的?刷新么?还是用ajax? 俺去查了查,JS 画线就是逐点用 span 模拟,感觉很不好!LZ 的情况更适用 Flash !个人观点,仅供参考! ls有理,js画图就是这样的。 <HTML><BODY><div style="width:200px;filter:alpha(opacity=30);opacity: 0.5;-moz-opacity:0.5;">半透明</div><SCRIPT LANGUAGE="JavaScript"> function DrawGraph(){a = new Array(100,200,300,150);b = document.createElement("span");b.innerHTML=" ";var i=0;while(i<a.length){ div1 = document.createElement("DIV"); div1.style.width="20px"; div1.style.height=a[i]+"px"; div1.style.display="inline"; div1.style.backgroundColor="red"; document.getElementById("graph").appendChild(div1); b = document.createElement("span"); b.innerHTML=" "; document.getElementById("graph").appendChild(b); i++;}}</SCRIPT><P><INPUT type=button value="画图" name="" onclick="DrawGraph();"></P><div id="graph"></div></BODY></HTML> 不考虑IE以外的用户可以用VML 我可以用javascript的画线程序根据服务器传来的数据,在层上画出曲线图,但问题是当曲线向右一直走的时候,曲线图就变得越来越长.请问怎样把先前的行情部分去掉,只剩下新来的行情曲线?画曲线的程序如下: <script language="javascript">var Working=false;var points = [];var lastPoint = {x:0,y:0};function drawCanvas(){var arr = eval(req.responseText); var x1 = arr[0];var y1 = arr[1];if(!Working){document.getElementById("show").style.display="none";Working=true;lastPoint.x = x1;lastPoint.y = y1;points.push( {x:x1,y:y1} );}else{var s='<v:line from="'+lastPoint.x+','+lastPoint.y+'" to="'+x1+','+y1+'" style="position:absolute;left:0px;top:0px;"></v:line>';lastPoint.x = x1;lastPoint.y = y1;points.push( {x:x1,y:y1} );var o=document.createElement(s);document.body.insertAdjacentElement('BeforeEnd',o);}}</script> 晕,看不懂!<v:line 是什么东东?最简单的方式就是,达到可见边界时就自动刷新绘图区。仅仅是一点儿想法而已! 俺只能实现直线连续绘图时的自动刷新,写个小例子,希望能对 LZ 有帮助!代码如下,L@_@K<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> new document </title> <meta name="generator" content="editplus" /> <meta name="author" content="" /> <meta name="keywords" content="" /> <meta name="description" content="" /> </head> <body style="margin: 0px;"> <div id="divBackgrond" style="background-color: #ffff00; width: 100%; height: 400px; overflow: auto;"> </div> <h4>直线到达屏幕左边后自动重新开始,但是灰度连续变化!按钮可以暂停或继续变化!</h4> <input type="button" id="btnStop" value="Stop" /> <script type="text/javascript"> <!--var oPaper = document.getElementById("divBackgrond");var oStop = document.getElementById("btnStop");function changePrimitiveColor(strPrimitiveColor){ if (strPrimitiveColor.length == 2) { var arrNumber = new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"); var numColor = parseInt(strPrimitiveColor, 16); numColor += numStep; if (numColor == 255 || numColor == 0) { numStep *= -1; } return arrNumber[Math.floor(numColor/16)] + arrNumber[numColor%16] }}function changeColor(strColor){ if (strColor.length == 7) { var strR = changePrimitiveColor(strColor.substr(1, 2)); var strG = changePrimitiveColor(strColor.substr(3, 2)); var strB = changePrimitiveColor(strColor.substr(5, 2)); return "#"+strR+strG+strB; }}var strPosition = "absolute";var strColor = "#888888";var numHeight = 20;var numWidth = 5;var numTop = 180;var numLeft = -numWidth;var numStep = 1;function SpreadLine(){ if ((numLeft+2*numWidth) > oPaper.offsetWidth) { for (var i=oPaper.childNodes.length-1; i>=0; i--) { oPaper.removeChild(oPaper.childNodes[i]); numLeft = -numWidth; } } var oLine = oPaper.appendChild(document.createElement("div")); oLine.style.position = strPosition; strColor = changeColor(strColor); oLine.style.backgroundColor = strColor; oLine.style.height = numHeight + "px"; oLine.style.width = numWidth + "px"; oLine.style.top = numTop + "px"; numLeft += numWidth; oLine.style.left = numLeft + "px";}var numTimerId = window.setInterval(SpreadLine, 5);oStop.onclick = function (){ if (numTimerId) { this.value = "Play"; window.clearInterval(numTimerId); numTimerId = null; } else { this.value = "Stop"; numTimerId = window.setInterval(SpreadLine, 5); } } //--> </script> </body></html> div的移动无非就是设置style的top和left属性 当然position必须是absoltue至于怎么去跟随线移动那就要靠你自己写计算公式了 然后用setTimeout来实现移动的过程找到起点和终点利用三角函数算出 角度a x点下一个位置就是|sina|*步长 y点下一个位置就是|cosa|*步长当然还得注意移动方向 以上都是初中的三角公式 你自己算啦 在表格内搜索 急送分·超简单的js问题? 如何实现 ASP 调用横向排列后可以自动换行? Ext中的FormPanel如何用回车来却换焦点 一个菜鸟,希望得到大家的帮助。javascript运算问题 如何避免出现这样的问题(31*0.9=27.900000000000002) 如何结束有大量javascript: alert的网页,但不要关闭浏览器 如何透过Javascript将表单的某些输入项目设成无法输入 关于复选框?急帮帮忙啊! 如何做右键菜单? 一段2次加密的代码,帮帮看下~~ 在MAC电脑的safari2.0上遇到的JAVASCRIPT问题,在线等高手回答
曲线走是根据某个时间还是根据数据库中曲线的数据实时跑的?刷新么?还是用ajax?
<BODY><div style="width:200px;filter:alpha(opacity=30);opacity: 0.5;-moz-opacity:0.5;">半透明</div>
<SCRIPT LANGUAGE="JavaScript">
function DrawGraph()
{a = new Array(100,200,300,150);
b = document.createElement("span");
b.innerHTML=" ";
var i=0;
while(i<a.length){
div1 = document.createElement("DIV");
div1.style.width="20px";
div1.style.height=a[i]+"px";
div1.style.display="inline";
div1.style.backgroundColor="red";
document.getElementById("graph").appendChild(div1);
b = document.createElement("span");
b.innerHTML=" ";
document.getElementById("graph").appendChild(b);
i++;
}
}</SCRIPT>
<P><INPUT type=button value="画图" name="" onclick="DrawGraph();"></P>
<div id="graph"></div></BODY>
</HTML>
var Working=false;
var points = [];
var lastPoint = {x:0,y:0};
function drawCanvas()
{
var arr = eval(req.responseText);
var x1 = arr[0];
var y1 = arr[1];
if(!Working){
document.getElementById("show").style.display="none";
Working=true;
lastPoint.x = x1;
lastPoint.y = y1;
points.push( {x:x1,y:y1} );}else{
var s='<v:line from="'+lastPoint.x+','+lastPoint.y+'" to="'+x1+','+y1+'" style="position:absolute;left:0px;top:0px;"></v:line>';
lastPoint.x = x1;
lastPoint.y = y1;
points.push( {x:x1,y:y1} );var o=document.createElement(s);
document.body.insertAdjacentElement('BeforeEnd',o);
}
}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
</head> <body style="margin: 0px;">
<div id="divBackgrond" style="background-color: #ffff00; width: 100%; height: 400px; overflow: auto;">
</div>
<h4>直线到达屏幕左边后自动重新开始,但是灰度连续变化!按钮可以暂停或继续变化!</h4>
<input type="button" id="btnStop" value="Stop" />
<script type="text/javascript">
<!--
var oPaper = document.getElementById("divBackgrond");
var oStop = document.getElementById("btnStop");function changePrimitiveColor(strPrimitiveColor)
{
if (strPrimitiveColor.length == 2)
{
var arrNumber = new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f");
var numColor = parseInt(strPrimitiveColor, 16);
numColor += numStep;
if (numColor == 255 || numColor == 0)
{
numStep *= -1;
} return arrNumber[Math.floor(numColor/16)] + arrNumber[numColor%16]
}
}function changeColor(strColor)
{
if (strColor.length == 7)
{
var strR = changePrimitiveColor(strColor.substr(1, 2));
var strG = changePrimitiveColor(strColor.substr(3, 2));
var strB = changePrimitiveColor(strColor.substr(5, 2));
return "#"+strR+strG+strB;
}
}var strPosition = "absolute";
var strColor = "#888888";
var numHeight = 20;
var numWidth = 5;
var numTop = 180;
var numLeft = -numWidth;
var numStep = 1;function SpreadLine()
{
if ((numLeft+2*numWidth) > oPaper.offsetWidth)
{
for (var i=oPaper.childNodes.length-1; i>=0; i--)
{
oPaper.removeChild(oPaper.childNodes[i]);
numLeft = -numWidth;
}
}
var oLine = oPaper.appendChild(document.createElement("div"));
oLine.style.position = strPosition;
strColor = changeColor(strColor);
oLine.style.backgroundColor = strColor;
oLine.style.height = numHeight + "px";
oLine.style.width = numWidth + "px";
oLine.style.top = numTop + "px";
numLeft += numWidth;
oLine.style.left = numLeft + "px";
}var numTimerId = window.setInterval(SpreadLine, 5);oStop.onclick = function ()
{
if (numTimerId)
{
this.value = "Play";
window.clearInterval(numTimerId);
numTimerId = null;
}
else
{
this.value = "Stop";
numTimerId = window.setInterval(SpreadLine, 5);
}
}
//-->
</script>
</body>
</html>
利用三角函数算出 角度a x点下一个位置就是|sina|*步长 y点下一个位置就是|cosa|*步长
当然还得注意移动方向
以上都是初中的三角公式 你自己算啦