JS六

发表于 | 分类于

placeholder value

html

1
<input type="text" placeholder="bbb" value="aaa"/>

在input中，value的值会覆盖placeholder,placeholder的值会在鼠标获取焦点的时候隐藏，value不会

隔行变色

html

1
2
3
4
5
6
7
8
<ul>
    <li>aaaaaaaaaa</li>
    <li>aaaaaaaaaa</li>
    <li>aaaaaaaaaa</li>
    <li>aaaaaaaaaa</li>
    <li>aaaaaaaaaa</li>
    <li>aaaaaaaaaa</li>
</ul>

css

1
2
3
4
5
6
7
8
9
10
11
12
*{
    padding: 0;
    margin: 0;
    list-style: none;
}
li {
    height: 30px;
    line-height: 30px;
}
.select {
    background-color: #aaa!important;
}

script

1
2
3
4
5
6
7
8
9
10
11
12
var lis = document.getElementsByTagName("li")
for(var i = 0;i<lis.length;i++){
    if(i%2 == 0){       //只有偶数能被2整除
        lis[i].style.backgroundColor = "#eee"
    }
    lis[i].onmouseover = function(){
        this.className = "select"
    }
    lis[i].onmouseout = function(){
        this.className = ""
    }
}

数组总和 平均数

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
    var arr = [1,2,3,4,5,6];
    function avg(arr){              //传参，就是把一个数组，放在函数中运行
        var sum = 0;                //初始化总和是0
        var len = arr.length;       //数组的长度，数组内有多少个数
        for(var i=0;i<len;i++){
            sum += arr[i];          // sum = sum + arr[i]
        }
        return sum;                 //得到总和
        return sum / len;           //得到平均数
    }
    console.log(avg(arr));          //调用函数
</script>

获取input人输入值

html

1
2
<input type="text" id="txt"/>
<button>on</button>

script

1
2
3
4
5
6
var txt = document.getElementById("txt");
var btn = document.getElementsByTagName("button")[0];
btn.onclick = function(){
    var num = txt.value;
    console.log(num);
}

封闭$(id)

html

1
2
<input type="text" id="txt"/>
<button>on</button>

script

1
2
3
4
5
6
7
8
9
function $(id){
    return document.getElementById(id);
}
var btn = document.getElementsByTagName("button")[0];
btn.onclick = function(){
    var num = txt.value;
    console.log(num);
}

全选反选input

html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="top">
    <button>全选</button>
    <button>取消</button>
    <button>反选</button>
</div>
<div class="bot">
    <ul>
        <li>选项: <input type="checkbox"/></li>
        <li>选项: <input type="checkbox"/></li>
        <li>选项: <input type="checkbox"/></li>
        <li>选项: <input type="checkbox"/></li>
        <li>选项: <input type="checkbox"/></li>
        <li>选项: <input type="checkbox"/></li>
        <li>选项: <input type="checkbox"/></li>
    </ul>
</div>

script

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
<script>
    window.onload = function(){
        var btns = document.getElementsByTagName("button");
        var inputs = document.getElementsByTagName("input");
        function all(flag){
            for(var i=0;i<inputs.length;i++){
                inputs[i].checked = flag;
            }
        }
        btns[0].onclick = function(){
            all(true);
        }
        btns[1].onclick = function(){
            all(false);
        }
        btns[2].onclick = function(){
            for(var i=0;i<inputs.length;i++){
                if( inputs[i].checked == false){        //if()里面要用 == ，等于的意思
                    inputs[i].checked = true;           // 用 = ，赋值的意思
                }else if(inputs[i].checked == true){
                    inputs[i].checked = false;
                }
            }
        }
        //第二种写法
        btns[2].onclick = function(){
            for(var i=0;i<inputs.length;i++){
                inputs[i].checked == true ? inputs[i].checked = false : inputs[i].checked = true;
            }
        }
    }
</script>