html code:
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><37 [>div</Top 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>
index.js Code:
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'); always = 021; 22 is } 23 is the else IF (Result === 'to false' ) { 24 .! Document.getElementById ( 'MSG') the innerText = 'name can Congratulations! ' ; 25 $ (' # MSG ') CSS. (' Color ',' Green ' ); 26 is ISOK =. 1 ; 27 } 28 IF (name ===' ' ) { 29 document.getElementById (' MSG '). innerText = 'let me know that I like what's your name Okay ~' ; 30 $ ( '# msg') CSS ( 'Color', 'Gold'. ); 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 = newThe XMLHttpRequest (); 47 var lisHtml = Template ( 'Model' , { 48 name: name, 49 Time: new new a Date () toLocaleString (),. 50 Content: Content, 51 is }); 52 is IF (name == '' | | Content == '' ) { 53 resetAll (); 54 Alert ( '! do not you love me so reluctant to leave a message' ); 55 } 56 the 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 the else { 71 is Alert ( 'A pair try another name!' ); 72 } 73 is } 74 resetAll (); 75 }) 76 var liTop = $ ( 'UL' ) .offset () Top;. 77 the console.log (liTop); 78 $ (window) .scroll ( function () { 79 IF ($ (window) .scrollTop ()> = liTop) { 80 . $ ( '. Top') CSS ( 'the display', 'Block' ); 81 } 82 the else { 83 . $ ( '. Top') CSS ( 'the display', 'none'); 84 } 85 }) 86 $('.top').click(function() { 87 $('html,body').animate({scrollTop:0},'linear'); 88 })
index.css Code:
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 }