前言

本文主要记录博主遇到的JavaScrprt的案例练习。

js中打印为undefined及与null区别

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
42
43
44
45
46
47
48
49
50
51
52
53
54
// 变量声明了的但是未初始化
// 在声明变量的时候，如果没有初始化变量，即给变量赋值，那么打印出 undefined。
// var a
// console.log(a)

// 给变量赋值 undefined
// 直接给变量赋值一个undefined
// var a = undefined
// console.log(a)

// 变量声明提升返回 undefined
// 把打印语句写在了声明变量之前，由于变量声明提前，就算赋值了，也是 undefined
// console.log(a)
// var a = 1

// 访问对象中的属性时，如果对象中没有对应的属性，会打印 undefined
// var obj = {}
// console.log(obj['a'])
// console.log(obj.a)

// 函数中定义了形参，但是执行函数时没有传入实参
// 在我们的函数中，如果定义了形参，但是你执行的时候没有传入实参时，会 undefined。
// 具体原因是因为a作为局部变量被声明提前了。
// function f(a) {
//     console.log(a)
// }
// f()

// 对象中的方法中的匿名函数的函数体为空
// 一个方法(函数)中如果它的函数体为空时，在调用时会返回 undefined
// var obj ={ test:function () {} }
// console.log(obj.test())

// 打印函数的调用时，该函数的函数体为空
// 一个函数的函数体为空时，在打印它的调用时，打印出 undefined
// function f() {}
// console.log(f())

// 打印函数的调用时，函数体不为空
// 这里test()相当于1，先打印1，
// 然后console.log()在打印函数时，默认会打印返回值，如果没有设定返回值，会返回 undefined。
// function test() { console.log(1) }
// console.log(test())


// 函数作为返回值时，其返回值函数没有设置返回值
// 这里test()调用自身，然后再()调用内部的返回函数，打印出1，
// console.log()默认接受函数时会打印返回值，如果没有设定，会返回 undefined。
// function test() {
//     return function () {
//         console.log(1)
//     }
// }
// console.log(test()())

null和undefined的区别

null是一个表示”无”的对象（空对象指针），转为数值时为0；undefined是一个表示”无”的原始值，转为数值时为NaN

统计最多次数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var str = 'abcdagnasjgnlqcanzaa'
var o = {}
for (let i = 0; i < str.length; i++) {
    // 或者直接使用str[i]
    var chars = str.charAt(i)
    if (o[chars]) {
        o[chars]++
    } else {
        o[chars] = 1
    }
}
console.log(o)

var max = 0
var ch = ''
for (k in o) {
    if (o[k] > max) {
        max = o[k]
        ch = k
    }
}
console.log(ch,max)
1
2
3
4
5
6
7
8
9
10
11
12
var str = 'djrtgjjednvjkdsabvkjjsuds'
var i = 0
var num = -1
while (true){
    num = str.indexOf('j',[num + 1])
    if(num === -1 ){
        break
    }else {
        i++
    }
}
console.log(i)
1
2
3
4
5
6
7
8
var a = "testthisprojecthelloworld!";
var b = {};
var c = null;
for (var i in a) {
    Number(b[a[i]]++) || (b[a[i]] = 1);
    c = b[a[i]] > c ? a[i] : c;
}
alert(c + ":" + b[c]);

数组排序去重

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
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    var arrObj = [2, 56, 12, 2, 36, 3, 3, 4, 1]
    var arr = []

    function compare(a, b) {
        return a - b
    }

    var arrNew = arrObj.sort(compare)

    // 第一种方法(推荐，可以不排序清除)
    arrNew.forEach(function (item, index) {
        //注意这里用arr，当判断相等的时候，代表这个值第一次出现，就插入
        if (arrNew.indexOf(item) === index) {
            arr.push(item);
        }
    })
    // 第二种方法（必须排序了清除）
    // for (var i = 0; i < arrNew.length; i++) {
    //     if (arrNew[i] === arrNew[i - 1]) {
    //     } else {
    //         arr.push(arrNew[i])
    //     }
    // }
    
    // 第三种方法
    for(var i = 0; i< arrObj.length; i++){
        if(arr.indexOf(arrObj[i])===-1){
            arr.push(arrObj[i])        
        }    
    }
    
    //（去除数组中重复的项）
    // arrObj.forEach(function (item, index) {
    //     if (arrObj.indexOf(item) === arrObj.lastIndexOf(item)) {
    //         arr.push(item);
    //     }
    // })
    console.log(arr)
