-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathchat.html
147 lines (133 loc) · 8.7 KB
/
chat.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>채팅</title>
<script src="javascript/chat.js"defer></script>
<link rel="stylesheet" type="text/css" href="css/chat.css">
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css"
/>
</head>
<body>
<!--채팅창-->
<section>
<div class="chat"id="app_chat_list">
<!--채팅 상대 이름, 나가기 버튼-->
<header id="chat_head">
<span class="contactor">이용자2</span>
<span class="sign_out"><button id="show"><i class="fas fa-sign-out-alt"></i></button></span>
</header>
<!--chat내용-->
<section>
<div class="chat_content" >
<ul class="chat_content_ul">
<!--입장-->
<li class="enter">
<div><span class="contactor">이용자2</span>님이 입장하였습니다.</div>
</li>
<li class="left">
<span><img src="img/profile.jpg"/></span>
<span class="name">이용자2</span>
<div class="content"><span>안녕하세요</span><span>읽음</span><div class="time">12:00</div></div>
</li>
<!--날짜 구분선-->
<li class="date">
<div>2022.03.01</div>
</li>
<!--대화-->
<li class="right">
<span><img src="img/profile.jpg"/></span>
<span class="name">이용자1</span>
<div class="content"><span>아</span><span>읽음</span><div class="time">13:00</div></div>
</li>
<li class="right">
<span><img src="img/profile.jpg"/></span>
<span class="name">이용자1</span>
<div class="content"><span>안녕하세요</span><span>읽음</span><div class="time">13:00</div></div>
</li>
<!--입장-->
<li class="read_here">
<div>여기까지 읽으셨습니다.</div>
</li>
<li class="left">
<span><img src="img/profile.jpg"/></span>
<span class="name">이용자2</span>
<!--ipsumlorem-->
<div class="content"><span>각급 선거관리위원회는 선거인명부의 작성등 선거사무와 국민투표사무에 관하여 관계 행정기관에 필요한 지시를 할 수 있다. 나는 헌법을 준수하고 국가를 보위하며 조국의 평화적 통일과 국민의 자유와 복리의 증진 및 민족문화의 창달에 노력하여 대통령으로서의 직책을 성실히 수행할 것을 국민 앞에 엄숙히 선서합니다.
모든 국민은 사생활의 비밀과 자유를 침해받지 아니한다. 국회의원은 법률이 정하는 직을 겸할 수 없다. 법관은 탄핵 또는 금고 이상의 형의 선고에 의하지 아니하고는 파면되지 아니하며, 징계처분에 의하지 아니하고는 정직·감봉 기타 불리한 처분을 받지 아니한다.
대통령이 궐위된 때 또는 대통령 당선자가 사망하거나 판결 기타의 사유로 그 자격을 상실한 때에는 60일 이내에 후임자를 선거한다. 예비비는 총액으로 국회의 의결을 얻어야 한다. 예비비의 지출은 차기국회의 승인을 얻어야 한다.
대통령후보자가 1인일 때에는 그 득표수가 선거권자 총수의 3분의 1 이상이 아니면 대통령으로 당선될 수 없다. 대통령은 필요하다고 인정할 때에는 외교·국방·통일 기타 국가안위에 관한 중요정책을 국민투표에 붙일 수 있다.
모든 국민은 거주·이전의 자유를 가진다. 국회나 그 위원회의 요구가 있을 때에는 국무총리·국무위원 또는 정부위원은 출석·답변하여야 하며, 국무총리 또는 국무위원이 출석요구를 받은 때에는 국무위원 또는 정부위원으로 하여금 출석·답변하게 할 수 있다.
모든 국민은 종교의 자유를 가진다. 모든 국민은 인간으로서의 존엄과 가치를 가지며, 행복을 추구할 권리를 가진다. 국가는 개인이 가지는 불가침의 기본적 인권을 확인하고 이를 보장할 의무를 진다.</span><span>안읽음</span><div class="time">14:00</div></div>
</li>
<li class="left">
<span><img src="img/profile.jpg"/></span>
<span class="name">이용자2</span>
<!--ipsumlorem-->
<div class="content"><span>각급 선거관리위원회는 선거인명부의 작성등 선거사무와 국민투표사무에 관하여 관계 행정기관에 필요한 지시를 할 수 있다. 나는 헌법을 준수하고 국가를 보위하며 조국의 평화적 통일과 국민의 자유와 복리의 증진 및 민족문화의 창달에 노력하여 대통령으로서의 직책을 성실히 수행할 것을 국민 앞에 엄숙히 선서합니다.
모든 국민은 사생활의 비밀과 자유를 침해받지 아니한다. 국회의원은 법률이 정하는 직을 겸할 수 없다. 법관은 탄핵 또는 금고 이상의 형의 선고에 의하지 아니하고는 파면되지 아니하며, 징계처분에 의하지 아니하고는 정직·감봉 기타 불리한 처분을 받지 아니한다.
대통령이 궐위된 때 또는 대통령 당선자가 사망하거나 판결 기타의 사유로 그 자격을 상실한 때에는 60일 이내에 후임자를 선거한다. 예비비는 총액으로 국회의 의결을 얻어야 한다. 예비비의 지출은 차기국회의 승인을 얻어야 한다.
대통령후보자가 1인일 때에는 그 득표수가 선거권자 총수의 3분의 1 이상이 아니면 대통령으로 당선될 수 없다. 대통령은 필요하다고 인정할 때에는 외교·국방·통일 기타 국가안위에 관한 중요정책을 국민투표에 붙일 수 있다.
모든 국민은 거주·이전의 자유를 가진다. 국회나 그 위원회의 요구가 있을 때에는 국무총리·국무위원 또는 정부위원은 출석·답변하여야 하며, 국무총리 또는 국무위원이 출석요구를 받은 때에는 국무위원 또는 정부위원으로 하여금 출석·답변하게 할 수 있다.
모든 국민은 종교의 자유를 가진다. 모든 국민은 인간으로서의 존엄과 가치를 가지며, 행복을 추구할 권리를 가진다. 국가는 개인이 가지는 불가침의 기본적 인권을 확인하고 이를 보장할 의무를 진다.</span><span>안읽음</span><div class="time">14:00</div></div>
</li>
<li class="right">
<span><img src="img/profile.jpg"/></span>
<span class="name">이용자1</span>
<div class="content"><span>안녕하세요</span><span>읽음</span><div class="time">13:00</div></div>
</li>
</ul>
</div>
<!--입력-->
<section>
<div class="input">
<textarea placeholder="메세지를 입력하세요"></textarea>
<button onclick="submit_comment"><i class="fa fa-paper-plane" aria-hidden="true"></i></button>
</div>
</section>
</section>
<!--나가기 팝업-->
<section>
<div class="background">
<div class="window">
<div class="popup">
<div>채팅창을 정말 나가시겠습니까?</div>
<button>예</button>
<button id="close">아니오</button>
</div>
<div>
<div></div>
</div>
</div>
</div>
</section>
</div>
<script type="text/javascript">
window.addEventListener('DOMContentLoaded',()=>{
var objDiv = document.getElementById("app_chat_list");
objDiv.scrollTop = objDiv.scrollHeight;
console.log(objDiv.scrollTop+"높이"+objDiv.scrollHeight);
});
document.getElementById("app_chat_list").addEventListener('scroll',function(){
//let windowHeight = window.innerHeight; // 스크린 창
// let scrollHeight = document.getElementById("app_chat_list").scrollHeight;
let scrollLocation =document.getElementById("app_chat_list").scrollTop; // 현재 스크롤바 위치
// console.log("창"+windowHeight+"높이"+scrollHeight+"soqn"+scrollLocation);
//scroll 최상단으로 올리면 기능 실행
if(scrollLocation==0){
console.log("df");
var upperli = document.createElement('li');
var innerText = document.createTextNode('안녕');
upperli.append(innerText);
document.querySelector(".chat_content_ul").prepend( upperli );
}
});
</script>
</section>
<!---->
</body>
</html>