JS-WEB-API-Day5

作者: 小可_34e0 | 来源:发表于2019-07-28 11:10 被阅读0次

一次性定时器

<body>
    <input type="button" name="" value="按键" id="btn">
</body>
<script src="xiec.js"></script>
<script>
    window.onload=function(){
        //一次性定时器
        var timeId=window.setTimeout(function(){
            alert('您好');
        },1000);

        //点击这个按钮，停止这个一次性定时器
        document.getElementById('btn').onclick=function(){
            clearTimeout(timeId);
        };
    };

</script>

案例：协议按钮禁用：

<body>
   <input type="text" name="" value="请仔细阅读一下协议，如静静看书发阿萨德你烦" id="txt">
   <input type="button" name="" value="按键" id="btn" disabled="disabled">
</body>
<script src="xiec.js"></script>
<script>
   var time=5;
   var timeId=setInterval(function(){
       time--;
       my$('btn').value="请仔细阅读协议("+time+")";
       if(time<=0){
           //停止定时器
           clearInterval(timeId);
           //按钮能被点击
           my$('btn').disabled=false;
           my$('btn').value="同意";

       }

   },1000);
</script>

案例：div渐变：

<style >
        *{
            padding: 0%;
            margin:0%;
        }
        #dv{
            width: 300px;
            height: 200px;
            background-color: pink;
            opacity: 1;
        }

    </style>
    
    
</head>
<body>
    <div id="dv"></div>
    <input type="button" name="" value="按键" id="btn" >
</body>
<script src="xiec.js"></script>
<script>
    my$('btn').onclick=function(){

        var opacity=1;
        //按钮被点击
        var timeId=setInterval(function(){
            opacity--;
            if(opacity<=0){
                clearInterval(timeId);
            }
            my$('dv').style.opacity=opacity/10;

        },2000);
    };
</script>

div变宽：

<body>
    <div id="dv"></div>
    <input type="button" name="" value="变宽" id="btn" >
</body>
<script src="xiec.js"></script>
<script>
    my$('btn').onclick=function(){

        var width=300;
        //按钮被点击
        var timeId=setInterval(function(){
            width+=10;
            if(width>=900){
                clearInterval(timeId);
            }
            my$('dv').style.width=width+"px"

        },200);
    };
</script>

案例：移动元素

<body>
    <div id="dv"></div>
    <input type="button" name="" value="移动到400" id="btn1" >
    <input type="button" name="" value="移动到800" id="btn2" >
</body>
<script src="xiec.js"></script>
<script>
    my$('btn1').onclick=function(){ 

        var timeId=setInterval(function(){
            //获取当前位置
            var current=my$('dv').offsetLeft;//数字类型，没有px
            //div每次移动多少像素
            var step=10;
            //每次移动后的距离
            current+=step;
            //判断当期那移动后的位置是否到达目标位置
            if(current<=400){
                my$('dv').style.left=current+"px";
            }else{
                //清除定时器
                clearInterval(timeId);
            }

        },20);
    };
    my$('btn2').onclick=function(){

        var timeId=setInterval(function(){
            //获取当前位置
            var current=my$('dv').offsetLeft;//数字类型，没有px
            //div每次移动多少像素
            var step=10;
            //每次移动后的距离
            current+=step;
            //判断当期那移动后的位置是否到达目标位置
            if(current<=800){
                my$('dv').style.left=current+"px";
            }else{
                //清除定时器
                clearInterval(timeId);
            }

        },20);
    };
</script>

封装动画：

<style >
        *{
            padding: 0%;
            margin:0%;
        }
        #dv{
            width: 200px;
            height: 100px;
            background-color: pink;
            /*注意点：需要加position，使div脱离文本流*/
            position: absolute;
            margin-top: 20px;
        }

    </style>
    
    
</head>
<body>
    <div id="dv"></div>
    <input type="button" name="" value="移动到400" id="btn1" >
    <input type="button" name="" value="移动到800" id="btn2" >
</body>
<script src="xiec.js"></script>
<script>

    my$('btn1').onclick=function(){ 
        animate(my$('dv'),400);
    };

    my$('btn2').onclick=function(){
        animate(my$('dv'),800);
    };

    //动画函数：
    function animate (element,target){
        //先清理定时器
        clearInterval(element.timeId);//------------->是element.timeId;

        element.timeId=setInterval (function(){
            //获取当前位置
            
            var current=element.offsetLeft;//数字类型，没有px
            //div每次移动多少像素

            var step=10;
            step=current<target?step:-step;
            //每次移动后的距离
            current+=step;
            //判断当期那移动后的位置是否到达目标位置
            if(Math.abs(target-current)>Math.abs(step)){
                element.style.left=current+"px";
            }else{
                //清除定时器
                clearInterval(timeId);
                element.style.left=target+"px";
            }

        },20);
    }
</script>

简单的轮播图

QQ图片20190728112220.png

html:


