蛋疼地开始学JS原型，prototype，试着写一个小小的伸缩框

本文介绍了一种使用JavaScript实现的平滑显示效果，通过自定义函数控制元素的高度变化，达到展开与折叠的动画效果。该方法适用于需要动态调整高度的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自己也刚开始学，之前貌似我写的JS都是一大堆的函数，一大堆的ID啥的，虽然东西都写得出来，但是自己也感觉很烦。

嘛……于是，感觉应该要开始学着写写原型了……借着脑袋里淡淡地印象……写这么一个小东西。算是准备开始学吧……

<!doctype html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <title>小东西</title> </head> <body> <style type="text/css"> .aa{ position:relative; overflow:hidden;} .bb{ position:absolute; bottom:0;} </style> <script type="text/javascript"> function smooth_show(id){ var a = this; this.move = 0; this.self = document.getElementById(id); this.changer = this.self.parentNode; this.open = function(){ window.clearInterval(a.timer); a.timer = window.setInterval(function(){ if (a.changer.offsetHeight < a.self.offsetHeight){ var dis = a.self.offsetHeight - a.changer.offsetHeight; var change_height = dis / 3; change_height = change_height < 2 ? 2 : change_height; change_height = change_height + a.changer.offsetHeight > a.self.offsetHeight ? dis : change_height; a.changer.style.height = a.changer.offsetHeight + change_height + "px"; }else { window.clearInterval(a.timer); } }, 20); a.move = 1; }; this.close = function(){ window.clearInterval(a.timer); a.timer = window.setInterval(function(){ if (a.changer.offsetHeight > 0){ var dis = a.changer.offsetHeight; var change_height = dis / 3; change_height = change_height < 2 ? 2 : change_height; change_height = a.changer.offsetHeight - change_height < 0 ? dis : change_height; a.changer.style.height = a.changer.offsetHeight - change_height + "px"; }else { window.clearInterval(a.timer); } }, 20); a.move = 2; } } smooth_show.prototype.auto = function(){ if (this.move != 1){ this.open(); }else { this.close(); } } </script> <div class="aa"> <div class="bb" id="test"> <div>asdfasdfasdf</div> <div>asdfasdfasdf</div> <div>asdfasdfasdf</div> <div>asdfasdfasdf</div> <div>asdfasdfasdf</div> <div>asdfasdfasdf</div> <div>asdfasdfasdf</div> <div>asdfasdfasdf</div> <div>asdfasdfasdf</div> </div> </div> <script type="text/javascript"> var asdf = new smooth_show("test"); asdf.open(); </script> <div style="position:absolute; left:200px; top:150px;"> <input type="button" value="展开" onclick="asdf.open();" /> <input type="button" value="关闭" onclick="asdf.close();" /> <input type="button" value="自动" onclick="asdf.auto();" /> </div> </body> </html>