window

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>window</title>
        <style type="text/css">
            body{
                height: 3000px;
            }
            .toTop{
                width: 50px;
                height: 50px;
                background-color: gray;
                color: white;
                line-height: 50px;
                text-align: center;
                transform: rotate(-90deg);
                position: fixed;
                right: 100px;
                bottom: 100px;
                display: none;
            }
            .textDiv{
                width: 100px;
                font-size: 40px;
            }
        </style>
    </head>
    <body>
        <div class="toTop">-></div>
        <div class="textDiv">大肯德基奥数傀儡的航空路撒就打开了撒娇看来大家撒看来大家撒开了大家快来撒大家快来撒打卡上</div>
    </body>
    <script type="text/javascript">
        var toTop=document.querySelector(".toTop");
        window.onload = function () {
            console.log("页面加载完毕");
//          document.write("123");
        }
        
        //页面滑动的时候执行
        window.onscroll = function () {
            console.log("页面滑动了"+document.body.scrollTop);
            if(document.body.scrollTop>=600){
                toTop.style.display="block";
            }else{
                toTop.style.display="none";
            }
        }
        toTop.onclick=function  () {
            document.body.scrollTop=0;
        }
        //窗口大小发生变化的时候执行的方法
        window.onresize=function () {
            console.log(document.body.clientWidth);
        }
    </script>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容