你好javascript day19

1）字符串

判断字符串中是否包含什么字符串

let str="abcdefg";

str.includes("d");//返回的是布尔值有就是true 反之false

判断字符是否在最前面

str.startsWith("a")；

str.startsWith("字符"，开始查找的位置)；

判断字符是否在最后

str.endsWith("g");

str.endsWith("字符"，开始查找的位置)；

重复字符串

str.repeat(3);//把整个字符串重复三遍重新输出

判断字符串长度，不足填充指定字符直到满足字符串长度

str.padStart(字符长度，“填充字符”)；//前置填充

str.padEnd(字符长度，“填充字符”)；//末尾填充

应用场景：随机色字符串处理

console.log("#"+Math.floor(Math.random()*0x1000000).toString(16).padStart(6,"0"));

数组填充任意值任意长度

arr.fill(值，从什么位置开始，到什么位置结束)；//数组必须要有长度，而且填充会覆盖

扁平化数组

let arr=[1,2,3,[4,5,6]];

let newArr=arr.flatMap(function(item){return item;});

console.log(newArr);//1 2 3 4 5 6

这是一个函数方法

轮播图详解：

flow ：
       1.布局
       2.定义当前第几张图片和应该向什么方向运动
       3.将需要放置的图片根据方向放在前面或者后面
       4.将整个容器向左或者向右移动
       5.完成后将上一次的图片删除 ready： imgCon 放置所有图片的容器 dotList 小圆点列表 bnList 放置左右按钮的数组 imgList 放置所有图片的数组 pos 确定当前图片的锚点 direction 图片运行的方向 imgSrcList 储存轮播图图片地址的数组<script>

let imgCon,ul,preDot;
let pos=0,
x=0,
bool=false,
autoBool=false,
dotList=[], imgList=[], bnList=[], time=300, imgSrcList=["./img/a.png","./img/b.png","./img/c.png","./img/d.png","./img/e.png"], direction=""; //预设值 const WIDTH=1500; const HEIGHT=500; const SPEED=40; const LEET=Symbol(); const RIGHT=Symbol(); //初始化 init(); function init(){
let carousel=ce("div",{
width:WIDTH+"px",
height:HEIGHT+"PX",
position:"relative",
margin:"auto",
overflow:"hidden"
});
createImgCon(carousel);
createButton(carousel);
createDotList(carousel);
document.body.appendChild(carousel);
changeDot();
ul.style.left=(WIDTH-ul.offsetWidth)/2+"px";
setInterval(animation,16);
carousel.addEventListener("mouseenter",mouseHandler);
carousel.addEventListener("mouseleave",mouseHandler);
}

//轮播图离开进入事件函数
//如果进入轮播图，设置自动轮播图的开关是false,就不会自动轮播，并且重新将计时器设为300
//如果离开轮播图，设置自动轮播开关时true

function mouseHandler(e){
if(e.type==="mouseHandler"){
 autoBool=false;
 time=300;
}else if(e.type===""mouseleave){
 autoBool=true;
}
}



//创建轮播图容器和图片

//参数
// parent 父容器， 元素类别 将创建好的容器和图片放在这个父容器内
//1.创建图片容器，宽度是2张图片宽度
//2.根据所有轮播图地址数组创建所有图片，并且放在数组imgList中
//3.将第0张图片放在创建图片容器imgCon中
//4.将图片容器放在轮播图容器中

function createImgCon(parent){
imgCon=ce("div",{
position:"absolute",
width:2*WIDTH+"px",
height:HEIGHT+"px",
left:0
});
for(let i=0,i<imgSrcList.length;i++){
let img=ce("img",{width:WIDTH+"px",height:HEIGHT+"px"});
img.src=imgSrcList[i];
imgList.push(img);
}
imgCon.appendChild（imgList[0]）;
parent.appendChild(imgCon);
}


//创建小圆点
//参数
// parent 父容器， 元素类型 将创建好的小圆点放在这个父容器内
//1.创建ul,设置样式
//2.根据图片地址的数组，循环若干次，有多少图片就循环多少次创建小圆点
//3.将每一个小圆点存在数组dotList
//4.将小圆点放在ul
//5.给ul增加点击事件，事件是点击小圆点，事件委托

