用js編寫(xiě)留言板
本文實(shí)例為大家分享了js編寫(xiě)留言板的具體代碼，供大家參考，具體內(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='請(qǐng)輸入標(biāo)題(1-60個(gè)字符)' 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'> //點(diǎn)擊時(shí)使發(fā)帖界面顯示 var tie = document.getElementsByClassName(’tie’)[0]; tie.onclick = function(){ document.getElementsByClassName(’allFather’)[0].style.display = 'block'; } //獲得節(jié)點(diǎn)上傳 var bt = document.getElementsByClassName('wenb')[0];//獲得標(biāo)題 var bk = document.getElementById(’wyd’);//獲得板塊 var jio = document.getElementsByClassName(’kk’)[0];//獲得多行文本框內(nèi)容 var time = new Date();//獲得時(shí)間 var nian = time.getFullYear();//獲得年份 var dt = time.getMonth();//獲得月份 var r = time.getDate();//獲得日期 var shi = time.getHours();//獲得小時(shí) var fen = time.getMinutes();//獲得分鐘 //實(shí)現(xiàn)上傳 var items = document.getElementsByClassName(’items’)[0];//獲得ul的節(jié)點(diǎn)屬性 //實(shí)現(xiàn)創(chuàng)造新節(jié)點(diǎn) //焦點(diǎn)聚集事件 bt.onfocus = function(){ bt.value = ''; } function cz(){ //先創(chuàng)建li的節(jié)點(diǎn) 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’];//一個(gè)圖片的數(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);//插入大盒子 //實(shí)現(xiàn)盒子左浮動(dòng) hfather.style.display = 'inline-block'; //創(chuàng)建標(biāo)題 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++) {//下拉框的長(zhǎng)度就是它的選項(xiàng)數(shù). if(bk[i].selected == true) { text = bk[i].innerHTML;//獲取當(dāng)前選擇項(xiàng)的值. }} var bkl = document.createElement(’span’); hfather.appendChild(bkl); bkl.style.color = 'gray'; bkl.innerHTML = '板塊:' + text; console.log(bkl.innerHTML); //創(chuàng)建時(shí)間板塊 var tbk = document.createElement(’span’); hfather.appendChild(tbk); tbk.style.marginLeft = '15px'; tbk.style.color = 'gray'; tbk.innerHTML = '發(fā)表時(shí)間:' + nian + '-' + (dt+1) + '-' + r + ' ' + shi + ':' + fen; document.getElementsByClassName(’allFather’)[0].style.display = 'none'; bt.value = '請(qǐng)輸入標(biāo)題(1-60個(gè)字符)'; jio.value = ''; bk[0].selected = true; } </script></html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. PHP正則表達(dá)式函數(shù)preg_replace用法實(shí)例分析2. 一個(gè) 2 年 Android 開(kāi)發(fā)者的 18 條忠告3. vue使用moment如何將時(shí)間戳轉(zhuǎn)為標(biāo)準(zhǔn)日期時(shí)間格式4. js select支持手動(dòng)輸入功能實(shí)現(xiàn)代碼5. Android 實(shí)現(xiàn)徹底退出自己APP 并殺掉所有相關(guān)的進(jìn)程6. Android studio 解決logcat無(wú)過(guò)濾工具欄的操作7. 什么是Python變量作用域8. vue-drag-chart 拖動(dòng)/縮放圖表組件的實(shí)例代碼9. Spring的異常重試框架Spring Retry簡(jiǎn)單配置操作10. Vue實(shí)現(xiàn)仿iPhone懸浮球的示例代碼
網(wǎng)公網(wǎng)安備