Javascript面向对象及组件的详细介绍(三)面向对象的拖拽
来源:互联网 发布:砍价软件有哪些 编辑:程序博客网 时间:2024/06/08 00:48
面向对象的拖拽
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>无标题文档</title>
- <style>
- #div1 div,#div2 div{ width:200px; height:200px; border:1px #000 solid; display:none;}
- .active{ background:red;}
- </style>
- <script>
- /*var arr = [4,7,1,3];
- arr.sort(); // 1 3 4 7
- var arr2 = [4,7,1,3];
- arr2.push(5);
- arr2.sort(); // 1 3 4 5 7
- */
- window.onload = function(){
- var t1 = new Tab('div1');
- t1.init();
- t1.autoPlay();
- var t2 = new Tab('div2');
- t2.init();
- t2.autoPlay();
- };
- function Tab(id){
- this.oParent = document.getElementById(id);
- this.aInput = this.oParent.getElementsByTagName('input');
- this.aDiv = this.oParent.getElementsByTagName('div');
- this.iNow = 0;
- }
- Tab.prototype.init = function(){
- var This = this;
- for(var i=0;i<this.aInput.length;i++){
- this.aInput[i].index = i;
- this.aInput[i].onclick = function(){
- This.change(this);
- };
- }
- };
- Tab.prototype.change = function(obj){
- for(var i=0;i<this.aInput.length;i++){
- this.aInput[i].className = '';
- this.aDiv[i].style.display = 'none';
- }
- obj.className = 'active';
- this.aDiv[obj.index].style.display = 'block';
- };
- Tab.prototype.autoPlay = function(){
- var This = this;
- setInterval(function(){
- if(This.iNow == This.aInput.length-1){
- This.iNow = 0;
- }
- else{
- This.iNow++;
- }
- for(var i=0;i<This.aInput.length;i++){
- This.aInput[i].className = '';
- This.aDiv[i].style.display = 'none';
- }
- This.aInput[This.iNow].className = 'active';
- This.aDiv[This.iNow].style.display = 'block';
- },2000);
- };
- </script>
- </head>
- <body>
- <div id="div1">
- <input class="active" type="button" value="1">
- <input type="button" value="2">
- <input type="button" value="3">
- <div style="display:block">11111</div>
- <div>22222</div>
- <div>33333</div>
- </div>
- <div id="div2">
- <input class="active" type="button" value="1">
- <input type="button" value="2">
- <input type="button" value="3">
- <div style="display:block">11111</div>
- <div>22222</div>
- <div>33333</div>
- </div>
- </body>
- </html>
0 0
- Javascript面向对象及组件的详细介绍(三)面向对象的拖拽
- Javascript面向对象及组件开发的详细介绍(一)
- Javascript面向对象及组件详细介绍(四)包装对象
- Javascript面向对象及组件详细介绍(五)原型链
- Javascript面向对象及组件开发(二)面向对象的写法
- JavaScript 面向对象(三)对象的方法及函数的上下文
- 面向对象的javascript
- javascript的面向对象
- JavaScript的面向对象
- 面向对象的JavaScript
- Javascript的面向对象
- 面向对象的JavaScript
- 面向对象的JavaScript
- 面向对象的JavaScript
- 面向对象的Javascript
- 面向对象的JavaScript
- javascript的面向对象
- 面向对象的JavaScript
- 书-Programming Game AI by Example
- 20151230 053 60-b20
- 梦醒
- css3 cal 用法
- redhat中的setup工具 可视化配置
- Javascript面向对象及组件的详细介绍(三)面向对象的拖拽
- error:LNK2005 已经在*.obj中定义
- 【splay】BZOJ 1507:[NOI2003]Editor
- linux虚拟机与win主机之间ping通以及其他网络设置
- Intent 的传值,取值,打电话等。。
- Qt的Model/View (二)
- 图书馆充电位置爆满解决办法
- Codeforces #337
- 开发很有用的地址