zoukankan      html  css  js  c++  java
  • 小方块靠着浏览器运动

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    <style>
    *{margin: 0;padding: 0;}
    #div1{
    100px;
    height:100px;
    background-color: #00FFFF;
    position: absolute;
    z-index: 3;
    }
    button{
    margin: 100px auto;
    margin-left: 500px;
    font-size: 30px;
    height: 100px;
    200px;
    }
    </style>
    </head>
    <body>
    <div id="div1"></div>
    <button type="button">点击停止</button>
    </body>
    <script type="text/javascript">
    var div = document.getElementById('div1');
    var btn = document.querySelector("button");
    var timer;
    var W = document.documentElement.clientWidth - div.offsetWidth ;
    var H = document.documentElement.clientHeight - div.offsetHeight;
    btn.onclick = ()=>{
    clearInterval(timer)
    }
    step = 10;
    div.onclick =()=>{
    clearInterval(timer)
    timer = setInterval(()=>{
    if(div.offsetTop <=0 && div.offsetLeft >= 0){
    div.style.left = div.offsetLeft + step + 'px';
    if(parseInt(div.style.left) >= W){
    div.style.left = W +'px'
    }
    }
    if(parseInt(div.style.left) >= W && div.clientTop == 0 ){
    div.style.top = div.offsetTop +step + "px";
    if(parseInt(div.style.top) >= H){
    div.style.top = H +'px'
    div.style.left = W +'px'
    }
    console.log(div.offsetLeft ,W)
    }
    if(div.offsetTop == H && div.offsetLeft <= W ){
    div.style.left = div.offsetLeft - step + 'px';
    if(parseInt(div.style.left) <= 0){
    div.style.left = 0 ;
    }
    }
    if(div.offsetTop <= H && parseInt(div.style.left) <= 0){
    div.style.top = div.offsetTop - step + "px";
    if(parseInt(div.style.top) <= 0){
    div.style.left = 0
    }
    }

    },30)
    }
    </script>
    </html>

  • 相关阅读:
    windows C++ 网络编程
    typedef void (*Fun) (void) 的理解——函数指针——typedef函数指针
    获取屏幕分辨率(C/C++)
    随手记
    【SQLite】可视化工具SQLite studio
    C++宽窄字符串转换
    并发编程1——一个简单的多线程程序
    css中:after和:before的作用及使用方法
    uniapp—App—自定义导航栏
    vue—封装无数据时默认展示组件
  • 原文地址:https://www.cnblogs.com/CH-cnblogs/p/13374361.html
Copyright © 2011-2022 走看看