2019-04-12定时器

作者: 果冻_4c9b | 来源:发表于2019-04-18 09:14 被阅读0次

2019-04-12定时器
【每日经济学人】2019-04-12
2017.12.21学习总结
2019-04-12定时器练习题
卖萌的ScalersTalk第四轮新概念朗读持续力训练Day17
javascript笔记6
字字闹
定时器弹框、定时器基本用法、定时器动画、时钟
无标题文章
荆的ScalersTalk第四轮新概念朗读持续力训练Day184

使用定时器是使图片上下移动

 <!DOCTYPE html>
        <html>
      <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        body {
            font-size: 0;
        }

        ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        #box {
            width: 100px;
            border: #636363 10px solid;
            height: 340px;
            overflow: hidden;
            margin: 20px auto;
            position: relative;
        }

        p {
            margin: 0;
            cursor: pointer;
        }

        .top {
            width: 100%;
            height: 20px;
            background: #000000;
            opacity: 0.5;
            position: absolute;
            top: 0;
            color: #FFFFFF;
            text-align: center;
            font-size: 14px;
            font-weight: bold;
        }

        .bottom {
            width: 100%;
            height: 20px;
            background: #000000;
            opacity: 0.5;
            position: absolute;
            bottom: 0;
            color: #FFFFFF;
            text-align: center;
            font-size: 14px;
            font-weight: bold;
        }

        #box ul {
            position: absolute;
            top: 20px;
        }
    </style>
</head>
<body>
    <div id="box">
        <ul>
            <li>a <a href=""><img src="img/练习1/1.jpg"></a></li>
            <li>a <a href=""><img src="img/练习1/2.jpg"></a></li>
            <li>a <a href=""><img src="img/练习1/3.jpg"></a></li>
            <li>a <a href=""><img src="img/练习1/4.jpg"></a></li>
            <li>a <a href=""><img src="img/练习1/5.jpg"></a></li>
            <li>a <a href=""><img src="img/练习1/6.jpg"></a></li>
            <li>a <a href=""><img src="img/练习1/7.jpg"></a></li>
            <li>a <a href=""><img src="img/练习1/8.jpg"></a></li>
            <li>a <a href=""><img src="img/练习1/9.jpg"></a></li>
            <li>a <a href=""><img src="img/练习1/9.jpg"></a></li>
        </ul>
        <p class="top">↑</p>
        <p class="bottom">↓</p>
    </div>
    <script type="text/javascript">
        var oTop = document.getElementsByTagName('p')[0];
        var oBottom = document.getElementsByTagName('p')[1];
        var oUl = document.getElementsByTagName('ul')[0];
        // 获得标签的属性
        function getStyle(obj, attr) {
            return getComputedStyle(obj)[attr];
        }
        var timer = null;
        // 按下定时器使图片改变top值向上移动
        oTop.onmousedown = function() {
            timer = setInterval(function() {
                if (parseInt(getStyle(oUl, 'top')) <= -180) {
                    oUl.style.top = '-180px';
                    clearInterval(timer);
                    return;
                }
                oUl.style.top = parseInt(getStyle(oUl, 'top')) - 10 + 'px';
            }, 50)
        }
        // 下移
        oBottom.onmousedown = function() {
            timer = setInterval(function() {
                if (parseInt(getStyle(oUl, 'top')) >= 20) {
                    oUl.style.top = '20px';
                    clearInterval(timer);
                    return;
                }
                oUl.style.top = parseInt(getStyle(oUl, 'top')) + 20 + 'px';
            }, 50)
        }
    </script>
</body>
</html>

使用按钮控制的div

        <html>
   <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        #box,
        #box1 {
            position: absolute;
            width: 100px;
            height: 100px;
            background: #000000;
            left: 8px;
        }


        #box1 {
            position: absolute;
            top: 150px;
        }
    </style>
    <!-- 导入js方法 -->
    <script src="js/myjs.js" type="text/javascript" charset="utf-8"></script>

</head>
<body>
    <p>
        <button type="button">走</button>
        <button type="button">回来</button>
    </p>
    <div id="box"></div>
    <div id="box1"></div>

    <script type="text/javascript">
        var obtn = document.getElementsByTagName('button')[0];
        var obox = document.getElementById('box');
        var obtn1 = document.getElementsByTagName('button')[1];
        // 点击按钮调用js中的move()方法
        obtn.onclick = function() {
            move(obox, 800, 10, 'left', function() {                    
                move(obox, 400, 10, 'top')
            });
            
            doOpacity(obox,0,0.03,'opacity');
        }
        obtn1.onclick = function() {
            move(obox, 8, 10, 'left');
        }
    </script>
</body>
 </html>

图片切换

<!DOCTYPE html>
  <html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        body {
            background: #7B7B7B;
            font-size: 0;
        }

        h3 {
            margin: 0;

        }

        #box {
            width: 600px;
            height: 399px;
            border: #fff 10px solid;
            margin: 48px auto;
            /* overflow: hidden; */
            position: relative;
        }

        #imgbox {
            width: 1200px;
            height: 100%;
            position: absolute;
            left: 0;
        }

        #text {
            width: 600px;
            position: absolute;
            top: 399px;
            font-size: 14px;
            color: #FFFFFF;
        }

        #text div {
            position: absolute;
            top: 0px;
            background: #000000;
            opacity: 0.6;
            padding: 5px;
        }
    </style>
    <script src="js/myjs.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        window.onload = function() {
            var oContent = document.getElementById('imgbox')
            var aImg = oContent.getElementsByTagName('img');
            var oText = document.getElementById('text');
            var aDiv = oText.getElementsByTagName('div');
            var num = 0;
            var arrImg = ['img/练习3/pic1.jpg',
                'img/练习3/pic2.jpg',
                'img/练习3/pic3.jpg',
                'img/练习3/pic4.jpg',
                'img/练习3/pic5.jpg'
            ]
            aImg[0].src = arrImg[num];
            aImg[1].src = arrImg[num + 1];
            move(aDiv[num], -70, 10, 'top');                
            var timer = setInterval(function() {
                imgTab();
            }, 2000)
            function imgTab() {
                oContent.style.left = 0
                aImg[0].src = arrImg[num];
                move(aDiv[num], 0, 10, 'top');
                num++;
                if (num == arrImg.length) {
                    num = 0;
                }
                //第二张图片出现 
                aImg[1].src = arrImg[num];
                move(aDiv[num], -70, 10, 'top');
                move(oContent, -600, 30, 'left');
            }
        }
    </script>
