蝙蝠岛资源网 Design By www.hbtsch.com
本文实例为大家分享了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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
标签:
js,留言板
蝙蝠岛资源网 Design By www.hbtsch.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
蝙蝠岛资源网 Design By www.hbtsch.com
暂无用js编写留言板的评论...
更新日志
2024年12月23日
2024年12月23日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]