用js編寫留言板
阿新 • • 發佈:2020-03-18
本文例項為大家分享了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 class="allFather" style="display: none;"> <input type="text" value="請輸入標題(1-60個字元)" class="wenb"> <div class="two"> 所屬板塊 <select name="" id="wyd" 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>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。