用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 相关文章推荐
用 JavaScript 迁移目录
Dec 18 Javascript
javascript编程起步(第二课)
Jan 10 Javascript
基于pthread_create,readlink,getpid等函数的学习与总结
Jul 17 Javascript
jquery 列表双向选择器之改进版
Aug 09 Javascript
javascript中递归函数用法注意点
Jul 30 Javascript
基于jquery实现百度新闻导航菜单滑动动画
Mar 15 Javascript
javascript 数组的正态分布排序的问题
Jul 31 Javascript
微信JSAPI支付操作需要注意的细节
Jan 10 Javascript
js判断手机系统是android还是ios
Mar 07 Javascript
利用ECharts.js画K线图的方法示例
Jan 10 Javascript
vue+AI智能机器人回复功能实现
Jul 16 Javascript
react实现复选框全选和反选组件效果
Aug 25 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 OPCode缓存 APC详细介绍
2010/10/12 PHP
浅析PHP绘图技术
2013/07/03 PHP
PHP框架Laravel插件Pagination实现自定义分页
2020/04/22 PHP
Yii2实现log输出到file及database的方法
2016/11/12 PHP
PHP环形链表实现方法示例
2017/09/15 PHP
php实现登录页面的简单实例
2019/09/29 PHP
jquery json 实例代码
2010/12/02 Javascript
Javascript this 的一些学习总结
2012/08/02 Javascript
jQuery点击tr实现checkbox选中的方法
2013/03/19 Javascript
Jqgrid设置全选(选择)及获取选择行的值示例代码
2013/12/28 Javascript
分享一个常用的javascript静态类
2014/12/31 Javascript
jQuery实现复选框成对选择及对应取消的方法
2015/03/03 Javascript
jquery获取当前元素索引值用法实例
2015/06/10 Javascript
基于node实现websocket协议
2016/04/25 Javascript
Bootstrap在线电子商务网站实战项目5
2016/10/14 Javascript
Vue中的数据监听和数据交互案例解析
2017/07/12 Javascript
微信小程序开发之animation循环动画实现的让云朵飘效果
2017/07/14 Javascript
jquery操作ul的一些操作笔记整理(干货)
2017/08/31 jQuery
Vue不能检测到Object/Array更新的情况的解决
2018/06/26 Javascript
微信小程序tab左右滑动切换功能的实现代码
2021/02/08 Javascript
[01:12](回顾)DOTA2国际邀请赛,全世界DOTAer的盛宴
2014/07/01 DOTA
python+influxdb+shell编写区域网络状况表
2018/07/27 Python
python八皇后问题的解决方法
2018/09/27 Python
python日志模块logbook使用方法
2019/09/19 Python
python里的单引号和双引号的有什么作用
2020/06/17 Python
Python 在函数上添加包装器
2020/07/28 Python
Python爬虫实战案例之爬取喜马拉雅音频数据详解
2020/12/07 Python
HTML5 video 事件应用示例
2014/09/11 HTML / CSS
html5手机端页面可以向右滑动导致样式受影响的问题
2018/06/20 HTML / CSS
法国设计制造的扫帚和刷子:Andrée Jardin
2018/12/06 全球购物
当一个对象被当作参数传递到一个方法后,此方法可改变这个对象的属性,并可返回变化后的结果,那么这里到底是值传递还是引用传递?
2014/09/09 面试题
师范应届毕业生自荐信
2013/11/18 职场文书
大一自我鉴定范文
2013/12/27 职场文书
女生节标语
2014/06/26 职场文书
组织生活会表态发言材料
2014/10/17 职场文书
机关干部作风建设剖析材料
2014/10/23 职场文书