</script>
</body>
</html>

js对象类型的判断方法

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
42
43
44
// typeof
var o = {'name': 'lee'}
console.log(typeo f o) // Object

// intanceof
var o = {'name': 'lee'}
var a = ['reg', 'blue']
function isType(o) {
    if (o instanceof Array) {
        return 'Array'
    } else if (o instanceof Object) {
        return 'Object';
    } else {
        return '参数不是对象类型';
    }
}
console.log(isType(o)) // Object
console.log(isType(a)) // Array

// constructor
var o = { 'name':'lee'}
var a = ['reg','blue']
console.log(o.constructor == Object) // true
console.log(a.constructor == Array) // true

// 利用tostring()方法
var a = ['reg', 'blue'];
var b = {name: 'D', age: 18}
var c = 'string'

function isType(obj) {
    var type = Object.prototype.toString.call(obj);
    if (type === '[object Array]') {
        return 'Array';
    } else if (type === '[object Object]') {
        return "Object"
    } else {
        return '参数不是对象类型';
    }
}

console.log(isType(a)) // Array
console.log(isType(b)) // Object
console.log(isType(c)) // 参数不是对象类型

匀速动画

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
42
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 150px;
            height: 150px;
            background: pink;
            position: relative;
        }
    </style>
</head>
<body>
<button>开始</button>
<div></div>
<script>
    var button = document.getElementsByTagName('button')[0]
    var div = document.getElementsByTagName('div')[0]
    function animate(obj, target) {
        var num = 0
        clearInterval(obj.timer)
        obj.timer = setInterval(function () {
            num = num + 1
            div.style.left = num + 'px'
            if (num === target) {
                clearInterval(obj.timer)
            }
        }, 1)
    }
    button.addEventListener('click', function () {
        animate(div, 500);
    })
</script>
</body>
</html>

缓速动画

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 150px;
            height: 150px;
            background: pink;
            position: relative;
        }
    </style>
</head>
<body>
<button>开始</button>
<div></div>
<script>
    var button = document.getElementsByTagName('button')[0]
    var div = document.getElementsByTagName('div')[0]
    target = 500
    button.onclick = function () {
        var timer = setInterval(function () {
            var step = (target - div.offsetLeft) / 10
            step = step > 0 ? Math.ceil(step) : Math.floor(step)
            div.style.left = (div.offsetLeft + step) + 'px'
            if (div.offsetLeft === 500) {
                clearInterval(timer)
            }
        })
    }
</script>
</body>
</html>

判断新增字段

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 判断新增字段
var message = ''
var checkArr = ['body', 'title', 'userId']
for (k in req.body) {
    if (checkArr.indexOf(k) === -1) {
        message += k + '、'
    } else {
        var index = checkArr.indexOf(k)
        checkArr.splice(index, 1)
    }
}
if (message.charAt(message.length - 1) === '、') {
    message = message.substr(0, (message.length - 1))
    return error(res, '有多的键名' + message)
}
if (checkArr.length !== 0) {
    checkArr.map((item) => {
        message += '没有' + item + ''
    })
    return error(res, message)
}

普通轮播图

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" 
    rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .clear:after {
            clear: both;
            display: block;
            content: '';
            height: 0;
            overflow: hidden;
            visibility: hidden;
        }

        div {
            margin: 100px auto;
            position: relative;
            width: 600px;
            height: 260px;
            overflow: hidden;
        }

        .prev {
            position: absolute;
            line-height: 40px;
            left: 0;
            top: calc(50% - 20px);
            z-index: 1;
            width: 20px;
            height: 40px;
            cursor: pointer;
            text-align: center;
        }

        .next {
            position: absolute;
            display: block;
            line-height: 40px;
            right: 0;
            top: calc(50% - 20px);
            width: 20px;
            height: 40px;
            z-index: 1;
            cursor: pointer;
            text-align: center;
        }

        .prev:hover, .next:hover {
            background: rgba(0, 0, 0, 0.1);
        }

        .pic {
            position: absolute;
            width: 5000px;
            list-style-type: none;
        }

        .pic li {
            float: left;
        }

        .pic li img {
            display: block;
        }

        .point {
            position: absolute;
            bottom: 15px;
            left: calc(50% - 56px);
            list-style-type: none;
        }

        .point li {
            background: silver;
            float: left;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            cursor: pointer;
            margin-right: 12px;
        }

        .point .choose {
            width: 20px;
            border-radius: 5px;
        }
    </style>
