JS+CSS模拟可以无刷新显示内容的留言板实例
作者:代码家园 发布时间:2024-04-19 10:17:13
标签:JS,CSS,留言板
本文实例讲述了JS+CSS模拟可以无刷新显示内容的留言板功能。分享给大家供大家参考。具体实现方法如下:
<!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>
运行效果如下图所示:
希望本文所述对大家的javascript程序设计有所帮助。
0
投稿
猜你喜欢
- #!/usr/bin/env python# -*- coding:utf-8 -*-# *************************
- 我就废话不多说了,大家还是直接看代码吧!绘制曲线:import timeimport numpy as npimport matplotli
- set oSQLServer =server.createobject("SQLDMO.SQLServer"
- 使用实例引用类的属性时,会发生动态绑定。即python会在实例每次引用类属性时,将对应的类属性绑定到实例上。动态绑定的例子:class A:
- 什么是闭包:闭包是一个存在内部函数的引用关系。该引用指向的是外部函数的局部变量对象(前提是内部函数使用了外部函数的局部变量)闭包的作用:延长
- 加入CDC的这段日子里,工作中积累的小心得都密密麻麻的收在册子里。恰逢近期的校园招聘正如火如荼的展开着,借此机会,我把这一些不太成熟的小想法
- 题目:用 JavaScript 代码实现空位补零,比如 pad(12, 3) => 012实现一:/* 平淡无奇法 */functio
- 前言相信对于python开发人员来说,机器上有不同的python版本是很正常的,因为开发的项目有的用2.6或2.7,有的就要用3.0+版本,
- 这篇博客主要是为了学习Python和PyQt,因为对棋类游戏比较热衷,所以从规则较简单的五子棋入手,利用PyQt5实现图形界面,做一个可以进
- 我们知道Python的内置dictionary数据类型是无序的,通过key来获取对应的value。可是有时我们需要对dictionary中
- 引言日常开发中,我们经常会使用到group by。亲爱的小伙伴,你是否知道group by的工作原理呢?group by和having有什么
- 1、索引优化1.1 建表或加索引时,保证表里互相不存在冗余索引。对于MySQL来说,如果表里已经存在key(a,b),则key(a)为冗余索
- 引言在做科学计算或者模拟仿真的时候,相信不少小伙伴会遇到这样的问题,比如,我们有一个一维数组如下所示:array = [1, 2, 3, 4
- 概述:前段时间在跟其他公司DBA交流时谈到了mysql跟PG之间在多表关联查询上的一些区别,相比之下mysql只有一种表连接类型:嵌套循环连
- 我们现在一般网站都是利用的MySQL数据库搭建网站的,但是在网上看到很多网友吐槽数据库连接不上的问题,现在我就结合相关资料向提出一些我个人的
- 文件处理流程1.打开文件,得到文件句柄并赋值给一个变量2.通过句柄对文件进行操作3.关闭文件 r模式,默认模式,文件不存在则报错w
- 本文实例讲述了Python实现生成随机数据插入mysql数据库的方法。分享给大家供大家参考,具体如下:运行结果:实现代码:import ra
- 本文实例讲述了Java实现基于JDBC操作mysql数据库的方法。分享给大家供大家参考,具体如下:package main;import j
- 原理:建一个栈,每次碰到一个新标签,就与栈顶的标签配对,如果配对,栈顶的标签就出栈,如果不配对,这个新标签就进栈,最终,栈如果是空的,说明所
- 如何显示已在数据库编码了的相对应的记录?我做了一个歌曲库,在查询中使用了几个下拉菜单供选择条件用,如歌手的性别、区域、爱好等,由于选项太多,