用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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持好吧啦网。
相关文章：
网公网安备