用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 相关文章推荐
Dojo 学习要点
Sep 03 Javascript
jquery $.getJSON()跨域请求
Dec 21 Javascript
javascript-简单的计算器实现步骤分解(附图)
May 30 Javascript
javascript中对Attr(dom中属性)的操作示例讲解
Dec 02 Javascript
Web性能优化系列 10个提升JavaScript性能的技巧
Sep 27 Javascript
JS实现的系统调色板完整实例
Dec 21 Javascript
基于Bootstrap模态对话框只加载一次 remote 数据的解决方法
Jul 09 Javascript
js Element Traversal规范中的元素遍历方法
Apr 19 Javascript
js中自定义react数据验证组件实例详解
Oct 19 Javascript
在微信小程序中使用mqtt服务的方法
Dec 13 Javascript
JavaScript canvas实现雨滴特效
Jan 10 Javascript
浅谈JavaScript浅拷贝和深拷贝
Nov 07 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/07/09 PHP
Linux fgetcsv取得的数组元素为空字符串的解决方法
2011/11/25 PHP
使用PHP+MySql实现微信投票功能实例代码
2017/09/29 PHP
js二维数组定义和初始化的三种方法总结
2014/03/03 Javascript
数据结构中的各种排序方法小结(JS实现)
2016/07/23 Javascript
浅谈javascript:两种注释,声明变量,定义函数
2016/10/05 Javascript
javascript基础练习之翻转字符串与回文
2017/02/20 Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
2017/02/23 Javascript
一步步教会你微信小程序的登录鉴权
2018/04/09 Javascript
vue获取时间戳转换为日期格式代码实例
2019/04/17 Javascript
微信小程序实现身份证取景框拍摄
2020/09/09 Javascript
[42:32]Secret vs Optic 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[01:32:50]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第一场 1月25日
2021/03/11 DOTA
Python自定义函数的创建、调用和函数的参数详解
2014/03/11 Python
在Python中用has_key()方法查找键是否存在的教程
2015/05/21 Python
Python使用回溯法子集树模板获取最长公共子序列(LCS)的方法
2017/09/08 Python
Python字符串格式化%s%d%f详解
2018/02/02 Python
django manage.py扩展自定义命令方法
2018/05/27 Python
Pandas中DataFrame的分组/分割/合并的实现
2019/07/16 Python
python按键按住不放持续响应的实例代码
2019/07/17 Python
Pytorch mask_select 函数的用法详解
2020/02/18 Python
python logging.info在终端没输出的解决
2020/05/12 Python
Ubuntu 20.04安装Pycharm2020.2及锁定到任务栏的问题(小白级操作)
2020/10/29 Python
运行python提示no module named sklearn的解决方法
2020/11/29 Python
HTML5 拖拽批量上传文件的示例代码
2018/03/28 HTML / CSS
html5+css如何实现中间大两头小的轮播效果
2018/12/06 HTML / CSS
管理学专业个人求职信范文
2013/12/13 职场文书
《三顾茅庐》教学反思
2014/04/10 职场文书
个人自荐材料
2014/05/23 职场文书
人事行政专员岗位职责
2014/07/23 职场文书
机关副主任个人四风问题整改措施
2014/09/26 职场文书
2015学校图书管理员工作总结
2015/05/11 职场文书
2016年小学推普宣传周活动总结
2016/04/06 职场文书
成本低的5个创业项目:投资小、赚钱快
2019/08/20 职场文书
MySQL 角色(role)功能介绍
2021/04/24 MySQL
详解Go语言Slice作为函数参数的使用
2021/07/02 Golang