程序化使用Javascript

本文介绍了程序化使用Javascript的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 以下是我目前的 http://jsfiddle.net/6GEfr/ 这可行，但我想要它像一个波。而不是v形，它应该看起来像一个实际的波。如何逐渐做到这一点？ var height = 0; setInterval（function（）{ $（'＃container'）。prepend（'< div style =height：'+ Math.abs（height ++）+'％> ;< / div>'）; height =（height == 100）？-100：height; }，10）; 我的css： html，body，#outerContainer，#container { height：100％; } #outerContainer { display：table; } #container { display：table-cell; vertical-align：bottom; white-space：nowrap; } #container> div { width：5px; background：black; display：inline-block; } 解决方案 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sin\">Math.sin () a> var i = 5，height = setInterval（function（）{ $（'＃container'）。prepend（'< div style =height：'+ height +'％>< / div>'） i + = 0.05; height = 50 * Math.sin（i）+ 50; }，10）; 如果要使波浪更平滑，请减小元素的增量值和宽度。以下是示例。 Here is what I currently have http://jsfiddle.net/6GEfr/This works but I want it to be like a wave. Rather than a 'v' shape, it should look like an actual wave. How do you gradually do this?var height = 0;setInterval(function () { $('#container').prepend('<div style="height:' + Math.abs(height++) + '%"></div>'); height = (height == 100) ? -100 : height;}, 10);my css:html, body, #outerContainer, #container { height:100%;}#outerContainer { display : table;}#container { display : table-cell; vertical-align:bottom; white-space:nowrap;}#container > div { width:5px; background:black; display:inline-block;} 解决方案 Just use Math.sin() to model the wave.Updated Examplevar i = 5, height = 0;setInterval(function () { $('#container').prepend('<div style="height:' + height + '%"></div>'); i += 0.05; height = 50 * Math.sin(i) + 50;}, 10);If you want to make the wave smoother, decrease the increment value and the width of the elements. Here is an example. 这篇关于程序化使用Javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！