JS学习笔记105-113

1.定时器。

微信图片_20181226004034.png

2.设置和清除定时器。

<button id="btn1">开启定时器</button>
<button id="btn2">结束定时器</button>

<script>
    window.onload = function () {
        // 1.获取需要的标签
        var btn1 = document.getElementById("btn1");
        var btn2 = document.getElementById("btn2");

        var height = 150, timer = null;
        // 2. 开启定时器
        btn1.onclick = function () {
             // 2.1 设置定时器
            timer = setInterval(function () {
                height += 1;
                console.log("身高是" + height + "cm");
            }, 1000);
        };
        // 3. 结束定时器
        btn2.onclick = function () {
            console.log(timer);
            clearInterval(timer);
        }
    }
</script>

3.倒计时鲜花表白。

    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        body{
            background-color: #000;
            text-align: center;
            padding: 100px;
        }
        #pic{
            display: none;
        }
        #time{
            font-size: 100px;
            color: white;
        }
    </style>
   <div id="time">5</div>
   <img id="pic" src="images/flower.gif" alt="">
<script>
    window.onload = function () {
      var timer =  setInterval(function () {
          $('time').innerText -= 1;
          // 判断
          if( $('time').innerText === "0"){
               // 清除定时器
              clearInterval(timer);
              // 隐藏时间
              $('time').style.display = 'none';
              $('pic').style.display = 'block';
          }
      }, 1000);
        function $(id) {
            return typeof id === "string" ? document.getElementById(id): null;
        }
    };
</script>

4.自定义现在的时间

    var currentDate = new Date();
    console.log(currentDate);
    var nextDate = new Date('2018/08/08 08:17:35');
    console.log(nextDate);
    var preDate = new Date('2017/08/08 08:17:35');
    console.log(preDate);

5.放假倒计时。

微信图片_20181226205307.png

    <div id="time"></div>

    window.onload = function () {
        // 1.获取需要的标签
        var time = document.getElementById('time');
        // 2. 自定义将来的时间
        var nextDate = new Date('2019/03/01 08:17:35');
        // 3. 开启定时器
        setInterval(function () {
            // 4. 获取现在的时间
            var currentDate = new Date();
            // 5. 获取时间戳
            var currentTime = currentDate.getTime();
            var nextTime = nextDate.getTime();
            // 6. 剩下的时间戳
            var allTime = nextTime - currentTime;
            // 7. 把毫秒转成秒
            var allSecond = parseInt(allTime / 1000);
            // 8.转化
            var d = size(parseInt(allSecond / 3600 / 24));
            var h = size(parseInt(allSecond / 3600 % 24));
            var m = size(parseInt(allSecond / 60 % 60));
            var s = size(parseInt(allSecond  % 60));
            // 9. 注入
            time.innerText = "距离放假还有"+ d +"天"+ h +"小时" + m +"分钟"+ s +"秒";
        }, 1000);
        function size(num) {
            return num >= 10 ? num : '0' + num;
        }
    }

6.时钟案例。

window.onload = function () {
        setInterval(function () {
            var date = new Date();
            var millS = date.getMilliseconds();
            var s = date.getSeconds() + millS/1000;
            var m = date.getMinutes() + s/60;
            var h = date.getHours() + m/60;
            $('hour').style.transform = 'rotate('+ h*30 + 'deg)';
            $('minute').style.transform = 'rotate(' + m*6 + 'deg)';
            $('second').style.transform = 'rotate(' + s*6 + 'deg)';
        },10)
    };
    function $(id) {
        return typeof id === 'string'?document.getElementById(id) : null;
    }

7.防止定时器累加（先清除后设置）。

    <div id="box"></div>

    window.onload = function () {
        // 1. 获取需要的标签
        var box = document.getElementById("box");
        var height = 0, timer = null;
        // 2. 监听鼠标进入
        /*先清除定时器,后设置定时器*/
        box.onmouseover = function () {
            // 清除定时器
            clearInterval(timer);
            // 设置定时器
           timer = setInterval(function () {
                height += 1;
                console.log(height);
            }, 1000);
        }
    }

8.长图滚动效果。