</head>
<body>

<div class="container">
    <span class="prev fa fa-chevron-circle-left"></span>
    <span class="next fa fa-chevron-circle-right"></span>
    <ul class="pic clear">
        <li><img src="img/css.jpg" alt=""></li>
        <li><img src="img/h5.jpg" alt=""></li>
        <li><img src="img/js.jpg" alt=""></li>
        <li><img src="img/php.jpg" alt=""></li>
        <li><img src="img/rails.jpg" alt=""></li>
    </ul>
    <ul class="point clear">
        <li class="choose"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
<script>
    window.onload = function () {
        var next = document.getElementsByClassName('next')[0]
        var prev = document.getElementsByClassName('prev')[0]
        var pic = document.getElementsByClassName('pic')[0]
        var lis = document.getElementsByClassName('point')[0].children
        var index = 0
        var run = false
        function running() {
            run = true
            var timer = setInterval(function () {
                var target = -600 * index
                var step = (target - pic.offsetLeft) / 20
                step = step > 0 ? Math.ceil(step) : Math.floor(step)
                pic.style.left = (step + pic.offsetLeft) + 'px'
                if (pic.offsetLeft === target) {
                    clearInterval(timer)
                    run = false
                }
            })
            for (var i = 0; i < lis.length; i++) {
                lis[i].className = ''
            }
            lis[index].className = 'choose'
        }

        next.onclick = function () {
            if (run) {
                return false
            }
            index++
            if (index === 5) {
                index = 0
            }
            running()
            // 或者
    	 // if(!run){
    	 //     index++
    	 //     if (index === 5) {
    	 //         index = 0
    	 //     }
    	 //     running()
    	 // }
        }
        prev.onclick = function () {
            if (run) {
                return false
            }
            index--
            if (index === -1) {
                index = 4
            }
            running()
        }
    }
</script>
</body>
</html>

无限轮播图

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" 
    rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .clear:after {
            clear: both;
            display: block;
            content: '';
            height: 0;
            overflow: hidden;
            visibility: hidden;
        }

        div {
            margin: 100px auto;
            position: relative;
            width: 600px;
            height: 260px;
            overflow: hidden;
        }

        .prev {
            position: absolute;
            line-height: 40px;
            left: 0;
            top: calc(50% - 20px);
            z-index: 1;
            width: 20px;
            height: 40px;
            cursor: pointer;
            text-align: center;
        }

        .next {
            position: absolute;
            display: block;
            line-height: 40px;
            right: 0;
            top: calc(50% - 20px);
            width: 20px;
            height: 40px;
            z-index: 1;
            cursor: pointer;
            text-align: center;
        }

        .prev:hover, .next:hover {
            background: rgba(0, 0, 0, 0.1);
        }

        .pic {
            position: absolute;
            left: -600px;
            width: 5000px;
            list-style-type: none;
        }

        .pic li {
            float: left;
        }

        .pic li img {
            display: block;
        }

        .point {
            position: absolute;
            bottom: 15px;
            left: calc(50% - 56px);
            list-style-type: none;
        }

        .point li {
            background: silver;
            float: left;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            cursor: pointer;
            margin-right: 12px;
        }

        .point .choose {
            width: 20px;
            border-radius: 5px;
        }
    </style>
</head>
<body>

<div class="container">
    <span class="prev fa fa-chevron-circle-left"></span>
    <span class="next fa fa-chevron-circle-right"></span>
    <ul class="pic clear">
        <li><img src="img/rails.jpg" alt=""></li>
        <li><img src="img/css.jpg" alt=""></li>
        <li><img src="img/h5.jpg" alt=""></li>
        <li><img src="img/js.jpg" alt=""></li>
        <li><img src="img/php.jpg" alt=""></li>
        <li><img src="img/rails.jpg" alt=""></li>
        <li><img src="img/css.jpg" alt=""></li>
    </ul>
    <ul class="point clear">
        <li class="choose"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
