Web前端基础(7)JavaScript小案例

保留小数点位数

var PI = 1213.141592653;   //定义常量要大写
var str = PI + "";   //将数字转换为字符串
var index = str.indexOf(".");  //返回字符串中.的位置
console.log(index);

//方式一
console.log(str.substr(0, index+3));  

//方式二
console.log(str.substr(0, str.indexOf(".") + 3));

//方式三
console.log(parseInt(PI * 100) / 100);
//1213.141592653 * 100  =  121314.1592653   取整   121314  /100

//方式四
console.log(PI.toFixed(2));	

符号的封装

id选择器

function $(id) {return document.getElementById(id)}  //id选择器

id class 标签 通用选择器

   function getClass(classname)  
   {
       //判断是否支持
       if(document.getElementsByClassName)
       {
           return document.getElementsByClassName(classname);
       }
       var arr = []; //用于返回 数组
       var dom = document.getElementsByTagName("*");
       for(var i=0;i<dom.length;i++)  // 遍历所有的 盒子
       {
           var txtarr = dom[i].className.split(" "); // 分割类名 并且 转换为数组
           //  ["demo","test"];
           for(var j=0;j<txtarr.length;j++)  // 遍历 通过类名分割的数组
           {
               if(txtarr[j] == classname)
               {
                   arr.push(dom[i]); // 我们要的是 div
               }
           }
       }
       return arr;
   }

    // $("#demo")   $(".one")   $("div")
    //封装自己的$
    function $(str) {
        var s = str.charAt(0);   //  一个s 的变量 存放是 符号  #  .
        var ss = str.substr(1);  // demo
        switch(s)
        {
            case "#":
                return document.getElementById(ss);
            break;
            case ".":
                return getClass(ss);
            break;
            default :
                return document.getElementsByTagName(str);
        }
    }

使用我们封装的$选择器

$("#demo").style.backgroundColor = "purple";
$("#last").style.backgroundColor = "purple";
var test = $(".one");
for(var i=0;i<test.length;i++)
{
    test[i].style.backgroundColor = "blue";
}

转换大小写

 $("btn").onclick = function(){
    $("big").innerHTML = $("txt").value.toUpperCase();
    $("small").innerHTML = $("txt").value.toLowerCase();
}

Big Small

匀速动画

setInterval方法

setInterval(code,millisec[,"lang"])

setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。

setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

<script>
    var btn = document.getElementById("btn");  //点击开始动画
    var box = document.getElementById("bOX");  //移动的盒子
    var num = 0;
    var timer = null;
    btn.onclick = function() {
        timer = setInterval(function(){
            num++;
            if(num >=500)
            {
                clearInterval(timer);
                num = 0;
            }
            else
            {
                box.style.left = num + "px";
            }
        },10)
    }
</script>

减速动画

var btn = document.getElementById("btn");
var box = document.getElementById("bOX");
var timer = null;
var leader = 0;
var target = 500;
btn.onclick = function() {
    timer = setInterval(function(){
        leader = leader + (target - leader )/10;
        if(leader - 1 > target){
           clearInterval(timer);
           leader = 0;
        }
        else
        {
           box.style.left = leader + "px"; 
        }
    },30)
}

动画封装函数

匀速动画

function animate(obj,target){
     var speed = obj.offsetLeft < target ? 5 : -5;  // 用来判断应该 + 还是 
     obj.timer = setInterval(function() {
         var result = target - obj.offsetLeft; // 因为他们的差值不会超过5
         obj.style.left = obj.offsetLeft + speed + "px";
         if(Math.abs(result)<=5)  // 如果差值不小于 5 说明到位置了
         {
             clearInterval(obj.timer);
             obj.style.left = target + "px";  // 有5像素差距  我们直接跳转目标位置
          }
      },30)
}

缓动动画

function animate(obj,target){  //  第一个参数 动谁   第二个参数  动多少
     clearInterval(obj.timer);
     obj.timer = setInterval(function() {
           // 计算步长   动画的原理    盒子本身的位置  +  步长
           var step = (target - obj.offsetLeft) / 10;  // 步长
            step =  step > 0 ? Math.ceil(step) : Math.floor(step);  //  取整步长
            // obj.style.left = 盒子本身的位置  +  步长
            obj.style.left = obj.offsetLeft + step + "px";
            if(obj.offsetLeft == target){
                clearInterval(obj.timer);
            }
      },30)
}