三零网 www.q3060.com -- 技术、分享、进步
当前位置: > 网络编程 > CSS/HTML > html5实例:JS+CSS模拟可以无刷新显示内容的留言板功能的表单表格代码

html5实例:JS+CSS模拟可以无刷新显示内容的留言板功能的表单表格代码

投稿:mmqxmq2p  发布时间:2018-02-01  【手机版】  人气:

导读:三零(q3060.com)小编琪琪接下来为你介绍一下关于表单表格的技巧,希望对您有帮助。那么下面我们一起看看,具体内容所述如下:

<!DOCTYPE html PUBLIC "-//W3C//h2D XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/h2D/xhtml1-transitional.h2d">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JS+CSS模拟可以无刷新显示内容的留言板功能</title>
<style type="text/css">
* { padding: 0; margin: 0; }
li { list-style: none; }
#parent { width: 600px; margin: 0 auto; }
h4 { line-height: 40px; margin-bottom: 10px; border-bottom: 1px solid #333; color:#FF3300 }
p { width: 100%; background: #f1f1f1; position: relative; margin-bottom: 25px; }
#box { width: 580px; padding: 25px 10px 0; border: 1px solid #ddd; margin-bottom: 10px; }
span { position: absolute; top: -20px; right: 0px; }
em { position: relative; top: -13px; }
#text { width: 100%; height: 90px; overflow: auto; }
#btn { width: 20%; height: 50px; }
</style>
<script type="text/javascript">
i=1;
function fnsubmit()
{
  var odiv=document.getElementById("box");
  var oem=odiv.getElementsByTagName("em")[0];
  var otext=document.getElementById("text");
  var oli=odiv.getElementsByTagName("li");
  var add_li=document.createElement("li");
  var o_span=document.createElement("span");
  
   if(otext.value=="")
 {
  alert("请填写留言内容!");
  return;
 }
  
  oem.style.display="none";
  o_span.style.position="absolute";
  o_span.style.top="-20px";
  o_span.style.right="20px";
  o_span.style.background="#cccccc";
  
  add_li.style.position="relative";
  add_li.index=i;
  add_li.style.background="#cccccc";
  add_li.style.marginBottom="20px";
  var str=document.createTextNode(i+"、"+otext.value);
  var strspan=document.createTextNode("确定删除"+i+"、"+otext.value+"内容?");
  add_li.appendChild(o_span);
  o_span.style.display="none";
  o_span.appendChild(strspan);
  add_li.appendChild(str);
  
  odiv.appendChild(add_li);
  i++;
  
  for(j=0;j<oli.length;j++)
  {
   var m=j;
   oli[j].onmouseover=function()
 {
  this.style.background="#ffff00";
  (this.childNodes(o_span)).style.display="block";
   
 };
  oli[j].onmouseout=function()
 {
  this.style.background="#cccccc";
  (this.childNodes(o_span)).style.display="none";
 };
  oli[j].onclick=function()
 {
  
  m--;
  odiv.removeChild(this); 
  if(m<0)
  {
   oem.style.display="block";
  };
 };
  };
}
</script>
</head>
<body>
<div id="parent">
 <h4>留言内容:</h4>
 <div id="box"><em>这里会显示留言内容……</em></div>
 <input type="text" id="text"><br />
 <input id="btn" type="button" onclick="fnsubmit()" value="发表留言" />
</div>
<br />
</body>
</html>

<br><br><hr> 收集于互联网,只为兴趣与学习交流,不作商业用途。来源:网页代码站</font></p>

结语:以上就是分享给大家的表单表格内容了,希望大家多多支持三零网站。更多知识点,可以能过本站网页顶端的搜索或进入相关专题,如果有任何疑问都可以一起留言交流。

●【往下看,下一页更精彩】●
1  2  3  4  5  6  7  下一页 
延伸阅读:
·html5实例:复选框限制,超过限制即弹出警告框的表单表格代码
·html5实例:JS控制超过长度限制后自动跳转下一款文本框的表单表格代码
·html5实例:JS+CSS实现可以凹陷显示选中的单元格的表单表格代码
·html5实例:JS实现很酷的EMAIL地址添加功能的表单表格代码
·html5实例:两种Select下拉列表跳转菜单的表单表格代码
·html5实例:CSS美化的按钮样式,感应鼠标更换边框颜色的表单表格代码
·html5实例:jQuery实现感应鼠标动画效果自动伸长的输入框的表单表格代码
·html5实例:文本框内输入文字倒计数特效的表单表格代码
·html5实例:CSS+JS仿类似新浪微博搜索框的特效的表单表格代码
·html5实例:推荐CSS高仿Excel表格功能的表单表格代码
  
温馨提示:以上内容整理于网络,仅供参考,如果对您有帮助,请收藏本网站!
大家感兴趣的内容
最新的内容
热门搜索
三零网 | 网站地图 | 最近更新 | 八千壁纸 | 512素材 | 最近更新 | 关于我们 | 联系方式 | |

Copyright © 2012-2020,Q3060.COM All Rights Reserved.