<script>
    window.onload = function () {
        var container = document.getElementsByClassName('container')[0]
        var next = document.getElementsByClassName('next')[0]
        var prev = document.getElementsByClassName('prev')[0]
        var pic = document.getElementsByClassName('pic')[0]
        var lis = document.getElementsByClassName('point')[0].children
        var index = 1
        var run = false

        function running() {
            run = true
            var timer = setInterval(function () {
                var target = -600 * index
                var step = (target - pic.offsetLeft) / 20
                step = step > 0 ? Math.ceil(step) : Math.floor(step)
                pic.style.left = (step + pic.offsetLeft) + 'px'
                if (pic.offsetLeft === target) {
                    clearInterval(timer)
                    run = false
                }
            })
            for (var i = 0; i < lis.length; i++) {
                lis[i].className = ''
            }
            lis[index - 1].className = 'choose'
        }

        next.onclick = function () {
            if (run) {
                return false
            }
            index++
            if (index === 6) {
                pic.style.left = '0px'
                index = 1
            }
            running()
            // 或者
            // if(!run){
            //     index++
            //     if (index === 5) {
            //         index = 0
            //     }
            //     running()
            // }
        }
        prev.onclick = function () {
            if (run) {
                return false
            }
            index--
            if (index === 0) {
                pic.style.left = '-3600px'
                index = 5
            }
            running()
        }

        for (var j = 0; j < lis.length; j++) {
            lis[j].index = j        //必须要先赋值给index，否者取不到索引；
            lis[j].onclick = function () {
                for (var k = 0; k < lis.length; k++) {
                    lis[k].className = ''
                }
                this.className = 'choose'
                index = this.index + 1
                running()
            }
        }

        function f() {
            index++
            if (index === 6) {
                pic.style.left = '0px'
                index = 1
            }
            running()
        }

        var play = setInterval(f, 1500)
        container.onmouseover = function () {
            clearInterval(play)
        }
        container.onmouseout = function () {
            play = setInterval(f, 1500)
        }
    }
</script>
</body>
</html>

参数处理成对象

1
2
3
4
5
6
7
8
9
10
11
12
13
const url = 'https://clwy.cn/admin?
id=8&name=loushengyue&age=18&sex=男&parent_id=112&is_recommend=true'
function f(value) {
    var obj = {}
    var arr = value.split('?')
    var newArr = arr[1].split('&')
    newArr.map((item) => {
        var str = item.split('=')
        obj[str[0]]=str[1]
    })
    return obj
}
console.log(f(url))

查找字符串、数组重复的值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var str = 'abcdagnasjgnlqcanzaa'
let arr = str.split('')
var i = 0
// 第一种
arr.forEach((item, index) => {
    if (item === 'a') {
        i++
        console.log(index)
    }
})
console.log(i)
// 第二种
var index = str.indexOf('a')
while (index !== -1) {
    console.log(index)
    index = str.indexOf('a', [index + 1])
}
// 第三种
for (let i = 0; i < str.length; i++) {
    if(str[i]==='a'){
        console.log(i)
    }
}

留言板

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            width: 500px;
            margin: 50px auto;
        }

        textarea {
            width: 500px;
            height: 200px;
        }

        ul {
            list-style-type: none;
        }

        li {
            position: relative;
            padding: 10px 0 10px;
            border-bottom: 2px solid #de964b;
        }

        li span {
            display: block;
            width: 460px;
            word-break: break-all;
        }

        li a {
            text-decoration: none;
            color: #de964b;
            float: right;
            position: absolute;
            bottom: 10px;
            right: 0;
        }
    </style>
</head>
<body>
<div class="container">
    <label><textarea></textarea></label>
    <br>
    <button>发布</button>
    <ul>
    </ul>
</div>
<script>
    window.onload = function () {
        var button = document.getElementsByTagName('button')[0]
        var textarea = document.getElementsByTagName('textarea')[0]
        var ul = document.getElementsByTagName('ul')[0]
        var li = document.getElementsByTagName('li')
        button.onclick = function () {
            var val = textarea.value.trim()
            if (val.length === 0) {
                alert('不能为空')
            } else {
                var add_li = document.createElement('li')
                add_li.innerHTML = '<span></span><a href="javascript:;">删除</a>'
                add_li.getElementsByTagName('span')[0].innerText = val
                // var span = add_li.children[0]
                // ul.appendChild(add_li)
                ul.insertBefore(add_li,ul.firstChild)
                textarea.value = ''
            }
            for (var i = 0; i < li.length; i++) {
                var a = li[i].children[1]
                a.onclick = function () {
                    this.parentNode.parentNode.removeChild(this.parentNode)
                    // this.parentNode.remove()
                }
            }
        }
    }
