<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>选项卡</title>

<style>

.active{

background-color: #789218;

color:aqua;

}

.box div{

height: 200px;

width: 200px;

border: 1px solid #cccccc;

display: none;

}

</style>

</head>

<body>

<script>

class Tab{

constructor(id){

this.oBox = document.getElementById(id);

this.aBtn = this.oBox.getElementsByTagName('input');

this.aDiv = this.oBox.getElementsByTagName('div');

this.iNow = 0;

this.init();

}

init(){

for(let i=0;i<this.aBtn.length;i++){

this.aBtn[i].onclick=()=>{

this.iNow = i;

document.title = this.iNow;

this.hide();

this.show(i);

}

}

}

hide(){

for(var i = 0; i < this.aDiv.length;i++){

this.aDiv[i].style.display = 'none';

this.aBtn[i].className = '';

}

}

show(index){

this.aDiv[index].style.display = 'block';

this.aBtn[index].className = 'active';

}

}

class AuToTab extends Tab{

constructor(id){

super(id);

setInterval(this.next.bind(this),1000)

}

next(){

this.iNow++;

if(this.iNow == this.aBtn.length)this.iNow=0;

this.hide();

this.show(this.iNow);

}

}

window.onload=()=>{

new Tab('box');

new AuToTab('box2');

}

</script>

<div id="box" class="box">

<input type="button" value="aaa" class="active">

<input type="button" value="bbb">

<input type="button" value="ccc">

<div style="display: block;">1111</div>

<div>2222</div>

<div>3333</div>

</div>

<div id="box2" class="box">

<input type="button" value="aaa" class="active">

<input type="button" value="bbb">

<input type="button" value="ccc">

<div style="display: block;">1111</div>

<div>2222</div>

<div>3333</div>

</div>

</body>

</html>

ES6 class 继承 与面向对象封装开发简单实例的更多相关文章

  1. HTML5面向对象的游戏开发简单实例总结

    在阅读一本HTML5游戏开发相关书籍时发现一个很好的例子,通过这个例子可以对面向对象的开发进行更深入的理解.这个对象要实现的是:将一个CSS sprite中的图像绘制到canvas中.首先创建一个Sp ...

  2. SpringMVC笔记——Spring+MyBatis组合开发简单实例

    简介 SSH框架很强大,适合大型项目开发.但学无止境,多学会一门框架组合开发会让自己增值许多. SSM框架小巧精致,适合中小型项目快速开发,对于新手来说也是简单上手的.在SSM框架搭建之前,我们先学习 ...

  3. Java WebService 开发简单实例

    Web Service 是一种新的web应用程序分支,他们是自包含.自描述.模块化的应用,可以发布.定位.通过web调用.Web Service可以执行从简单的请求到复杂商务处理的任何功能.一旦部署以 ...

  4. js封装、简单实例源码记录

    1.运动封装:doMove ( obj, attr, dir, target, endFn )  加入回调.&&.||用法注释 <script> var oBtn1 = d ...

  5. 安卓APP开发简单实例 结对编程心得

    开始说起搞APP开发,自己和小伙伴的编程水平真的很低,无从下手,只有在网上找点案列,学习着怎样开发,结对编程还是面临着许多问题的,大家的水平有所差异和编程风格不同,我们用eclipse做了一个仿微信登 ...

  6. SpringMVC笔记——SSM框架搭建简单实例

    落叶枫桥 博客园 首页 新随笔 联系 订阅 管理 SpringMVC笔记——SSM框架搭建简单实例 简介 Spring+SpringMVC+MyBatis框架(SSM)是比较热门的中小型企业级项目开发 ...

  7. 九、Java基础---------面向对象封装、继承、多态

    封装 1.1 基本概念  封装(encapsulation)是面向对象三大特征之一,它是指将对象的状态信心隐藏在对象的内部,不允许外部直接进行访问,而是通过该类提供的方法来实现对内部信息的操作和访问. ...

  8. 网络游戏开发-服务器（01）Asp.Net Core中的websocket，并封装一个简单的中间件

    先拉开MSDN的文档,大致读一遍 (https://docs.microsoft.com/zh-cn/aspnet/core/fundamentals/websockets) WebSocket 是一 ...

  9. php面向对象 封装继承多态 接口、重载、抽象类、最终类总结

    1.面向对象 封装继承多态  接口.重载.抽象类.最终类 面向对象 封装继承多态  首先,在解释面向对象之前先解释下什么是面向对象? [面向对象]1.什么是类? 具有相同属性(特征)和方法(行为)的一 ...

随机推荐

  1. CSS 优先级法则

    样式的优先级 多重样式(Multiple Styles):如果外部样式.内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况. 一般情况下,优先级如下: (外部样式)External styl ...

  2. 014-数据结构-树形结构-基数树、Patricia树、默克尔树、梅克尔帕特里夏树( Merkle Patricia Tree, MPT)

    一.基数树 Radix树,即基数树,也称压缩前缀树,是一种提供key-value存储查找的数据结构.与Trie不同的是,它对Trie树进行了空间优化,只有一个子节点的中间节点将被压缩.同样的,Radi ...

  3. [spring boot]idea中实现热部署的方法

    发生了任何修改之后,必须关闭后再启动Application类才能够生效,显得略微麻烦. Springboot提供了热部署的方式,当发现任何类发生了改变,马上通过JVM类加载的方式,加载最新的类到虚拟机 ...

  4. 监控数据库DDL操作日志

    背景 为了监控好生产环境下各个数据库服务器上DDL操作日志,便于运维工程师管控好风险,我们有必要关注当前实例下的所有的DDL操作以及对应的IP和hostname. 测试环境 Microsoft SQL ...

  5. Nginx+FastCGI到底是谁影响超时时间

    需求: 一个php程序要跑一段时间,但是时间不确定. 问题: 当该php程序运行超过一段时间被强制断开连接. PHP本身超时处理 在 php.ini 中,有一个参数 max_execution_tim ...

  6. 企业证书发布app到七牛云服务

    ---恢复内容开始--- 最近在做企业证书发布app,从申请企业证书,到测试程序发布到七牛云存储.整了几天终于实现了,整理一下资料. 1.首先,申请企业证书. 到苹果开发网站申请企业证书 https: ...

  7. element UI实现动态生成多级表头

    一.效果图 二.封装两个组件,分别为DynamicTable.vue和TableColumn.vue,TableColumn.vue主要是使用递归来对表头进行循环生成 DynamicTable.vue ...

  8. SpringCloud学习（一）服务的注册与发现Eureka(Finchley版本)

    创建服务注册中心 在这里,我还是采用Eureka作为服务注册与发现的组件. 首先创建一个空项目 首先创建一个空项目,再创建一个maven项目,首先创建一个主Maven工程,在其pom文件引入依赖,sp ...

  9. jstack 命令

    NAME jstack - Prints Java thread stack traces for a Java process, core file, or remote debug server. ...

  10. Macaca环境搭建(四)----mac系统macaca安装

    一.安装Homebrew 命令:/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/insta ...