用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自动显示最后更新时间
Mar 15 Javascript
JavaScript格式化数字的函数代码
Nov 30 Javascript
11款新鲜的jQuery插件[附所有demo下载]
Jan 24 Javascript
引用外部js乱码问题分析及解决方案
Apr 12 Javascript
Bootstrap网格系统详解
Apr 26 Javascript
JS Array创建及concat()split()slice()的使用方法
Jun 03 Javascript
JavaScript动态检验密码强度的实现方法
Nov 09 Javascript
Javascript中构造函数要注意的一些坑
Jan 23 Javascript
Bootstrap table简单使用总结
Feb 15 Javascript
jQuery动态追加页面数据以及事件委托详解
May 06 jQuery
微信小程序日历效果
Dec 29 Javascript
在微信小程序中使用vant的方法
Jun 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 mssql 数据库分页SQL语句
2008/12/16 PHP
延时重复执行函数 lLoopRun.js
2007/05/08 Javascript
Node.js插件的正确编写方式
2014/08/03 Javascript
js实现鼠标悬停图片上时滚动文字说明的方法
2015/02/17 Javascript
window.setInterval()方法的定义和用法及offsetLeft与style.left的区别
2015/11/11 Javascript
JavaScript操作select元素和option的实例代码
2016/01/29 Javascript
javascript的document中的动态添加标签实现方法
2016/10/24 Javascript
codeMirror插件使用讲解
2017/01/16 Javascript
微信小程序 引用其他js文件实现代码
2017/02/22 Javascript
vue2.0页面前进刷新回退不刷新的实现方法
2018/07/31 Javascript
解决Vue2.0 watch对象属性变化监听不到的问题
2018/09/11 Javascript
JS实现水平遍历和嵌套递归操作示例
2019/08/15 Javascript
Vue+Node实现的商城用户管理功能示例
2019/12/23 Javascript
[03:12]2016完美“圣”典风云人物:单车专访
2016/12/02 DOTA
基于进程内通讯的python聊天室实现方法
2015/06/28 Python
Python爬取网易云音乐上评论火爆的歌曲
2017/01/19 Python
python对矩阵进行转置的2种处理方法
2019/07/17 Python
Python爬虫实现“盗取”微信好友信息的方法分析
2019/09/16 Python
wxPython色环电阻计算器
2019/11/18 Python
Python迭代器Iterable判断方法解析
2020/03/16 Python
python 连续不等式语法糖实例
2020/04/15 Python
详解python datetime模块
2020/08/17 Python
pandas数据分组groupby()和统计函数agg()的使用
2021/03/04 Python
阿拉伯世界最大的电子商务网站:Souq沙特阿拉伯
2016/10/28 全球购物
聪明的粉丝购买门票的地方:TickPick
2018/03/09 全球购物
介绍一下内联、左联、右联
2013/12/31 面试题
交通事故赔偿协议书范本
2014/04/15 职场文书
干部个人对照检查材料
2014/08/25 职场文书
拉贝日记观后感
2015/06/05 职场文书
钢铁是怎样炼成的读书笔记
2015/06/29 职场文书
2019年描写人生经典诗句大全
2019/07/08 职场文书
深入理解python协程
2021/06/15 Python
如何设置多台电脑共享打印机?多台电脑共享打印机的方法
2022/04/08 数码科技
MySQL运行报错:“Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggre”解决方法
2022/06/14 MySQL
Apache POI操作批量导入MySQL数据库
2022/06/21 Servers
Zabbix对Kafka topic积压数据监控的解决方案
2022/07/07 Servers