网页常见特效四

发表于 | 分类于

取整函数，动画

三个取整函数

1
2
3
4
5
6
7
8
9
10
11
12
13
console.log(Math.ceil(1.01))
console.log(Math.ceil(1.9))
console.log(Math.ceil(-1.3))
//floor  地板   向下取整
console.log(Math.floor(1.01))
console.log(Math.floor(1.9))
console.log(Math.floor(-1.3))
// 四舍五入
console.log(Math.round(1.01))
console.log(Math.round(1.5))
//0-1随机数
console.log(Math.random());
console.log(Math.random()*10);

缓动动画原理

html

1
2
<button id="btn">开始</button>
<div id="box"></div>

css

1
2
3
4
5
6
7
8
9
10
11
*{
    padding: 0;
    margin: 0;
}
div{
    width: 100px;
    height: 100px;
    background-color: pink;
    position: absolute;
    left: 0;
}

script

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var btn = document.getElementById("btn");
var box = document.getElementById("box");
var target = 500;   //终点
var timer = null;  //定时器
btn.onclick = function(){
    timer = setInterval(function(){
        var step = (target - box.offsetLeft)/10;
        //(500-0)/10=50
        //(500-50)/10=45
        //(500-95)/10=40.5
        console.log(step);
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
//            取整，防止最后一步不为0
        box.style.left = box.offsetLeft + step + "px";
        if(box.offsetLeft == target){
            clearInterval(timer);
            alert("到目标了")
        }
    },30)
}

封装缓动动画

html

1
2
3
<button id="btn200">200</button>
<button id="btn400">400</button>
<div id="div"></div>

css

1
2
3
4
5
6
7
8
9
10
11
*{
    padding: 0;
    margin: 0;
}
#div {
    width: 100px;
    height: 100px;
    background-color: pink;
    position: absolute;
    left: 0;
}

script

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var btn200 = document.getElementById("btn200");
var btn400 = document.getElementById("btn400");
var div = document.getElementById("div");
btn200.onclick = function(){
    Animate(div,200)
};
btn400.onclick = function(){
    Animate(div,400)
};
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.offsetLeft + step + "px";
        if(obj.offsetLeft == obj.target){
            clearInterval(obj.timer);
            alert("到终点了");
        }
    },30)
}

仿问css属性

只能打印出行内样式,因为style是变量的一个属性
html

1
<div id="box" style="left:30px;width: 100px;height: 150px;"></div>

css

1
2
3
4
5
6
7
8
div {
    width: 100px;
    height: 100px;
    background-color: pink;
    left: 10px;
    position: absolute;
    top: 20px;
}

script

1
2
3
4
5
var box =document.getElementById("box");
console.log(box.style.left);
console.log(box.style["left"]);
可以打印外联的样式
console.log(window.getComputedStyle(box,null).left)

封装

1
2
3
4
5
function fn(attr){
    console.log(box.style[attr]);
}
fn("height");
fn("width");

json遍历 对象

1
2
3
4
5
6
7
8
9
10
var jie = {
    name: "jie",
    age: 18,
    school: "小学"
}
var item;
for(item in jie){
    console.log(item);       //可以得到的是  属性
    console.log(jie[item])   //得到 是属性的  值
}

in 运算符 对象

in 可以用用来判断 json 里面有没有某个属性

1
2
3
4
5
6
7
8
9
var json = {name: "刘德华",age : 55};
if("age" in json)
    {
        console.log("yes");  // 返回的是 yes
    }
    else
    {
        console.log("no");
    }
1
2
3
4
5
6
7
8
if("andy" in json)
{
    console.log("yes");  // 返回的是 yes
}
else
{
    console.log("no");
}

for in 数组

1
2
3
4
5
6
7
8
9
var arr = ["a","b","c"];
for(var i=0;i<arr.length;i++){
    console.log(arr[i]);    //得到的是数组的值
}
for(var k in arr){
    console.log(k);       //得到的是数组的索引号
    console.log(arr[k]);  //得到的是值
}

对象，数组 json

对象形式的json

1
2
3
4
5
6
7
var json1 = {
    width: 100,
    height: 200
}
console.log(json1.width)   //100
console.log(json1.height)  //200
console.log(json1.length);  //undefined

数组形式的json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var json2 = [
    {
        name: "jie",
        age: 18
    },
    {
        name: "biao",
        age: 20
    }
]
console.log(json2.name);    //undefined
console.log(json2.age);     //undefined
console.log(json2.length);  //2
for(var i=0;i<json2.length;i++){
    console.log(json2[i].name);  //jie  biao
    console.log(json2[i].age);   //18   20
    console.log(json2[i].length); //undefined undefined
}