动态创建DIV，从页面右下角缓缓升起-优快云博客

本文通过JavaScript实现了一个简单的网页交互示例，展示了如何动态地创建并显示一个包含链接的DIV元素，并提供了删除该元素的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>
 <script language="javascript">
	var count = 0;
	var timeobj;
	function createDiv(){
		var divW = 180;
		var divH = 220;
		var msgObj = document.getElementById("msgDivId");

		if(msgObj!=null && parseInt(msgObj.style.top)<document.body.clientHeight-divH){
			window.clearTimeout(timeobj);
			return false;
		}

		delDiv();
		var msgDiv = document.createElement("div");
		msgDiv.id = "msgDivId";
		msgDiv.style.position = "absolute";
		count += 10;
		msgDiv.style.top = document.body.clientHeight - count;
		msgDiv.style.left = document.body.clientWidth - divW;
		msgDiv.style.width = divW;
		msgDiv.style.height = divH;

		msgDiv.style.background = '#FEEFA0';
		msgDiv.style.border = "1px solid #6633FF";
		msgDiv.align = "center";
		var str = "<br><br><a href='http://www.baidu.com'>百度</a>";
		str += "<br><br><a href='http://www.google.cn'>谷歌</a>";
		str += "<br><br><a href='http://cache.tianya.cn/index.htm'>天涯</a>";
		str += "<br><br><a href='http://mail.163.com'>163邮箱</a>";
		str += "<br><br><a href='http://cn.yahoo.com/'>雅虎</a>";
		msgDiv.innerHTML = str;
		document.body.appendChild(msgDiv);

		timeobj = window.setTimeout("createDiv()","100");
	}   

	function delDiv(){
		var msgDiv = document.getElementById("msgDivId");
		if(msgDiv!=null)
		document.body.removeChild(msgDiv);
	}
 </script>

 <BODY>
	 <center>
		<input type="button" value="创建DIV" onclick="createDiv()" />
		<input type="button" value="删除DIV" onclick="delDiv()" />
	</center>

 </BODY>
</HTML>