zoukankan      html  css  js  c++  java
  • 窗口属性 和DOM 元素尺寸位置 及习题加强

    可视窗口大小;window.innerWidth;/innerHeight

    窗口滚动条距离
    window.pageXOffset;pageYoggset


    dom(元素).offsetWidth//求可视元素的宽高;
    dom.offsetHeigth//
    dom.offsetLeft//返回相对于第一个有定位的父级的距离
    dom.offsetTop//

    window.scroll()/scrollTo()  //跳动到传入数值的地方;
    scrollBy()   //在之前的基础做累加;

    小说阅读器

    <div style="100px;height:100px;background-color:orange;
    color:green;font-size:40px;line-height:100px;text-align:center;position: fixed;bottom:200px;right:50px;
    border-radius:50%; opacity: 0.5;">开始</div>
    <div style="100px;height:100px;background-color:red;
    color:#fff;font-size:20px;text-align:center;position: fixed;bottom:100px;right:50px;
    border-radius:50%; opacity: 0.5;">暂停</div>
    <script type="text/javascript">
    
    var star =document.getElementsByTagName('div')[1];
    var stop=document.getElementsByTagName('div')[2];
    var timer=0;
    var kay=true;
    star.onclick=function(){
        if(kay){
        timer=setInterval(function(){
            window.scrollBy(0,10)
    
    
        },100);
        kay=flase;
        }
    }
    stop.onclick=function()
    {
        clearInterval(timer); 
        kay=true;
    
    }
    </script>
  • 相关阅读:
    luogu2253 好一个一中腰鼓!
    luogu2948 滑雪课
    luogu1556 幸福的路
    luogu1900 自我数
    luogu1632 点的移动
    luogu1999 高维正方体
    树状数组模板
    杜教筛
    [比赛|考试] 9月第一周的考试
    历年NOIP真题总结
  • 原文地址:https://www.cnblogs.com/zhangjiaqi123/p/10475942.html
Copyright © 2011-2022 走看看