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

来源：互联网发布：阿里云备案域名购买编辑：程序博客网时间：2024/06/05 00:40

自己也刚开始学，之前貌似我写的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>