</script>
</body>
</html>

switch封装选择器

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="one"></div>
<div id="two"></div>
<div></div>
<script>
    window.onload = function () {
        function $(str) {
            var output
            var str0 = str.charAt(0)
            var result
            switch (str0) {
                case '.':
                    result = str.slice(1)
                    output = document.getElementsByClassName(result)
                    break
                case '#':
                    result = str.slice(1)
                    output = document.getElementById(result)
                    break
                default:
                    result = str
                    output = document.getElementsByTagName(result)
            }
            console.log(output)
            return output
        }
        $('.one')
        $('#two')
        $('div')
    }
</script>

</body>
</html>

不用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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="one"></div>
<div class="one two"></div>
<div class="one two three"></div>
<div class="two"></div>
<div></div>
<div class="three"></div>
<div class="two"></div>
<div class="one"></div>
<div></div>
<div class="three"></div>
<script>
    window.onload = function () {
        function $(str) {
            var dom = document.getElementsByTagName('*')
            var arr = []
            for (var i = 0; i < dom.length; i++) {
                var check = dom[i].className.split(' ')
                for (var j = 0; j < check.length; j++) {
                    if (check[j] === str) {
                        arr.push(dom[i])
                    }
                }
            }
            return arr
        }
        $('one')
    }

</script>

</body>
</html>

时间处理

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    window.onload = function () {
        function f(num) {
            var now = new Date()
            now.setDate(now.getDate() + num)
            // 这个day不能放前面，需要先设置了再取它的值（总之需要再获取）
            var day = now.getDate()
            var mon = now.getMonth()
            var year = now.getFullYear()
            console.log(year + '年' + (mon + 1) + '月' + day + '日')

            // var myDate=new Date();
            // myDate.setDate(myDate.getDate()+5);
            // document.write(myDate.toLocaleString());
        }
        f(5)
    }
</script>
</body>
</html>

全选和反选

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
42
43
44
45
46
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button>全选</button>
<button>反选</button>
<button>取消</button>
<ul>
    <li><label><input type="checkbox" checked>选项1</label></li>
    <li><label><input type="checkbox">选项2</label></li>
    <li><label><input type="checkbox">选项3</label></li>
    <li><label><input type="checkbox">选项4</label></li>
    <li><label><input type="checkbox">选项5</label></li>
    <li><label><input type="checkbox">选项6</label></li>
    <li><label><input type="checkbox">选项7</label></li>
    <li><label><input type="checkbox">选项8</label></li>
    <li><label><input type="checkbox">选项9</label></li>
    <li><label><input type="checkbox">选项10</label></li>
</ul>
<script>
    window.onload=function () {
        var button = document.getElementsByTagName('button')
        var input = document.getElementsByTagName('input')
        button[0].onclick = function () {
            for (var i = 0; i < input.length; i++) {
                input[i].checked = true
            }
        }
        button[1].onclick = function () {
            for (var i = 0; i < input.length; i++) {
                input[i].checked = !input[i].checked
            }

        }
        button[2].onclick = function () {
            for (var i = 0; i < input.length; i++) {
                input[i].checked = false
            }
        }
    }
</script>
</body>
</html>

选项卡

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .content {
            width: 380px;
            margin: 100px auto;
        }

        span {
            margin: 0 0 10px 40px;
            cursor: pointer;
        }

        .choose {
            border-bottom: 1px solid;
            color: coral;
        }

        .content div {
            margin: 10px;
            width: 380px;
            display: none;
            text-align: center;
            border-top: 1px solid;
        }

        .content div img {
            display: block;
        }

        .content .box {
            display: block;
        }
    </style>
</head>
<body>
<div class="content">
    <span class="choose">体育</span>
    <span>NBA/CBA</span>
    <span>中超/国际</span>
    <div class="box">体育<img src="image/1.webp" alt=""></div>
    <div>NBA/CBA<img src="image/2.webp" alt=""></div>
    <div>中超/国际<img src="image/3.webp" alt=""></div>
</div>
<script>
    window.onload = function () {
        var span = document.getElementsByTagName('span')
        var div = document.getElementsByTagName('div')
        for (var i = 0; i < span.length; i++) {
            span[i].index = i
            span[i].onclick = function () {
                for (var j = 0; j < span.length; j++) {
                    span[j].className = ''
                    div[j + 1].className = ''
                }
                this.className = 'choose'
                div[this.index + 1].className = 'box'
            }
        }
    }