</head>
<body>
    <div id="box">
        <div id="imgbox">
            <img src="img/练习3/pic1.jpg">
            <img src="img/练习3/pic2.jpg">
        </div>
        <div id="text">
            <div id="">
                <h3>离婚律师 第一集</h3>
                啊大声大声道撒啊的撒 暗暗地aS的ad撒的撒asdsd
                撒旦萨达斯DSA AS打算AaS的a阿瑟das的aD是打算
            </div>
            <div id="">
                <h3>离婚律师 第二级</h3>
                啊大声大声道撒啊的撒 暗暗地aS的ad撒的撒asdsd
                撒旦萨达斯DSA AS打算AaS的a阿瑟das的aD是打算
            </div>
            <div id="">
                <h3>离婚律师 第3集</h3>
                啊大声大声道撒啊的撒 暗暗地aS的ad撒的撒asdsd
                撒旦萨达斯DSA AS打算AaS的a阿瑟das的aD是打算
            </div>
            <div id="">
                <h3>离婚律师 第4级</h3>
                啊大声大声道撒啊的撒 暗暗地aS的ad撒的撒asdsd
                撒旦萨达斯DSA AS打算AaS的a阿瑟das的aD是打算
            </div>
            <div id="">
                <h3>离婚律师 第5集</h3>
                啊大声大声道撒啊的撒 暗暗地aS的ad撒的撒asdsd
                撒旦萨达斯DSA AS打算AaS的a阿瑟das的aD是打算
            </div>
        </div>
    </div>
    <script type="text/javascript">
    </script>
</body>
</html>

js

         //步长的正负，方向    step
          // 判断条件          
          // 目标位置不一样    target
          // 移动元素不一样    obj
          //回调函数          endFn
          function move(obj,target,step,dir,endfn){
              // 清楚定时器防止迭代
              clearInterval(obj.timer);
                // 获取box的left值并且取整数
              var speed = parseInt(getStyle(obj, dir));
              // 判断step的正负
              step=speed<target?step:-step;
              obj.timer = setInterval(function() {
                speed = speed + step;
                // 判断位置到没到目标点,判断根据step判断断正负
                if (speed >=target && step > 0||speed <=target && step < 0 ) {
                    speed = target;
                    clearInterval(obj.timer);
                    endfn && endfn();
                }
                obj.style[dir] = speed + 'px';
              }, 50)  
          }
    // 清楚定时器防止迭代
    //                  clearInterval(obox.timer);
    //              obox.timer = setInterval(function() {
 //                     var speed = parseInt(getStyle(obox, 'left'))
//                  speed = speed + 10;
//                  if (speed >= 800) {
//                      speed = 800;
//                      clearInterval(obox.timer);
//                  }
//                  obox.style.left = speed  + 'px';
//              }, 50)

  function doOpacity(obj,target,step,dir){
              // 清楚定时器防止迭代
              clearInterval(obj.opacity);
                // 获取box的left值并且取整数
              var speed = parseInt(getStyle(obj, dir));
              // 判断step的正负
               step=speed<target?step:-step;
              obj.opacity = setInterval(function() {
                speed = speed + step;
                // 判断位置到没到目标点,判断根据step判断断正负
                if (speed >=target && step > 0||speed <=target && step < 0 ) {
                    speed = target;
                    clearInterval(obj.opacity);
                    
                }
                obj.style[dir] = speed;
              }, 50)  
          }
            function getStyle(obj, attr) {
                return getComputedStyle(obj)[attr];
            }

2019-04-12定时器
使用定时器是使图片上下移动使用按钮控制的div 图片切换 js
【每日经济学人】2019-04-12
2019-04-12 Donald Trump does away with another member of ...
2017.12.21学习总结
下午学习了定时器，定时器分为高级定时器、通用定时器和基本定时器，我们主要研究通用定时器。定时器中断实现步骤:...
2019-04-12定时器练习题
使用按钮移动div 定时器制作的轮播图 myjsp //步长的正负，方向 step// 判断条件// 目标位...
卖萌的ScalersTalk第四轮新概念朗读持续力训练Day17
练习材料： [Day 1660 2019-04-12] L44-2: Speed and comfort By c...
javascript笔记6
定时器-间歇性定时器定时器-延时定时器认识DOM 间歇性定时器var time = window.setInt...
字字闹
2019-04-12 boluanwoxin 字数 10559 · 阅读 0 2019-04-17 08:37 6...
定时器弹框、定时器基本用法、定时器动画、时钟
定时器弹框：定时器基本用法：定时器动画：时钟：
无标题文章
iOS NSTimer使用详解-开启、关闭、移除定时器定时器详解ios定时器关闭定时器NSTimer 1、要使用...
荆的ScalersTalk第四轮新概念朗读持续力训练Day184
20190412 周五 Day184 练习材料：原文[Day 184 2019-04-12] L44-1:...