类
// 类 对象
// 对象就是类的实例化体现
// 类就是对象的抽象化表现
// 父类 子类 超类superClass 基类BaseClass
// 子类的父类称为超类
// 范
var obj={
a:1,
play:function(){
console.log("play");
},
run:function(){
console.log("run"+this.a);
}
}
obj.play();//play
obj.run(); //run1
var obj={
bool:false,
init:function(){
this.elem=document.createElement("div");
Object.assign(this.elem.style,{
width:"50px",
height:"50px",
backgroundColor:"#"+Math.floor(Math.random()*0xFFFFFF).toString(16).padStart(6,"0")
});
document.body.appendChild(this.elem);
this.elem.addEventListener("click",e=>this.clickHandler(e));
},
clickHandler(e){
this.bool=!this.bool;
e.currentTarget.style.backgroundColor=this.bool ? "red" : "green";
this.showBackground();
},
showBackground:function(){
console.log(this.elem.style.backgroundColor);
}
}
obj.init();
obj.init();
class A{
a=1;
// 构造函数
constructor(){
}
play(){
console.log("play");
}
run(){
this.a++;
console.log("run"+this.a);
}
}
// 实例化对象
var a=new A();
a.play();//play
a.run();//run2
a.run();//run3
a.run();//run4
var b=new A();
b.play();//play
b.run(); //run2
// console.log(a);//A{a:4}
class Box{
// 当实例化时，就会自动执行构造函数
a=0;
constructor(a){
this.a=a;
this.elem=this.createElem();
}
createElem(){
var elem=document.createElement("div");
Object.assign(elem.style,{
width:"50px",
height:"50px",
backgroundColor:"#"+Math.floor(Math.random()*0xFFFFFF).toString(16).padStart(6,"0")
})
document.body.appendChild(elem);
elem.addEventListener("click",e=>this.clickHandler(e));
return elem;
}
clickHandler(e){
this.bool=!this.bool;
e.currentTarget.style.backgroundColor=this.bool ? "red" : "green";
this.showBackground();
}
showBackground(){
console.log(this.elem.style.backgroundColor);
}
}
class Ball extends Box{
constructor(a){
super(a);//超类的构造函数
this.elem.style.borderRadius="50px";
}
clickHandler(e){
// 会覆盖父类这个方法的内容 override
super.clickHandler(e);//先执行父类的该方法
console.log(this.a);
}
}
var b=new Ball(5);//实例化对象，加(),类似于函数（当实例化时执行了constructor函数）
var c=new Box(6);
ES6模块开发
<script type="module">
import A from "./js/A.js";//export default的可以直接import
import {B,C} from "./js/B.js";//{}里写的不是默认的default
var a=new A();
var b=new B();
var c=new C();
console.log(a,b,c); //双击打开会报错
var a=new A(4,5,6,7,8,9);
var obj={
a:1,b:2,c:3
}
var o={d:10};
o={...obj};//浅复制
//重新创建一个对象，并且将obj复制给这个新的对象，不会保留原对象的属性
console.log(o);
import Arrays from "./js/A.js";
var arr=new Arrays(3,4,5);
// arr.constructor===Arrays;
arr.push();
arr.join();
Arrays.form();
Arrays.isArray()
console.log(arr);
Math.PI
</script>
//A.js
export default class Arrays{
// 参数可以设置初始值
/*constructor(a,b,c=3){
} */
// ...arg 参数允许由不定量数据，arg最后是一个数组
/*constructor(a,b,...arg){
console.log(a,b,arg);
} */
a=[];
constructor(len,...arg){//创建数组
if(arg.length===0 && len.constructor===Number){//第一位参数是数值
if(len===Math.floor(len)) this.a.length=len;
else console.error("输入错误的长度");
return;
}
this.a[0]=len;
for(var i=0;i<arg.length;i++){
this.a[i+1]=arg[i];
}
}
push(...arg){
}
pop(){
}
unshift(...arg){
}
shift(){
}
splice(start,len,...arg){
}
join(str){//对象调用的方法
}
static from(){//这个数组的类调用的方法，静态方法中不能写this
}
static isArray(){
}
}
export class Maths{
static PI=3.1415926;
static abs(){
}
static floor(){
}
}
// Maths.PI
// Maths.abs();
// Maths.floor();
//B.js
export class B{//没有加default,导出多个类
}
export class C{
}
多选框和单选框
<div class="divs"></div>
<script type="module">
// import CheckBox from "./js/CheckBox.js";
import Radio from "./js/Radio.js";
var list=[];
let arr=["看书","游泳","写代码","跑步","看电影","逛街"];
arr.forEach(function(item){
let ck=new Radio(item,"hobby");
ck.appendTo(".divs");
list.push(ck);
})
</script>
//CheckBox.js
export default class CheckBox{
// 构造函数就是当前类别实例化时初始执行的函数,在外面我们也可以认为
// 构造函数的名字等同于类名
// 构造函数中不能使用return返回某个对象
// 构造函数中会自动返回this，如果使用return就会覆盖内容
// 构造函数中的this,就是实例化完成的对象
elem;
label;
checked=false;
constructor(_label){
this.label=_label;
this.elem=this.createElem();
}
createElem(){
if(this.elem) return this.elem;g//如果elem已经创建了把它赋值回去，不会重复创建
let div=document.createElement("div");
div.style.float="left";
div.style.marginRight="12px";
div.style.position="relative";
let icon=document.createElement("span");
Object.assign(icon.style,{
width:"14px",
height:"14px",
position:"relative",
display:"inline-block",
marginRight:"8px",
backgroundImage:"url('./img/new_icon.png')",
backgroundPositionX:"-238px",
backgroundPositionY:"-37px",
});
div.appendChild(icon);
let labelSpan=document.createElement("span");
labelSpan.textContent=this.label;
labelSpan.style.userSelect="none";
labelSpan.style.position="relative"
div.appendChild(labelSpan);
div.addEventListener("click",e=>this.clickHandler(e));
return div;
}
appendTo(parent){
if(typeof parent==="string") parent=document.querySelector(parent);
parent.appendChild(this.elem);
}
clickHandler(e){
this.checked=!this.checked;
Object.assign(this.elem.firstElementChild.style,{
backgroundPositionX:this.checked ? "-128px" : "-238px",
backgroundPositionY:this.checked ? "-126px" : "-37px"
})
}
}
//radio.js
import CheckBox from "./CheckBox.js";
export default class Radio extends CheckBox{
name;
constructor(_lable,_name){
super(_lable);
this.name=_name;
Object.assign(this.elem.firstElementChild.style,{
width:"18px",
height:"18px",
backgroundPositionX:"-195px",
backgroundPositionY:"-104px",
});
Object.assign(this.elem.lastElementChild.style,{
top:"-2px"
});
this.elem.setAttribute("name",_name);
}
clickHandler(e){
this.checked=true
let arr=Array.from(document.getElementsByName(this.name));
for(var i=0;i<arr.length;i++){
if(arr[i]===this.elem){
Object.assign(this.elem.firstElementChild.style,{
backgroundPositionX:"-175px",
backgroundPositionY:"-104px",
});
}else{
Object.assign(arr[i].firstElementChild.style,{
backgroundPositionX:"-195px",
backgroundPositionY:"-104px",
});
}
}
}
}
动画
<style>
.ball{
width:50px;
height: 50px;
border-radius: 50%;
position: absolute;
left:0;
top:0;
}
.box
{
width:800px;
height:400px;
border: 1px solid #000000;
position: relative;
margin: auto;
left: 0;
right: 0;
}
</style>
<div class="box">
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
</div>
<script>
// 帧频 1秒中播放多少帧
// 帧 1帧就是一张图片播放的时间
// 60帧频
// 1000/60=16.666666
/* var balls;
var ids;
init();
function init(){
balls=document.querySelectorAll(".ball");
for(var i=0;i<balls.length;i++){
balls[i].speedX=Math.floor(Math.random()*5)+1;
balls[i].speedY=Math.floor(Math.random()*6)+1;
balls[i].x=Math.floor(Math.random()*700);
balls[i].y=Math.floor(Math.random()*300);
}
animation();
}
function animation(){
// 开启固定60帧频
ids=requestAnimationFrame(animation);
// cancelAnimationFrame(ids);//清除时间帧请求
for(var i=0;i<balls.length;i++){
if(balls[i].x+50>800 || balls[i].x<0) balls[i].speedX=-balls[i].speedX;
if(balls[i].y+50>400 || balls[i].y<0) balls[i].speedY=-balls[i].speedY;
balls[i].x+=balls[i].speedX;
balls[i].y+=balls[i].speedY;
balls[i].style.left=balls[i].x+"px";
balls[i].style.top=balls[i].y+"px";
}
}
*/
</script>