JS——经典案例

一、点击有惊喜案例

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点击有惊喜呦title>
    <style type="text/css">
        *{
            padding:0;
            margin: 0;
        }
        #surprised{
            width:400px;
            height: 200px;

            font-size: 30px;
            text-align: center;
            line-height: 200px;
            cursor: pointer;
            margin: 20px auto;
            color: white;
            background-color: blue;
        }
    style>
head>
<body>
    <div id="surprised">
        点击有惊喜呦！！！
    div>
body>
<script type="text/javascript">
    var oDiv = document.getElementById('surprised');
    var clickTimer = 0;
    oDiv.onclick = function () {
        switch(clickTimer % 4){
            case 1:
                this.style.backgroundColor = 'green'; //this在这里就是指当点击事件的对象oDiv
                this.innerText = '再次点击试试';
                break;
            case 2:
                this.style.backgroundColor = 'orange';
                this.innerText = '哈哈，骗你的';
                break;
            case 3:
                this.style.backgroundColor = 'red';
                this.innerText = '真的没了！！！';
                break;
            default:
                this.style.backgroundColor = 'blue';
                this.innerText = '点击有惊喜呦！！！';
        }
        clickTimer++;
    }
script>
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

二、模拟框案例

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模态框案例title>
    <style type="text/css">
        *{
            padding: 0;
            margin:0;
        }
        html,body{
            height: 100%;
        }
        #wrapper{
            width:100%;
            height: 100%;
            background-color: rgba(0,0,0,.3);
        }
        #p1{
            position: relative;
            top:150px;
            width:400px;
            height: 200px;


            text-align: center;
            line-height: 200px;

            margin:auto;
            background-color: white;
        }
        #span1{
            position: absolute;
            right: 0;
            top:0;

            width: 30px;
            height: 30px;

            font-size: 20px;
            line-height: 30px;
            text-align: center;

            color: #ffffff;
            background-color: red;

        }
    style>
head>
<body>

        <button id="btn">点我一下button>
        <div id="wrapper">
            <div id="p1">div>
            <div id="span">div>
        div>
        
        
body>
<script type="text/javascript">
    /*思路：
    * 1.创建一个div盒子，设置好属性
    * 2.添加p标签和span标签，分别设置好位置，分别插入到div标签里
    * 3.定义button单击事件
    * */


    var oDiv = document.createElement('div'); //创建一个盒子
    var oP = document.createElement('p');
    var oSpan = document.createElement('span');
    var btn = document.getElementById('btn');
    var body = document.getElementsByTagName('body');

    // btn.onclick = function () {


    //     oP.innerText = 'This is True music';
    //     oSpan.innerText = 'X';

    //     oDiv.appendChild(oP);
    //     oP.appendChild(oSpan);

    //     oDiv.id = 'wrapper';
    //     oP.id = 'p1';
    //     oSpan.id = 'span1';

    //     body[0].insertBefore(oDiv,btn);
    // }

    // oSpan.onclick = function(){
    //     body[0].removeChild(oDiv);
    // }


script>
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

三、模拟框实战

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模拟框案例title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body {
            background-color: aliceblue;
            position: relative;
        }

        #div {
            width: 100%;
            height: 800px;
        }
        #div h1{
            text-align: center;
            font-size: 100px;
            font-weight: 100;
            color: #000;
            display: block;
        }
        #divs {
            width: 700px;
            height: 500px;
            background-color: beige;
            border-radius: 5px  ;
            box-shadow: 20px 30px 50px rgb(53, 53, 53);
            position: absolute;
            top: 20%;
            left: 30%;
            display: none;
        }
        #divs .divs1 {
            width: 300px;
            height: 400px;
            border: 1px solid black;
            margin: 30px auto;
            position: relative;
        }
        h3 {
            text-align: center;
        }
        .divs1 div {
            margin-top: 20px;
            margin-left: 7px;
        }
        input {
            outline: none;
        }
        a {
            display: inline-block;
            width: 80px;
            height: 50px;
            line-height: 50px;
            background-color: thistle;
            border-radius: 25px;
            text-align: center;
            text-decoration: none;
            margin-left: 110px;
            margin-top: 50px;
            color: white;
        }
        a:hover {
            background-color: steelblue;
        }
        p {
            text-align: center;
            cursor: pointer;
            width: 30px;
            height: 30px;
            line-height: 30px;
            position: absolute;
            right: -200px;
            top: -30px;
            background-color: tomato;
            font-size: 20px;
            color: #fff;
            display: none;
        }
    style>
