用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 相关文章推荐
Jquery中获取iframe的代码
Jan 11 Javascript
Jquery 插件开发笔记整理
Jan 17 Javascript
在Windows上安装Node.js模块的方法
Sep 25 Javascript
jquery判断浏览器类型的代码
Nov 05 Javascript
JS添加删除一组文本框并对输入信息加以验证判断其正确性
Apr 11 Javascript
对Jquery中的ajax再封装,简化操作示例
Feb 12 Javascript
jquery 构造函数在表单提交过程中修改数据
May 25 Javascript
WEB开发之注册页面验证码倒计时代码的实现
Dec 15 Javascript
React + webpack 环境配置的方法步骤
Sep 07 Javascript
vue项目中应用ueditor自定义上传按钮功能
Apr 27 Javascript
vue 弹框产生的滚动穿透问题的解决
Sep 21 Javascript
vue-router 2.0 跳转之router.push()用法说明
Aug 12 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
为IP查询添加GOOGLE地图功能的代码
2010/08/08 PHP
PHP中SimpleXML函数用法分析
2014/11/26 PHP
PHP数组操作类实例
2015/07/11 PHP
php中的依赖注入实例详解
2019/08/14 PHP
js中几种去掉字串左右空格的方法
2006/12/25 Javascript
jQuery 事件队列调整方法
2009/09/18 Javascript
javascript 语法基础 想学习js的朋友可以看看
2009/12/16 Javascript
javascript中的=等号个数问题两个跟三个有什么区别
2013/10/23 Javascript
浅析Js中的单引号与双引号问题
2013/11/06 Javascript
JS组件系列之使用HTML标签的data属性初始化JS组件
2016/09/14 Javascript
jquery实现点击页面回到顶部
2016/11/23 Javascript
微信小程序开发图片拖拽实例详解
2017/05/05 Javascript
动态加载权限管理模块中的Vue组件
2018/01/16 Javascript
angular写一个列表的选择全选交互组件的示例
2018/01/22 Javascript
JS运动特效之完美运动框架实例分析
2018/01/24 Javascript
深入剖析Node.js cluster模块
2018/05/23 Javascript
JS实现十分钟倒计时代码实例
2018/10/18 Javascript
基于JS实现web端录音与播放功能
2019/04/17 Javascript
使用layui 的layedit定义自己的toolbar方法
2019/09/18 Javascript
jQuery实现的移动端图片缩放功能组件示例
2020/05/01 jQuery
javascript使用正则表达式实现注册登入校验
2020/09/23 Javascript
使用webpack5从0到1搭建一个react项目的实现步骤
2020/12/16 Javascript
WebStorm无法正确识别Vue3组合式API的解决方案
2021/02/18 Vue.js
Python模块学习 re 正则表达式
2011/05/19 Python
Python类属性的延迟计算
2016/10/22 Python
python 读取视频,处理后,实时计算帧数fps的方法
2018/07/10 Python
python解析xml简单示例
2019/06/21 Python
Python中使用filter过滤列表的一个小技巧分享
2020/05/02 Python
Ubuntu 20.04安装Pycharm2020.2及锁定到任务栏的问题(小白级操作)
2020/10/29 Python
html5 canvas 使用示例
2010/10/22 HTML / CSS
英国领先的酒类网上商城:TheDrinkShop
2017/03/16 全球购物
自荐信格式
2013/12/01 职场文书
爱心捐助倡议书
2014/05/19 职场文书
2015年检察院个人工作总结
2015/05/20 职场文书
美容院员工规章制度
2015/08/05 职场文书
Java Optional<Foo>转换成List<Bar>的实例方法
2021/06/20 Java/Android