构造函数+原型

<script type="text/javascript">
function Car(color, doors, wheels) { //创建一个类
this.color = color; //类属性
this.doors = doors;
this.wheels = wheels;
this.run = function() { //类方法
alert("我会跑!!!");
}
}
Car.prototype.cc = "hahaha"; //通过proto属性存储一个cc=“hahaha”;
Car.prototype.stop = function() { //原型链
alert("我会停止!!!");
}
Car.prototype.stop2 = function() { //关注原型链接
alert("我还是会停!!!");
}

//创建一个实例对象;
var car1 = new Car("red", 4, 4);
alert(car1.cc);
car1.run();
car1.stop();
document.write("这个车的颜色是:" + car1.color + "<br/>");
document.write("这个车有" + car1.doors + "个门" + "<br/>");
document.write("这个车有" + car1.wheels + "轮子<br/><br/><br/>");


var car2 = new Car("blue", 4, 4);
document.write("这个车的颜色是:" + car2.color + ",有" + car2.doors + "个车门,有" + car2.wheels + "个轮子<br/>");
car2.stop2();
</script>
HTML代码: ``` <div id="tab"> <ul> <li class="active">选项卡1</li> <li>选项卡2</li> <li>选项卡3</li> </ul> <div class="content active">选项卡1的内容</div> <div class="content">选项卡2的内容</div> <div class="content">选项卡3的内容</div> </div> ``` CSS代码: ``` #tab ul { list-style: none; margin: 0; padding: 0; display: flex; } #tab ul li { width: 100px; height: 30px; line-height: 30px; text-align: center; background-color: #ccc; margin-right: 10px; cursor: pointer; } #tab ul li.active { background-color: #00f; color: #fff; } #tab .content { display: none; padding: 10px; } #tab .content.active { display: block; } ``` JavaScript代码: ``` function Tab(options) { this.wrap = options.wrap; this.tabTitles = options.tabTitles; this.tabContents = options.tabContents; this.interval = options.interval || 3000; this.init(); } Tab.prototype = { constructor: Tab, init: function() { this.render(); this.bindEvent(); this.autoPlay(); }, render: function() { var wrap = document.querySelector(this.wrap); var tabTitles = this.tabTitles; var tabContents = this.tabContents; var html = ''; html += '<ul>'; for (var i = 0; i < tabTitles.length; i++) { html += '<li'; if (i === 0) { html += ' class="active"'; } html += '>' + tabTitles[i] + '</li>'; } html += '</ul>'; for (var i = 0; i < tabContents.length; i++) { html += '<div class="content'; if (i === 0) { html += ' active'; } html += '">' + tabContents[i] + '</div>'; } wrap.innerHTML = html; }, bindEvent: function() { var self = this; var tabs = document.querySelectorAll(this.wrap + ' ul li'); for (var i = 0; i < tabs.length; i++) { tabs[i].index = i; tabs[i].onmouseover = function() { self.stopPlay(); self.changeTab(this.index); }; tabs[i].onmouseout = function() { self.autoPlay(); }; } }, autoPlay: function() { var self = this; this.timer = setInterval(function() { var activeIndex = self.getActiveIndex(); var nextIndex = activeIndex + 1; if (nextIndex >= self.tabTitles.length) { nextIndex = 0; } self.changeTab(nextIndex); }, this.interval); }, stopPlay: function() { clearInterval(this.timer); }, changeTab: function(index) { var tabs = document.querySelectorAll(this.wrap + ' ul li'); var contents = document.querySelectorAll(this.wrap + ' .content'); for (var i = 0; i < tabs.length; i++) { if (i === index) { tabs[i].className = 'active'; contents[i].className = 'content active'; } else { tabs[i].className = ''; contents[i].className = 'content'; } } }, getActiveIndex: function() { var tabs = document.querySelectorAll(this.wrap + ' ul li'); for (var i = 0; i < tabs.length; i++) { if (tabs[i].className === 'active') { return i; } } } }; // 使用方法 var tab = new Tab({ wrap: '#tab', tabTitles: ['选项卡1', '选项卡2', '选项卡3'], tabContents: ['选项卡1的内容', '选项卡2的内容', '选项卡3的内容'], interval: 3000 }); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值