head>
<body>
    <button>点击我弹出对话框button>
    <div id="div"> <h1>欢迎来到注册页面h1>div>
    <div id="divs">
       
        <div class="divs1">
            <h3>用户注册界面h3>
            <div>
                请输入姓名：<input type="text" style="width: 100px;" placeholder="请输入你的名字">
            div>
            <p>Xp>
            <div>
                请输入账号：<input type="text" name="" id="" maxlength="11" placeholder="请输入十一位的账号">
            div>
            <div>
                请输入密码：<input type="password" name="" id="" maxlength="11" placeholder="请输入密码">
            div>
            <div>
                请确认密码：<input type="password" name="" id="" maxlength="11" placeholder="请确认密码">
            div>
            <a href="###">提交注册a>
        div>
    div>
    <script>
        var p = document.querySelector('p');
        var h1 = document.querySelector('h1');
        var btn = document.querySelector('button');
        var div1 = document.querySelector('#div');
        var div2 = document.querySelector('#divs');
        btn.addEventListener('click', function () {
            div1.style.backgroundColor = 'gray';
            // btn.disabled = 'false';
            btn.innerHTML = '不可选中';
            btn.disabled = 'true';
            div2.style.display = 'block';
            p.style.display = 'block';
            h1.style.display='block';
            h1.innerHTML = '请注册';
            h1.style.color = '#fff';
        })
        p.addEventListener('click', function () {
            div2.style.display = 'none';
            p.style.display = 'none';
            div1.style.backgroundColor = 'aliceblue';
            btn.innerHTML = '点击我弹出注册页面';
            btn.disabled = '';
            h1.style.display = 'none';
            // h1.style.color = '#000';
        })
    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

四、制作建议留言板案例

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>留言板title>
    <style type="text/css">
    style>

head>
<body>
    <h1>简易留言板h1>
    <div class="wrapper">
        <ul id="words">ul>
    div>
    <textarea id="msg">textarea>
    <button id="btn1">留言button>
    <button id="btn2" onclick="sum()">统计button>
body>
<script type="text/javascript">
    //ul 是用来存储留言记录
    var ul = document.getElementById('words');
    var msg = document.getElementById('msg');
    var btn1 = document.getElementById('btn1');
    var btn2 = document.getElementById('btn2');
    var liCount = 0; //用来记录留言数目的
    btn1.onclick = function () {
        if (!msg.value) {
            alert('留言板里没有内容')
        } else {
            /*将留言插入顶部的具体方法
            *1.判断ul中有无元素，没有则使用append，有则使用insertbefore
            * 2.插入信息同时插入一个span标签，用来设置关闭按钮
            * */
            var li = document.createElement('li');
            li.innerHTML = msg.value + '  X';
            if (liCount == 0) {
                ul.appendChild(li);
                liCount++;
            } else {
                ul.insertBefore(li, ul.childNodes[0]);
                liCount++;
            }
            msg.value = '';
        }
        oSpans = document.getElementsByTagName('span');
        for (var i = 0; i < oSpans.length; i++) {
            oSpans[i].onclick = function () {
                ul.removeChild(this.parentNode);
                liCount--;
            }
        }
    };
    function sum() {
        alert('一共有' + liCount + '条信息');
    }


script>

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

五、选项卡案例

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项卡title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        body{
            height: 100%;
        }
        .wrapper{
            width: 600px;
            border: 1px solid red;
            margin: 30px auto;
        }
        ul{
            list-style: none;
            overflow: hidden;   /*注意要清除浮动*/
        }
        ul a{
            display: block;
            text-decoration: none;

            width:200px;
            height: 50px;

            text-align: center;
            line-height: 50px;

            color: black;
        }
        ul li{
            float: left;
            background-color: rgba(0,0,0,.3);
        }
        p{
            width: 600px;
            height: 150px;
            line-height: 150px;
            text-align: center;
            display: none;
        }
        ul li.active{
            background-color: #ffffff;
        }
        p.active{
            display: block;
        }
    style>
head>
<body>
    <div class="wrapper">
        <ul>
            <li class="active"><a href="#" >首页a>li>
            <li><a href="#">新闻a>li>
            <li><a href="#">热卖a>li>
        ul>
        <p id="home" class="active">首页内容p>
        <p id="news">新闻内容p>
        <p id="hotPurchase">热卖内容p>
    div>
body>
<script type="text/javascript">
    var lis = document.getElementsByTagName('li');
    var ps = document.getElementsByTagName('p');
    for(var i = 0;i < lis.length;i++){
        lis[i].index = i;   //这个用来记录每个标签的遍历位置，不用this，这里this指代的应该是window
        lis[i].onclick = function () {
            /*思路
            * 1.清除所有标签上的active
            * 2.将单击的li和p标签都添加active属性
            * */
            //清空class
            for(var j = 0;j < lis.length;j++){
                lis[j].className = '';
                ps[j].className = '';
            }
            //注意：这有个坑，不能跳！！！不能用遍历的i，要用this下的属性index
            this.className = 'active';
            ps[this.index].className = 'active';
        }
    }
script>
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

相关阅读:
ES 8.14 向量搜索优化
 云服务部署：AWS、Azure和GCP比较
 通俗易懂的React事件系统工作原理
 @EventListener 监听事件，在同一个虚拟机中如何保证顺序执行
 设计模式工厂方法模式
 leetcode 马拉松 6.27
店外营销吸睛，店内体验升级丨餐饮品牌如何「吃」透数据？
HR常用的人才测评工具，测什么，怎么测？
【优化调度】基于NSGAII算法的车辆充电调度策略研究含Matlab代码
 说透缓存一致性与内存屏障
原文地址：https://blog.csdn.net/nanchen_J/article/details/126779987