用js编写留言板


Posted in Javascript onMarch 17, 2020

本文实例为大家分享了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
通过 Dom 方法提高 innerHTML 性能
Mar 26 Javascript
Javascript倒计时代码
Aug 12 Javascript
javascript和HTML5利用canvas构建猜牌游戏实现算法
Jul 17 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
Sep 06 Javascript
JavaScript实现对下拉列表值进行排序的方法
Jul 15 Javascript
vue.js表格组件开发的实例详解
Oct 12 Javascript
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
Oct 24 Javascript
vue2.0中goods选购栏滚动算法的实现代码
May 17 Javascript
JS基于正则表达式实现的密码强度验证功能示例
Sep 21 Javascript
详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据
Nov 11 Javascript
Vue之beforeEach非登录不能访问的实现(代码亲测)
Jul 18 Javascript
解决layui使用layui-icon出现默认图标的问题
Sep 11 Javascript
Vue脚手架编写试卷页面功能
Mar 17 #Javascript
基于JavaScript实现留言板功能
Mar 16 #Javascript
JS实现简易留言板(节点操作)
Mar 16 #Javascript
JavaScript实现旋转木马轮播图
Mar 16 #Javascript
基于JavaScript实现贪吃蛇游戏
Mar 16 #Javascript
原生js实现的金山打字小游戏(实例代码详解)
Mar 16 #Javascript
JavaScript实现拖拽效果
Mar 16 #Javascript
You might like
PHP 木马攻击防御技巧
2009/06/13 PHP
如何用php获取程序执行的时间
2013/06/09 PHP
Codeigniter实现处理用户登录验证后的URL跳转
2014/06/12 PHP
PHP实现自动登入google play下载app report的方法
2014/09/23 PHP
Laravel实现用户注册和登录
2015/01/23 PHP
PHP进程同步代码实例
2015/02/12 PHP
PHP实现上一篇下一篇的方法实例总结
2016/09/22 PHP
PHP判断是否是微信打开,浏览器打开的方法
2018/03/14 PHP
JavaScript 页面编码与浏览器类型判断代码
2010/06/03 Javascript
javascript中验证大写字母、数字和中文
2014/01/15 Javascript
使用原生js实现页面蒙灰(mask)效果示例代码
2014/06/20 Javascript
如何编写高质量JS代码
2014/12/28 Javascript
jquery操作select元素和option的实例代码
2016/02/03 Javascript
利用原生js和jQuery实现单选框的勾选和取消操作的方法
2016/09/04 Javascript
jQuery ready()和onload的加载耗时分析
2016/09/08 Javascript
VUE-cli3使用 svg-sprite-loader
2018/10/20 Javascript
React中阻止事件冒泡的问题详析
2019/04/12 Javascript
Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换(推荐)
2019/05/08 Javascript
node.js通过Sequelize 连接MySQL的方法
2020/12/28 Javascript
[01:03:33]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
[01:50:49]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第三场 1月24日
2021/03/11 DOTA
python中enumerate的用法实例解析
2014/08/18 Python
python实现树形打印目录结构
2018/03/29 Python
利用pandas进行大文件计数处理的方法
2018/07/25 Python
python tkinter canvas 显示图片的示例
2019/06/13 Python
python DES加密与解密及hex输出和bs64格式输出的实现代码
2020/04/13 Python
利用4行Python代码监测每一行程序的运行时间和空间消耗
2020/04/22 Python
Python图像阈值化处理及算法比对实例解析
2020/06/19 Python
python logging模块的使用
2020/09/07 Python
Python实现手势识别
2020/10/21 Python
Python利用matplotlib绘制散点图的新手教程
2020/11/05 Python
年会搞笑主持词
2014/03/27 职场文书
社区学习雷锋活动总结
2014/04/25 职场文书
三严三实学习心得体会(精选N篇)
2016/01/05 职场文书
使用Golang的channel交叉打印两个数组的操作
2021/04/29 Golang
python双向链表实例详解
2022/05/25 Python