一直想寫個(gè)波線圖，但寫出來發(fā)現(xiàn)這是點(diǎn)陣組成的，不知道如何把線條弄的特別的平滑，有會(huì)的，求留言評論指導(dǎo)。

1.[代碼][JavaScript]代碼

Document

.container{width:500px;height:500px;border:1px solid #DEDEDE;}

.container span{width:1px;height:50px;float:left;border-bottom:2px solid #F00;margin-bottom:0px;}

var i = 0;

(function abc() {

setTimeout(function () {

if (i++ < 500) {

var me = document.getElementsByClassName("container");

var j = document.createElement('span');

var th = document.getElementsByTagName("span");

var h = 0;

if (i > 1) {

var l = i - 2;

var h = th[l].clientHeight;

} else {

h = 50;

}

var arr = new Array(-2,-1,0,1,2);

var k = Math.floor((Math.random() * 5));

j.style.height = h + arr[k] + "px";

me[0].appendChild(j);

abc();

}

}, 50);

})()

總結(jié)

以上是生活随笔為你收集整理的html绘制波形图,JS实现波形图的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。