function createDotList(parent){
ul=ce("ul",{
listStyle="none",
margin:0,
padding:0,
position:"absolute",
bottom:"50px"
});
for(let i=0;i<imgSrcList;i++){
let dot=ce("li",{
width:"28px",
height:"28px",
borderRadius:"50%",
boder:"2px solid red",
float:"left",
marginLeft:i===0 ? "0px" : "15px"
});
dotList.push(dot);
ul.appendChild(dot);
}
//dotList=Array.from(ul.children);
parent.appendChild(ul);
ul.addEventListener("click",dotClickHandler);
}



//点击左右按钮事件函数
// e 点击事件  MouseEvent
// e.target 是被点击的按钮图片
//如果bool是true，也就是当前轮播图正在播放时，点击按钮跳出，不继续执行
//1.判断被点击图片的地址里面是否包含有left.png字符串，如果有，就是点击左侧按钮，反之是右按钮
//2.如果点击了左侧按钮，当前图片下标-1，如果小于0，就让他为当前图片地址数量-1，也就是最大应该有图标下标
//3.如果点击了右侧按钮，当前下标+1，如果大于前图片地址数量-1，就让他为0，回到最开始第0张图片，并且设置方向是向左运动


function bnClickHandler(e){
if(bool) return;
if(e.target.src.includes("left.png")){
pos--;
if(pos<0) pos=imgSrcList.length-1;
direction=RIGHT;
}else{
pos++;
if(pos>imgSrcList.length-1) pos=0;
 direction=LEFT
}
createNextImg();
}

//小圆点事件函数
//e 鼠标事件对象 MouseEvent
// e.target 是鼠标点击的目标
//因为使用时事件委托，因此判断点击目标是不是li,如果不是就跳出
//如果bool是true，也就是当前轮播图正在播放时，点击按钮跳出，不继续执行
//1.判断点击目标是否li,不是跳出
//2.获取当前点击的小圆点是数组中第几个
//3.如果当前点击的小圆点的下标和当前展示图片的下标相同时，跳出不处理
//4.如果大于当前展示图片的下标，方向设为向左运动，反之向右
//5.将当前点击的下标设为当前应展现图片的下标

function dotClickHandler(e){
if(bool) return;
if(e.target.constructor!==HTMLLIElement) return;
let index=dotList.indexOf(e.target);
direction=index>pos ? LEFT : RIGHT;
POS=index;
createNextImg();
}


//创建下一张需要显示的图片
function createNextImg(){
if(direction===LEFT){
 imgCon.appendChild(imgList[pos]);
 x=0;
}else if(direction===RIGHT){
 imgCon.insertBefore(imgList[pos],imgCon.fristElementChild);
 imgCon.style.left=-WIDTH+"px";
 x=-WIDTH;
}
bool=true;
changeDot();
}

//切换小圆点
function changeDot(){
if(preDot){
 preDot.style.backgroundColor="rgba(255,0,0,0)"
}
preDot=dotList[pos];
preDot.style.backgroundColor="rgba(255,0,0,0.5)"
}

//创建元素

function ce(type,style){
let elem=document.createElement(type);
Object.assign(elem.style,style);
return elem;
}

//延时执行动态函数

function animation(){
imgConMove();
autoPlay();
}


//每16秒图片移动一次
function imgConMove(){
if(!bool) return;
if(direction===LEFT){
x-=SPEED;
if(x<=-WIDTH){
imgCon.firstElementChild.remove();
x=0;
bool=false;
}
imgCon.style.left=x+"px";
}else if(direction===RIGHT){
x+=SPEED;
if(x>=0){
bool=false;
x=0;
imgCon.lastElementChild.remove();
}
imgCon.style.left=x+"px";
}
}

//自动轮播
function autoPlay(){
if(!autoBool) return;
time--;
if(time>0) return;
time=300;
let evt=new MouseEvent("click");
bnList[1].dispatchEvent(evt);
}
</script>

猜你喜欢