• 窗口属性 和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>
  • 相关阅读:
    PHP 魔术常量
    PHP 魔术方法
    php函数serialize()与unserialize()
    10 件有关 JavaScript 让人费解的事情
    windows下安装Python2和Python3共存
    SQL 行转列===列转行
    Redis 分布式锁
    RabbitMQ
    @Autowired
    AOP 日志切面
  • 原文地址:https://www.cnblogs.com/zhangjiaqi123/p/10475942.html
Copyright © 2020-2023  润新知