计时器/返回顶部/碰壁反弹/拖拽盒子_计时器返回顶部-CSDN博客

本文链接：https://blog.csdn.net/lizixuan2001/article/details/121685709

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        header{
            height: 400px;
            width: 300px;
            background-color: rgb(235, 149, 140);
        }
        .btn{
            width: 200px;
            height: 50px;
            background-color: rgb(202, 250, 114);
            margin: 10px 45px;
            border-radius: 10px;
            font-size: 22px;
        }
        .time{
            height: 100px;
            width: 200px;
            font-size: 40px;
            line-height: 100px;
            margin: 5px 60px;
        }
    </style>
</head>
<body>
    <header>
        <div class="time">
            <span>00</span>
            <span>00</span>
            <span>00</span>
        </div>
        <div><button class="btn">开始</button></div>
        <div><button class="btn">暂停</button></div>
        <div><button  class="btn">归零</button></div>
    </header>
</body>
</html>
<script>
    function add0(num){
        return num>=10?num:"0"+num
    }
    var start = document.querySelectorAll("button")[0]
    var pause = document.querySelectorAll("button")[1]
    var zero = document.querySelectorAll("button")[2]
    var h = document.querySelectorAll("span")[0]
    var m = document.querySelectorAll("span")[1]
    var s = document.querySelectorAll("span")[2]

    var num = 0
    var timer
    start.addEventListener("click",function(){
        clearInterval(timer)
        timer = setInterval(function(){
            num++;
            s.innerHTML = add0(num)
            //小时向下取整
            var hover = add0(Math.floor(num/60/60))
            var minutes = add0(Math.floor(num / 60) % 60)
            var second  = add0(num % 60);
            h.innerHTML = hover;
            m.innerHTML = minutes;
            s.innerHTML = second;
        },1)
        pause.addEventListener("click",function(){
            clearInterval(timer)
        })
        zero.addEventListener("click",function(){
            // clearInterval(timer)
            h.innerHTML = "00";
            m.innerHTML = "00";
            s.innerHTML = "00";
        })
    })
</script>

返回顶部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>返回顶部</title>
    <style>
        body{
            background-color: rgba(250, 128, 114, 0.425);
            /* position: relative; */
        }
        li{
            font-size: 40px;
        }
        img{
            width: 80px;
            position: fixed;
            right: 20px;
            bottom: 20px;
            display: none;
        }
    </style>
</head>
<body>
    <ul>
        <li>1111111111111111111111</li>
        <li>2222222222222222222222222222222</li>
        <li>33333333333333333333333333333333333333</li>
        <li>1111111111111111111111</li>
        <li>222222222222222222222222222222222222</li>
        <li>33333333333333333333333333333333333333</li>
        <li>1111111111111111111111</li>
        <li>222222222222222222222222222222222</li>
        <li>33333333333333333333333333333333333333333</li>
        <li>1111111111111111111111</li>
        <li>222222222222222222222222222222222222222333</li>
        <li>1111111111111111111111</li>
        <li>2222222222222222222222222222222222222</li>
        <li>3333333333333333333333333333333333</li>
        <li>1111111111111111111111</li>
        <li>222222222222222222222222</li>
        <li>333333333333333333333333333333333</li>
    </ul>
    <img src="./下载.jpg" alt="">
</body>
</html>
<script>
    var img = document.querySelector("img")
    var timer
    img.onclick = function(){
        clearInterval(timer)
        timer = setInterval(function(){
            document.documentElement.scrollTop--
            document.body.scrollTop--
        },1)
    }
    window.onscroll = function(){
        var event = event || window.event
        // console.log(event);
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
        if(scrollTop>200){
            document.querySelector("img").style.display="block"
        }
        if(scrollTop<=0){
            clearInterval(timer)
            document.querySelector("img").style.display="none"
        }
    }
</script>

碰壁反弹

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>碰壁反弹</title>
    <style>
        header {
        width: 500px;
        height: 400px;
        position: relative;
        border: 15px solid rgb(221, 103, 123);
    }

    div {
        width: 50px;
        height: 50px;
        top: 0;
        left: 0;
        border-radius: 50%;
        position: absolute;
        background-color: yellow;
    }
    button{
        width: 100px;
        height: 60px;
        margin: auto;
        font-size: 30px;
    }
    </style>
