zoukankan      html  css  js  c++  java
  • 定时器的应用(二)

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
    
            #box1 {
                 100px;
                height: 100px;
                background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
                position: absolute;
                left: 0;
            }
        </style>
    
        <script type="text/javascript">
    
            window.onload = function () {
                // 获取box1
                var box1 = document.getElementById("box1");
                // 获取btn01
                var btn01 = document.getElementById("btn01");
                // 获取btn02
                var btn02=document.getElementById("btn02");
    
               /*  // 定义一个变量,用来保存定时器的标识
                var timer; */
                // 点击按钮以后,使box1向右移动(left值增大)
                btn01.onclick = function () {
                    // box1.style.left="200px";//点击按钮 向右移动200px
                    move(box1, 800, 10);
                   
                };
    
                // 点击按钮以后,使box2向左移动(left值减小)
                btn02.onclick = function () {
                   
                    move(box1,0,10);
                };
            };
    
            // 定义一个变量,用来保存定时器的标识
            var timer;
    
            // 尝试创建一个可以执行简单动画的函数
            /* 
                参数:
                 obj:要执行动画的对象
                 target:执行动画的目标位置
                 speed:移动的速度(正数向右移动,负数向左移动)
            */
            function move(obj,target,speed){
    
                
                
                 // 关闭上一个定时器
                clearInterval(timer);
    
                // 获取元素目前的位置
                var current = parseInt(getStyle(obj, "left"));
    
    
                // 判断速度的正负值
                // 如果从0向800移动,则speed为正
                // 如果从800向0移动,则speed为负
                if (current>target)
                // 此时速度我负值
                speed=-speed;
                // 开启一个定时器,用来执行动画效果
                timer = setInterval(function () {
                    // 获取box2的原来的left值
                    var oldValue = parseInt(getStyle(obj, "left"));
    
                    // 在旧值的基础上增加
                    var newValue = oldValue + speed;
    
                    // 判断newValue是否大于800
                    // 从800向0移动
                    // 向左移动时,需要判断newValue是否小于target
                    // 向右移动时,需要判断newValue是否大于target
                    if ((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {
                        newValue = target;
                    }
    
                    // 将新值设置给box1
                    obj.style.left = newValue + "px";
    
                    // 当元素移动到0px时,使其停止执行动画
                    if (newValue == target) {
                        // 达到目标,关闭定时器
                        clearInterval(timer);
                    }
    
    
                }, 30);
            }
    
    
            /* 
                  定义一个函数,用来获取指定元素的当前的样式
                  参数:
                      obj 要获取样式的元素
                      name 要获取的样式名
              */
    
            function getStyle(obj, name) {
    
                if (window.getComputedStyle) {
                    // 正常浏览器的方式,具有getComputedStyle()方法
                    return getComputedStyle(obj, null)[name];
                } else {
                    // IE8的方式,没有getComputedStyle()方法
                    return obj.currentStyle[name];
                }
    
                // return window.getComputedStyle? getComputedStyle(obj, null)[name]: obj.currentStyle[name];
    
            }
        </script>
    </head>
    
    <body>
    
        <button id="btn01">点击按钮以后box1向右移动</button>
        <button id="btn02">点击按钮以后box1向左移动</button>
        <br /><br />
        <div id="box1"></div>
        <div style="0;height:1000px;border-left:1px black solid; position:absolute;left:800px;top:0;"></div>
    </body>
    
    </html>

    点击向右按钮

    点击向左按钮

  • 相关阅读:
    5-python基础—获取某个目录下的文件列表(适用于任何系统)
    Automated, Self-Service Provisioning of VMs Using HyperForm (Part 1) (使用HyperForm自动配置虚拟机(第1部分)
    CloudStack Support in Apache libcloud(Apache libcloud中对CloudStack支持)
    Deploying MicroProfile-Based Java Apps to Bluemix(将基于MicroProfile的Java应用程序部署到Bluemix)
    Adding Persistent Storage to Red Hat CDK Kit 3.0 (在Red Hat CDK Kit 3.0添加永久性存储)
    Carve Your Laptop Into VMs Using Vagrant(使用Vagran把您笔记本电脑刻录成虚拟机)
    使用Python生成一张用于登陆验证的字符图片
    Jupyter notebook的安装方法
    Ubuntu16.04使用Anaconda5搭建TensorFlow使用环境 图文详细教程
    不同时区的换算
  • 原文地址:https://www.cnblogs.com/hr-7/p/14235140.html
Copyright © 2011-2022 走看看