用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飛車(chē)</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. Python如何實(shí)現(xiàn)感知器的邏輯電路2. JS實(shí)現(xiàn)表單中點(diǎn)擊小眼睛顯示隱藏密碼框中的密碼3. JS錯(cuò)誤處理與調(diào)試操作實(shí)例分析4. asp讀取xml文件和記數(shù)5. python基于scrapy爬取京東筆記本電腦數(shù)據(jù)并進(jìn)行簡(jiǎn)單處理和分析6. 原生js實(shí)現(xiàn)的觀察者和訂閱者模式簡(jiǎn)單示例7. Python ellipsis 的用法詳解8. 在終端啟動(dòng)Python時(shí)報(bào)錯(cuò)的解決方案9. 基于android studio的layout的xml文件的創(chuàng)建方式10. xml中的空格之完全解說(shuō)
網(wǎng)公網(wǎng)安備