2017-03-08 JS 学习笔记

定时器的了解

• 什么是定时器
  作用就是在指定时间间隔来执行函数
• 格式1
  setTimeout(参数1，参数2);
  只执行一次
  参数1：函数，函数名称
  参数2：指定事件（单位是毫秒）
• 格式2
  setInterval(参数1，参数2)
  参数1：函数，函数名称
  参数2：指定事件（单位是毫秒）
  1s = 1000ms;

    function print()
     {
     console.log("打印了");
     }
     // 定义了一个定时器
     //    setTimeout(print,2000);
     var timer = setInterval(print,1000);

     // 得到对应的标签
     var btn = document.getElementById("btn");
     btn.onclick = function () {
     clearInterval(timer);
     }

三秒后显示

var btn = document.getElementById("btn");
btn.conclick = function(){
        setTimeout(function(){
                alert("3s");
        },3000);
}

逝去的时间

//建立函数方便使用 id 获取标签
function $(id){
        return document.getElementById(id)
}

var btn = $("btn");
var input = $("text");
btn.onclick = function(){
        setTimeout(function(){
                  input.value = "2s";
        },2000)
        setTimeout(function(){
                  input.value = "4s";
        },2000)
        setTimeout(function(){
                  input.value = "6s";
        },2000)
}

无限循环

function $(id){
        return document.getElementById(id)
}
var btn = $("btn");
var input = $("text");
var number = 0;
btn.onclick = function(){
        setInterval(function(){
                  input.value = number++;
        },1000)
}

匀速动画

 function $(id) {return document.getElementById(id)}
var btn = $("btn");
var div = $("btn");
var step = 0;
var timer = null;
btn.onclick = function(){
        clearInterval(timer);
        timer = setInterval(function()){
                  step += 34 ;
                  if(step > 600){
                       clearInterval(timer);
                       step = 600;
                  }
                  div.style.marginleft = step + "px";
                  div.innerHTML = step;
        },30)
}

减速动画

 function $(id) {return document.getElementById(id)}
var btn = $("btn");
var div = $("box"):
var timer = null;
var leader = 0;
var target = 600;
btn.onclick = function(){
        clearInterval(timer);
        timer = setInterval(function(){
                 leader -= leader + (target - leader)/20;
                  if(Math.round(leader)) == target){
                  clearInterval(timer);
                  leader = target; 
                  div.style.marginleft = leader;       
                  } 
        },30)
}

数学函数

• 四舍五入

var num = 12.34;
Math.round(num);

• 随机数

//Math.random() 是取0~1的随机数
var num = 0;
setInterval(function(){
        num = parseInt(Math.random()*10);                
},1000)