<body>
<!--布局：-->
<!--1.图片，用于轮播展示-->
<!--2.左右箭头，用于切换图片-->
<!--3.圆点，用于显示正在展示第几张图片，也可以通过点击进行图片跳转-->
<div class="exterior_container">
    <div class="carousel_container type_area block_mediate">
        <ul class="carousel">
            <li class="carousel_item active"><img src="./image/1.jpg" alt="" class="src"></li>
            <li class="carousel_item"><img src="./image/2.jpg" alt="" class="src"></li>
            <li class="carousel_item"><img src="./image/3.jpg" alt="" class="src"></li>
            <li class="carousel_item"><img src="./image/4.jpg" alt="" class="src"></li>
            <li class="carousel_item"><img src="./image/5.jpg" alt="" class="src"></li>

        </ul>
        <button class="left"><</button>
        <button class="right">></button>
        <ul class="points block_mediate">
            <li class="points_item active" data-index="0"></li>
            <li class="points_item" data-index="1"></li>
            <li class="points_item" data-index="2"></li>
            <li class="points_item" data-index="3"></li>
            <li class="points_item" data-index="4"></li>
        </ul>
    </div>
</div>
</body>
<!--动画：-->
<!--1.点击左右可以向左或者向右转换图片。-->
<!--2.点击下方圆点可以跳转到某一张图片-->
<!--3.假设显示第1张图片，那么第一个圆点的颜色与其他圆点颜色不一样。-->
<script src="lunbotu.js"></script>
</html>

css:

.type_area{
    width: 1000px;
    overflow: auto;
}
img{
    height: 300px;
    width: 600px;
}
li{
    list-style: none;
}
.block_mediate{
    margin: 0 auto;
}
body,div,html,ul,li,button{
    padding: 0;
    margin: 0;
}
.carousel_container{
    position: relative;
    height: 300px;
    width: 600px;
    overflow: hidden;
}
/*.carousel{*/
    /**/

/*}*/
.carousel_item{
    height: 100%;
    width: 100%;
    font-size: 60px;
    font-family: Consolas;
    color:wheat;
    position: absolute;
    line-height: 300px;
    text-align: center;
    opacity: 0;
    transition:all 1s;
}
.carousel_item:nth-child(1){
    background-color: orange;
}
.carousel_item:nth-child(2){
    background-color: purple;
}
.carousel_item:nth-child(3){
    background-color: yellowgreen;
}
.carousel_item:nth-child(4){
    background-color: brown;
}
.carousel_item:nth-child(5){
    background-color: darkgoldenrod;
}

button{
    width: 60px;
    height: 60px;
    border:none;
    background-color: rgba(255,255,255,0);
    font-size: 40px;
    position: absolute;
    top:120px;
    z-index: 1230;
}
button:hover{
    background-color: rgba(1, 1, 1, 0.5);
    cursor: pointer;
}

.right{
    right:0px;
}
.left{
    left:0px;
}
.points{
    height: 30px;
    width: 200px;
    background-color: rgba(29, 22, 19, 0.2);
    position: absolute;
    bottom: 20px;
    left: 200px;
    border-radius: 10px 10px 10px 10px ;
    z-index: 1230;
}
.points_item{
    height: 15px;
    width: 15px;
    background-color: wheat;
    float: left;
    border-radius: 50%;
    margin-right: 20px;
    margin-top: 7px;

}
.points_item:nth-child(1){
    margin-left: 22px;
}
.points_item:hover{
    cursor: pointer;
}
.carousel_item.active{
    z-index: 123;
    opacity: 1;

}
.points_item.active{
    background-color: black;
}

js:

// 获取图片组。
// 获取按钮*2。
// 获取圆点组。
let imgGroup=document.getElementsByClassName('carousel_item');
let btnLeft=document.getElementsByClassName('left')[0];
let btnRight=document.getElementsByClassName("right")[0];
let pointGroup=document.getElementsByClassName("points_item");

// console.log(imgGroup, btnLeft,btnRight,pointGroup);获取的元素是正确的
let index=0;//初始化一个索引值，用于切换图片。
let clearActive=function(){
    for(let i=0;i<imgGroup.length;i++){
        imgGroup[i].className="carousel_item";
        pointGroup[i].className="points_item";
    }
}
let goRight=function () {
    clearActive();
    if(index<4){index++;}
    else {index=0;}
    imgGroup[index].className="carousel_item active";
    pointGroup[index].className="points_item active";
}
let goRight_auto=goRight;
btnRight.addEventListener("click",goRight);

let goLeft=function () {
    clearActive();
    if(index>0){index--;}
    else {index=4;}
    imgGroup[index].className="carousel_item active";
    pointGroup[index].className="points_item active";
}

btnLeft.addEventListener("click",goLeft);


setInterval(function () {
    goRight_auto();
},5000);

let carouselContainer=document.getElementsByClassName("carousel_container")[0];
for(let i=0;i<pointGroup.length;i++){
    pointGroup[i].addEventListener("click",function(){
        index=this.getAttribute("data-index")-1;
        goRight();
    })
}


carouselContainer.addEventListener('mouseover',function () {
    goRight_auto=function(){};
});
carouselContainer.addEventListener('mouseleave',function () {
    goRight_auto=goRight;
});

offset系列：

QQ图片20190728104225.png

QQ图片20190728104749.png

document获取事件

QQ图片20190728105443.png

图片跟着鼠标飞：

<style >
        *{
            padding: 0%;
            margin:0%;
        }
        img{
            position: absolute;
        }

    </style>
    
    
</head>
<body>
    <img src="./image/1.jpg" id="im">
</body>
<script src="xiec.js"></script>
<script>
    //鼠标在页面中移动，图片跟着鼠标移动
    document.onmousemove=function(e){
        //鼠标的移动的横纵坐标
        //可视区域的横坐标
        //可视区域的纵坐标
        my$('im').style.left=e.clientX+"px";
        my$('im').style.top=e.clientY+"px";
    }
</script>

JS-WEB-API-Day5

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读