1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <link rel="stylesheet" href="css/index.css">
9 </head>
10
11 <body>
12 <div class="area">
13 <img src="img/tip.png">
14 <input type="text" id="userName" placeholder="输入用户名...">
15 <span id="msg"> </span>
16 <textarea maxlength="200" placeholder="说点儿什么叭。。。"></textarea>
17 <p>
18 <span>字数：</span>
19 <span id="words">0</span>/
20 <span>200</span>
21 <button class="sub">发布</button>
22 </p>
23 </div>
24 <ul>
25 <!--
26 <li>
27 <div class='topDiv'>
28 <img src="" alt="">
29 <span>用户名</span>
30 <p>时间</p>
31 </div>
32 <div class='bottomDiv'>内容</div>
33 </li>
34 -->
35 </ul>
36 <div class="top">⬆️<br>回到顶部</div>
37 <script src="lib/jquery-1.12.4.js"></script>
38 <script src="js/index.js"></script>
39 <script id="model" type="text/html">
40 <li>
41 <div class='topDiv'>
42 <img src="img/03.png">
43 <span>{{name}}</span>
44 <p>发布于：{{time}}</p>
45 </div>
46 <div class='bottomDiv'>{{content}}</div>
47 </li>
48 </script>
49 <script src='js/template-web.js'></script>
50
51 </body>
52
53 </html>
1 var userText = document.querySelector('textarea');
2 var name;
3 var content;
4 var isOk = 0;
5 userText.oninput = function () {
6 $('#words').text(this.value.length);
7 content = userText.value;
8 }
9 document.getElementById('userName').onblur = function () {
10 var xhr = new XMLHttpRequest();
11 name = this.value;
12 xhr.open('POST', '/checkUser');
13 xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
14 xhr.send('username=' + name);
15 xhr.onload = function () {
16 var result = this.responseText;
17 // console.log(result);
18 if (result === 'true') {
19 document.getElementById('msg').innerText = '啊呀这个名字被用过啦！';
20 $('#msg').css('color', 'red');
21 isOk = 0;
22 }
23 else if (result === 'false') {
24 document.getElementById('msg').innerText = 'congratulations! 这个名字可以用！';
25 $('#msg').css('color', 'green');
26 isOk = 1;
27 }
28 if (name === '') {
29 document.getElementById('msg').innerText = '让我知道我喜欢的你叫什么名字好嘛～';
30 $('#msg').css('color', 'gold');
31 }
32
33 }
34 }
35 function resetAll() {
36 document.getElementById('userName').value = '';
37 userText.value = '';
38 $('#words').text('0');
39 document.getElementById('msg').innerText = ' ';
40 name = '';
41 content = '';
42 }
43 // var oldLi = $('ul').children[0];
44 // var newLi = $('ul').children('li');
45 $('.sub').click(function () {
46 var xhrClick = new XMLHttpRequest();
47 var lisHtml = template('model', {
48 name: name,
49 time: new Date().toLocaleString(),
50 content: content,
51 });
52 if (name == '' || content == '') {
53 resetAll();
54 alert('难道你就这么不愿意留言说爱我吗！');
55 }
56 else {
57 if (isOk) {
58 xhrClick.open('POST', '/addMsg');
59 xhrClick.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
60 xhrClick.send('name' + name + '&content' + content);
61 xhrClick.onreadystatechange = function () {
62 if (this.readyState === 4) {
63 if (this.responseText) {
64 $('ul').append(lisHtml);
65 // $('ul').insertBefore(newLi,oldLi);
66 }
67 }
68 }
69 }
70 else {
71 alert('换个名字试试叭！');
72 }
73 }
74 resetAll();
75 })
76 var liTop = $('ul').offset().top;
77 console.log(liTop);
78 $(window).scroll(function() {
79 if($(window).scrollTop() >= liTop) {
80 $('.top').css('display','block');
81 }
82 else {
83 $('.top').css('display','none');
84 }
85 })
86 $('.top').click(function() {
87 $('html,body').animate({scrollTop:0},'linear');
88 })
1 .area {
2 width: 600px;
3 margin: 20px auto;
4 font-size: 14px;
5 }
6 .area img {
7 display: block;
8 margin-top: 30px;
9 margin-bottom: 30px;
10 margin-left: 0;
11 }
12 .area input {
13 outline: none;
14 margin-left: 0px;
15 margin-bottom: 10px;
16 border: 1px solid #666;
17 }
18 .area textarea {
19 width: 100%;
20 height: 200px;
21 resize: none;
22 outline: none;
23 }
24 .area p {
25 display: block;
26 float: right;
27 font-size: 14px;
28 }
29 .area p #words {
30 color: red;
31 display: inline-block;
32 }
33 .area p button {
34 width: 60px;
35 height: 30px;
36 background: skyblue;
37 border-radius: 10px;
38 color: #fff;
39 font-size: 16px;
40 outline: none;
41 }
42 ul {
43 list-style: none;
44 width: 800px;
45 margin: 100px auto;
46 }
47 ul li {
48 height: 100px;
49 border-bottom: 1px dashed #666;
50 padding: 20px 10px;
51 text-align: left;
52 }
53 ul li .topDiv {
54 margin: auto 10px;
55 }
56 ul li .topDiv img {
57 float: left;
58 width: 80px;
59 height: 80px;
60 border-radius: 50%;
61 margin: auto 20px;
62 }
63 ul li .topDiv p {
64 font-size: 12px;
65 color: #666;
66 line-height: 14px;
67 margin: 0;
68 }
69 ul li .bottomDiv {
70 float: left;
71 margin-top: 30px;
72 }
73 .topDiv span {
74 display: block;
75 margin-bottom: 10px;
76 }
77 .top {
78 width: 70px;
79 height: 55px;
80 float: right;
81 text-align: center;
82 display: none;
83 position: fixed;
84 right: 10px;
85 top: 50%;
86 }