zjt.github.io/index.html at master · zhujt4github/zjt.github.io · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS</title>
    <style>
        div:first-child{
            width:300px;
            height:200px;
            border: 1px solid red;
        }
        div:nth-child(4){
            width:80vw;
            position: relative;
            height:100px;
            font-size: 3em;
            line-height: 100px;
            text-align: center;
            background-color: coral;

        }
        div > span {
          /* position: relative; */
          display: inline-block;
        }
        .animation{
            color:white;
            animation: animate 2s linear 0s 2 alternate ;
        }

        @keyframes animate {
            from{
                color:yellow;
                transform: scale(1.5);
            }
            to{
                color:green;
                transform:scale(0.5)
            }
        }

    dl {
        width: 400px;
        display: flex;
        flex-direction: column;
    }

    dt {
        background: #e67e22;
        border-bottom: solid 2px #333;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }

    dd {
        height: 200px;
        background: #bdc3c7;
        font-size: 5em;
        text-align: center;
        line-height: 200px;
    }
    </style>
</head>
<body>
    <h1>你好啊！</h1>
    <button>change your name</button>
    <script>
        let btn = document.querySelector("button");
        let header = document.querySelector("h1");
        function setUserName(){
            let name = prompt('请输入你的名字：');
            if(!name || name === null){
                setUserName();
            } else {
                localStorage.setItem('name',name);
                header.innerHTML = `Welcome ${name}!`;
            }
        }
        if(!localStorage.getItem('name')){
            setUserName();
        } else {
            let storedName = localStorage.getItem('name');
            header.innerHTML = `Welcome ${storedName}`;
        }
        // console.log(btn);
        btn.addEventListener("click",function(){
            setUserName();
        })
    </script>
</body>
</html>