学了点前端的总结

今天弄一个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>
仅作记录。。。

学了点前端的总结_第1张图片

具体plot 的参数:http://www.cnblogs.com/jiji262/archive/2012/05/15/2501792.html


你可能感兴趣的:(学了点前端的总结)