Day06（三目运算，数组添加和删除，demo 旋转风车）

className 类名

添加类名：元素.className=’main’;
移出类名：元素.className=’’;

index是索引的意思（在JS里面）；

.checked单选按钮选择状态；false表示未选中，true表示选中

三目运算符语法：

当你的代码出现if（…）{…}else{…}的时候；
是，可以，通过，三目运算符来代替的；

表达式？结果1：结果2；

如果表达式结果为真（true），那么返回结果1；
如果表达式结果为假（false），那么返回结果2；

var a=3;
If(a>5){
    Alert(‘a比5大’)
}else{
    Alert(‘a比5小’)
}
a>5?alert(‘a比5大’)：alert(‘a比5小’)；

txt.focus();     自动获取焦点；
this.select();    选中表单内容；
oninput事件：     用户输入时发生的时间；
onchange         下拉菜单事件；
onfocus           获得焦点
onblur           失去焦点

数组添加和删除方法

我们经常要进行变量的更改；
那么我们一个数组，就是多个变量，是不是可以对数组内的变量进行修改；

那么，第一个方法：在数组的末尾添加内容：

var arrr=[1,3,5]
arr.push(0);//在数组的末尾添加

  // 添加完成之后，变成arr=[1,3,5,0]

arr.unshift(0)//在数组的开头添加
    // 添加完成之后，变成arr=[0,1,3,5,0]
    // 添加完成之后，返回数组的新的长度

arr.pop();//删除数组最后一个元素
     // 把数组最后一个元素删除掉了，并且，会把删除掉的值返回回来；
arr.shift() //删除开头第一个

过渡（transition: all 5s;）

CSS的属性，过度，当元素属性发生改变的时候，不会一下子变，而是慢慢变，变得时间由你定
比如我们hover让div变小，一般就直接瞬间变小
加了transition: all 5s;
就会在五秒钟慢慢变小；

demo 旋转风车

结构

<div id="box">
    <div id="a1"></div>
    <div id="a2"></div>
    <div id="a3"></div>
    <div id="a4"></div>
    <button id="btn_left">←</button>
    <button id="btn_right">→</button>
</div>

css样式

*{
    margin: 0;padding: 0;
}
#box{
    width: 500px;
    height: 500px;
    border: 1px solid #cccccc;
    margin: 100px auto;
    position: relative;
}
#box div{
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    transition: all 5s;
}
#a1{
    background-color: pink;
    top: 50px;
    margin-left: -50px;
}
#a2{
    background-color: yellow;
    top: 150px;
    margin-left: -150px;
}
#a3{
    background-color: red;
    top: 250px;
    margin-left: -50px;
}
#a4{
    background-color: blue;
    top: 150px;
    margin-left: 50px;
}
button{
    position: absolute;
    width: 120px;
    height: 50px;
    font-size: 30px;
}
#btn_left{
    left: 0;
    bottom: 0;
}
#btn_right{
    right: 0;
    bottom: 0;
}

js清单

window.onload = function(){
    function $(id){
        return document.getElementById(id);
    }
    var divs = $("box").getElementsByTagName("div");
    var arr = new Array;
    arr[0] = [50,-50];
    arr[1] = [150,-150];
    arr[2] = [250,-50];
    arr[3] = [150,50];
    $("btn_left").onclick = function(){
        var t = arr.pop();   // 删除最后一个
        arr.unshift(t);     // 添加到第一个
        //console.log(t);
        for(var i = 0;i<divs.length;i++){
            //console.log(arr[i]);    //  得到每一个数组
            //console.log(arr[i][0]);   //  得到每一个数组里的第一个值
            divs[i].style.top = arr[i][0]+"px";
            divs[i].style.marginLeft = arr[i][1]+"px";
        }
    };
    $("btn_right").onclick = function(){
        var t = arr.shift();     // 删除第一个
        arr.push(t);        //  添加到最后第一个
        //console.log(t);
        for(var i = 0;i<divs.length;i++){
            divs[i].style.top = arr[i][0]+"px";
            divs[i].style.marginLeft = arr[i][1]+"px";
        }
    }
};

最后编辑于：2017.12.10 09:11:23