</head>
<body>
    <header>
        <div></div>
    </header>
    <button>开始</button>
    <button>暂停</button>
</body>
</html>
<script>
    var header = document.querySelector("header")
    var div = document.querySelector("div")
    var timer
    //初始值
    var x = 0;
    var y = 0;
    var addX = true;
    var addY = true;
    document.querySelector("button").onclick = function(){
        document.querySelectorAll("button")[1].disabled = false;
        this.disabled = true
        //临界值 盒子宽度 - 小球的直径
        var xMax = header.scrollWidth - div.offsetWidth;
        var yMax = header.scrollHeight - div.offsetHeight;
        //方向
        
        timer = setInterval(function(){
           
            //规定一个初始速度还有方向
            if(addX){
                x++
                //判断警戒值
                if(x>=xMax){
                    //此时水平方向达到最大值，该更改方向
                    addX = false
                }else{
                    //水平方向赋值
                     div.style.left = x + "px"
                }
            }else{
                // 更改方向
                x--;
                if(x<=0){
                    //此时水平方向达到最大值，该更改方向
                    addX = true
                }else{
                    //水平方向赋值
                    div.style.left = x + "px"
                }
            }
            if(addY){
                y++;
                if(y>=yMax){
                    addY = false
                }else{
                    div.style.top = y + "px"
                }
            }else{
                y--;
                if(y<=0){
                    addY = true
                }else{
                    div.style.top = y + "px"
                }
            }
        },1)
    }
    document.querySelectorAll("button")[1].onclick = function(){
        document.querySelector("button").disabled = false;
        this.disabled = true
        clearInterval
    }
</script>

拖拽盒子

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拖拽盒子</title>
    <style>
        header {
            width: 600px;
            height: 500px;
            margin: auto;
            position: relative;
            border: 20px solid rgb(221, 103, 123);
        }

        div {
            width: 50px;
            height: 50px;
            top: 0;
            left: 0;
            position: absolute;
            background-color: yellow;
        }
    </style>
</head>

<body>
    <header>
        <div></div>
    </header>
</body>

</html>
<!-- <script>
    var inner = document.querySelector("div")
    var outer = document.querySelector("header")
    var leftObj = 0;
    var topObj = 0;
    //给里面的盒子绑定鼠标按下事件
    inner.onmousedown = function (event) {
        // 给document绑定鼠标移动事件
        document.onmousemove = function () {
            // console.log(111111)
            var event = event || window.event;
            leftObj = event.clientX - outer.offsetLeft - outer.clientLeft - inner.clientWidth / 2;
            topObj = event.clientY - outer.offsetTop - outer.clientTop - inner.clientHeight / 2;
            // 判断水平方向的领界值
            var leftMax = outer.clientWidth - inner.clientWidth;
            if (leftObj >= leftMax) {
                leftObj = leftMax;
            }
            if (leftObj <= 0) {
                leftObj = 0;
            }
            // 判断垂直方向的领界值
            var topMax = outer.clientHeight - inner.clientHeight;
            if (topObj >= topMax) {
                topObj = topMax;
            }
            if (topObj <= 0) {
                topObj = 0;
            }
            inner.style.left = leftObj + "px";
            inner.style.top = topObj + "px";
        }
    }
    // 给document绑定鼠标抬起事件
    document.onmouseup = function () {
        // 清除鼠标的移动事件
        document.onmousemove = null;
    }
</script> -->
<script>
    var inner = document.querySelector("div")
    var outer = document.querySelector("header")
    inner.onmousedown = function(){
        document.onmousemove = function(event){
            var event = event || window.event;
            var top = event.clientY - outer.clientTop - outer.offsetTop - inner.offsetHeight/2
            var left = event.clientX - outer.clientLeft - outer.offsetLeft - inner.offsetWidth/2
            var leftMax = outer.scrollWidth - inner.scrollWidth;
            var topMax = outer.scrollHeight - inner.scrollHeight;
            //临界值 为了不出框

            if (top<0){
                top=0
            }else if(top>topMax){
                top = topMax
            }

            if (left<0){
                left=0
            }else if(left >leftMax){
                left = leftMax
            }

            inner.style.top=top+"px"
            inner.style.left=left+"px"
        }
    }
    // console.log(outer.scrollWidth);
    document.onmouseup = function(){
        document.onmousemove = null
    }
</script>