用js編寫留言板
本文實例為大家分享了js編寫留言板的具體代碼，供大家參考，具體內(nèi)容如下
<!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'>我要發(fā)帖</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=''>英雄聯(lián)盟</option> <option value=''>穿越火線</option> <option value=''>qq飛車</option> <option value=''>地下城與勇士</option> <option value=''>逆戰(zhàn)</option> </select> </div> <textarea name='' id='' cols='30' rows='10' class='kk'></textarea> <button 'cz()' class='an'>發(fā)布</button> </div></body> <script type='text/javascript'> //點擊時使發(fā)帖界面顯示 var tie = document.getElementsByClassName(’tie’)[0]; tie.onclick = function(){ document.getElementsByClassName(’allFather’)[0].style.display = 'block'; } //獲得節(jié)點上傳 var bt = document.getElementsByClassName('wenb')[0];//獲得標題 var bk = document.getElementById(’wyd’);//獲得板塊 var jio = document.getElementsByClassName(’kk’)[0];//獲得多行文本框內(nèi)容 var time = new Date();//獲得時間 var nian = time.getFullYear();//獲得年份 var dt = time.getMonth();//獲得月份 var r = time.getDate();//獲得日期 var shi = time.getHours();//獲得小時 var fen = time.getMinutes();//獲得分鐘 //實現(xiàn)上傳 var items = document.getElementsByClassName(’items’)[0];//獲得ul的節(jié)點屬性 //實現(xiàn)創(chuàng)造新節(jié)點 //焦點聚集事件 bt.onfocus = function(){ bt.value = ''; } function cz(){ //先創(chuàng)建li的節(jié)點 var Li = document.createElement(’li’); //然后插入到ul中 items.appendChild(Li); Li.style.listStyle = 'none'; //創(chuàng)建圖片 var img = document.createElement(’img’); Li.appendChild(img);//在li中插入圖片 var isz = [’../images/sdg.jpg’,’../images/dfggfhs.jpg’];//一個圖片的數(shù)組 var index = Math.floor(Math.random()*2); img.style.width = '50px'; img.style.height = '50px'; img.style.borderRadius = '50%'; img.setAttribute(’src’,isz[index]); //創(chuàng)建圖片右邊內(nèi)容的大盒子 var hfather = document.createElement(’div’); Li.appendChild(hfather);//插入大盒子 //實現(xiàn)盒子左浮動 hfather.style.display = 'inline-block'; //創(chuàng)建標題 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;//填充內(nèi)容 //創(chuàng)建板塊 var text = ''; for(i = 0;i < bk.length; i++) {//下拉框的長度就是它的選項數(shù). 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); //創(chuàng)建時間板塊 var tbk = document.createElement(’span’); hfather.appendChild(tbk); tbk.style.marginLeft = '15px'; tbk.style.color = 'gray'; tbk.innerHTML = '發(fā)表時間:' + 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>
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關文章：
1. ASP.NET MVC使用Boostrap實現(xiàn)產(chǎn)品展示、查詢、排序、分頁2. ASP.NET MVC使用JSAjaxFileUploader插件實現(xiàn)單文件上傳3. 使用ajax跨域調(diào)用springboot框架的api傳輸文件4. 詳解php反序列化5. 解決python logging遇到的坑 日志重復打印問題6. Python 實現(xiàn)自動化Excel報表的步驟7. Android實現(xiàn)下載進度條效果8. PHP數(shù)組操作詳細解釋9. Python dict的常用方法示例代碼10. Java String不可變性實現(xiàn)原理解析
網(wǎng)公網(wǎng)安備