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

保留小数点位数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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选择器

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

id class 标签 通用选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
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);
}
}

使用我们封装的$选择器

1
2
3
4
5
6
7
$("#demo").style.backgroundColor = "purple";
$("#last").style.backgroundColor = "purple";
var test = $(".one");
for(var i=0;i<test.length;i++)
{
test[i].style.backgroundColor = "blue";
}

转换大小写

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


Big
Small

匀速动画

setInterval方法

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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>

减速动画

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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)
}

动画封装函数

匀速动画

1
2
3
4
5
6
7
8
9
10
11
12
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)
}

缓动动画

1
2
3
4
5
6
7
8
9
10
11
12
13
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)
}