今天弄一个web,本来想叫同学帮忙弄的,但是后面一想,还是自己多接触接触,增加以下知识面。
记录以下用到的一些js技术:
split 函数: 跟java String 中的split 差不多,将字符串分开。
var 变量的声明,感觉js中,所有的变量都是var 。没有啥其他的类型。另外,函数的参数声明,不要用var关键字
修改标签文本内容: $("#id").html(“hello”);
插入删除数组数据:
array.shift(); array.push();
array.slice() :是新建了一个数组。
js中函数参数为数组是,是引用传递。
另外就是用到plot了。
下面是一个plot 显示的例子:
<script type="text/javascript">
$(function () {
// 要绘制的数据和数据的数据点数
var totalPoints = 300;
var dataAccx = new Array(),dataAccy = new Array() ,dataAccz = new Array(),dataGyrox = [],
dataGyroy = [],dataGyroz= [],dataMagx= [],dataMagy= [],dataMagz= [];
// 获得一些随机数据
function getRandomAccxData(tempdata) {
if (tempdata.length > 0){
tempdata.shift();
}
while (tempdata.length < totalPoints) {
var prev = tempdata.length > 0 ? tempdata[tempdata.length - 1] : 50;
var y = prev + Math.random() * 10 - 5;
if (y < 0)
y = 0;
if (y > 100)
y = 100;
tempdata.push(y);
}
var res = [];
for (var i = 0; i < tempdata.length; ++i)
res.push([i, tempdata[i]])
return res;
}
var updateInterval = 1000; // 刷新间隔
// 更改刷新间隔时间
$("#updateInterval").val(updateInterval).change(function () {
var v = $(this).val();
if (v && !isNaN(+v)) {
updateInterval = +v;
if (updateInterval < 1)
updateInterval = 1;
if (updateInterval > 2000)
updateInterval = 2000;
$(this).val("" + updateInterval);
}
});
// 设置绘图参数
var options = {
series: { shadowSize: 0 }, // 绘制线的阴影,不绘制设置 0
yaxis: { min: 0, max: 100 }, // Y 轴的最大值最小值
xaxis: { show: true }, // 不显示 X 轴
series: { lines: { show: true }}
};
// 绘图对象 参数为:绘制地点、数据、属性
var plotAccx = $.plot($("#plotshow"), [ getRandomAccxData(dataAccx) ], options);
function update() {
var data1 = [{ label: "D1", data:getRandomAccxData(dataAccx) },
{ label: "D2", data:getRandomAccxData(dataAccy) },
{ label: "D3", data:getRandomAccxData(dataAccz) }];
// 要实现动态绘图,只需重新设置其数据即可
plotAccx.setData(data1); // 设置数据
// 轴线不改变,不用调用 plot.setupGrid()
plotAccx.draw();
// 设置调用
setTimeout(update, updateInterval);
}
// 加载调用
update();
</script>
仅作记录。。。
具体plot 的参数:http://www.cnblogs.com/jiji262/archive/2012/05/15/2501792.html