用js編寫留言板
本文實例為大家分享了js編寫留言板的具體代碼，供大家參考，具體內容如下
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Document</title> <style type='text/css'> *{ margin:0px; padding: 0px; font-size: 12px; } .tie{ width: 70px; height: 30px; background:pink; border-radius: 10%; } .an{ width: 70px; height: 30px; background:pink; border-radius: 10%; } .allFather{ position: fixed; left: 250px; top: 0px; border:1px solid gray; width: 300px; height: 300px; } .wenb{ width: 260px; height:25px; margin-top: 10px; margin-left: 10px; color: gray; } .two{ margin-top: 10px; margin-left: 10px; } .jj{ width: 120px; height: 25px; } .kk{ margin-top: 10px; margin-left: 10px; width: 260px; } .an{ margin-top: 10px; margin-left: 10px; } </style></head><body> <button class='tie'>我要發帖</button> <ul class='items'></ul> <div style='display: none;'> <input type='text' value='請輸入標題(1-60個字符)' class='wenb'> <div class='two'> 所屬板塊 <select name='' class='jj'> <option value=''>英雄聯盟</option> <option value=''>穿越火線</option> <option value=''>qq飛車</option> <option value=''>地下城與勇士</option> <option value=''>逆戰</option> </select> </div> <textarea name='' id='' cols='30' rows='10' class='kk'></textarea> <button 'cz()' class='an'>發布</button> </div></body> <script type='text/javascript'> //點擊時使發帖界面顯示 var tie = document.getElementsByClassName(’tie’)[0]; tie.onclick = function(){ document.getElementsByClassName(’allFather’)[0].style.display = 'block'; } //獲得節點上傳 var bt = document.getElementsByClassName('wenb')[0];//獲得標題 var bk = document.getElementById(’wyd’);//獲得板塊 var jio = document.getElementsByClassName(’kk’)[0];//獲得多行文本框內容 var time = new Date();//獲得時間 var nian = time.getFullYear();//獲得年份 var dt = time.getMonth();//獲得月份 var r = time.getDate();//獲得日期 var shi = time.getHours();//獲得小時 var fen = time.getMinutes();//獲得分鐘 //實現上傳 var items = document.getElementsByClassName(’items’)[0];//獲得ul的節點屬性 //實現創造新節點 //焦點聚集事件 bt.onfocus = function(){ bt.value = ''; } function cz(){ //先創建li的節點 var Li = document.createElement(’li’); //然后插入到ul中 items.appendChild(Li); Li.style.listStyle = 'none'; //創建圖片 var img = document.createElement(’img’); Li.appendChild(img);//在li中插入圖片 var isz = [’../images/sdg.jpg’,’../images/dfggfhs.jpg’];//一個圖片的數組 var index = Math.floor(Math.random()*2); img.style.width = '50px'; img.style.height = '50px'; img.style.borderRadius = '50%'; img.setAttribute(’src’,isz[index]); //創建圖片右邊內容的大盒子 var hfather = document.createElement(’div’); Li.appendChild(hfather);//插入大盒子 //實現盒子左浮動 hfather.style.display = 'inline-block'; //創建標題 var libt = document.createElement(’p’); hfather.appendChild(libt); libt.style.fontSize = '20px'; libt.style.color = 'black'; libt.style.fontWeight = 'bloder'; libt.style.marginBottom = '5px'; libt.innerHTML = bt.value;//填充內容 //創建板塊 var text = ''; for(i = 0;i < bk.length; i++) {//下拉框的長度就是它的選項數. if(bk[i].selected == true) { text = bk[i].innerHTML;//獲取當前選擇項的值. }} var bkl = document.createElement(’span’); hfather.appendChild(bkl); bkl.style.color = 'gray'; bkl.innerHTML = '板塊:' + text; console.log(bkl.innerHTML); //創建時間板塊 var tbk = document.createElement(’span’); hfather.appendChild(tbk); tbk.style.marginLeft = '15px'; tbk.style.color = 'gray'; tbk.innerHTML = '發表時間:' + nian + '-' + (dt+1) + '-' + r + ' ' + shi + ':' + fen; document.getElementsByClassName(’allFather’)[0].style.display = 'none'; bt.value = '請輸入標題(1-60個字符)'; jio.value = ''; bk[0].selected = true; } </script></html>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。
相關文章：
網公網安備