</script>
</body>
</html>

id和传参

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .clear:after {
            clear: both;
            height: 0;
            display: block;
            content: "";
            overflow: hidden;
            visibility: hidden;
        }

        #box {
            margin: 50px auto;
            width: 360px;
            height: 360px;
            background-image: url("img/li01big.jpg");
            position: relative;
        }

        ul {
            list-style-type: none;
            position: absolute;
            top: 360px;
        }

        ul li {
            float: left;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div id="box">
    <ul class="clear">
        <li id="li01"><img src="img/01.jpg" alt=""></li>
        <li id="li02"><img src="img/02.jpg" alt=""></li>
        <li id="li03"><img src="img/03.jpg" alt=""></li>
        <li id="li04"><img src="img/04.jpg" alt=""></li>
        <li id="li05"><img src="img/05.jpg" alt=""></li>
    </ul>
</div>
<script>
    window.onload = function () {
        // var box = document.getElementById('box')
        // var li = document.getElementsByTagName('li')
        // for (var i = 0; i < li.length; i++) {
        //     li[i].onclick = function () {
        //         // box.style.backgroundImage ='url("img/'+this.id+'big.jpg")'
        //         console.log(i)
        //     }
        // }
        //第一种方法结束
        var box = document.getElementById('box')
        var li = document.getElementsByTagName('li')

        function f(id, bg) {
            li[id].onclick = function () {
                box.style.backgroundImage = bg
            }
        }
        // f('0', 'url("img/li01big.jpg")')
        // f('1', 'url("img/li02big.jpg")')
        // f('2', 'url("img/li03big.jpg")')
        // f('3', 'url("img/li04big.jpg")')
        // f('4', 'url("img/li05big.jpg")')
        //第二种方法结束
        for (var i = 0; i < 5; i++) {
            f(i, 'url("img/li0'+(i+1)+'big.jpg")')
        }
    }
</script>
</body>
</html>

计算器

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
42
43
44
45
46
47
48
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<input id="inp0" type="text">
<select name="" id="se">
    <option value="+">+</option>
    <option value="-">-</option>
    <option value="*">*</option>
    <option value="/">/</option>
</select>
<input id="inp1" type="text">
<button id="but">计算</button>
<input id="inp2" type="text">
<script>
    window.onload = function () {

        function $(x) {
            return document.getElementById(x)
        }

        $("but").onclick = function () {
            var x = parseFloat($("inp0").value)
            var y = parseFloat($("inp1").value)
            var z = $("se").value
            switch (z) {
                case "+":
                    $("inp2").value = x + y;
                    break;
                case "-":
                    $("inp2").value = x - y;
                    break;
                case "*":
                    $("inp2").value = x * y;
                    break;
                default:
                    $("inp2").value = x / y;
            }
        }
    }
</script>

</body>
</html>

字节计算

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<label><input type="text"></label>
<button>取值计算</button>
<span></span>
<script>
    window.onload = function () {
        var button = document.getElementsByTagName("button")[0]
        var inp = document.getElementsByTagName("input")[0]
        var span = document.getElementsByTagName("span")[0]

        button.onclick = function () {
            var num = 0
            var val = inp.value
            for (var i = 0; i < val.length; i++) {
                if (val.charCodeAt(i) <= 255) {
                    num = num + 1
                } else {
                    num = num + 2
                }
            }
            span.innerHTML = num + "字节"
        }
    }
</script>
</body>
</html>

表单

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
42
43
44
45
46
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<label>
    <input class="inp" value="请输入用户名" type="text">
</label>

<span class="sp"></span>
<script>
    window.onload = function () {
        function $(x) {
            return document.getElementsByClassName(x)
        }

        $("inp")[0].onfocus = function () {
            var val = this.value
            if (val === "请输入用户名") {
                this.value = ""
            }
        }
        $("inp")[0].onblur = function () {
            var val = this.value
            if (val === "") {
                this.value = "请输入用户名"
            }
        }
        $("inp")[0].onkeyup = function () {
            var l = this.value.length
            var val = this.value
            if (!isNaN(val)) {
                $("sp")[0].innerHTML = "不能只为数字"
            } else if (l < 6) {
                $("sp")[0].innerHTML = "不能小于6位"
            } else {
                $("sp")[0].innerHTML = "输入正确"
            }
        }
    }

</script>
</body>
</html>