Js仿開(kāi)心網(wǎng)好友印象功能（點(diǎn)擊文字彈出印象框）

2009-12-31 綜合應(yīng)用 ℃

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Chomo" />
<link rel="start" href="http://www.14px.com" title="Home" />
<title>仿開(kāi)心網(wǎng)好友印象功能</title>
<style type="text/css">
	.box{ width:500px; padding:10px; height:auto; overflow:hidden; text-align:center}
	.box span{ line-height:30px; height:30px;white-space:nowrap; display:inline-block; cursor:pointer}
	.box a,.box a:hover{ padding:10px;color:#fff; line-height:16px;font-weight:bold; font-size:14px;text-decoration:none; position:relative; border:0;}
	.box a:hover{ border:2px #09e solid;padding:8px;}
	input.cur{ border:1px #c00 outset}
</style>
</head>
<body>
<div   id="c4wbcff"   class="box"><span><a href="#">色鬼</a></span><span><a href="#">你懂個(gè)啥</a></span><span><a href="#">-……-</a></span><span><a href="#">休息</a></span><span><a href="#">帥氣</a></span><span><a href="#" >天涯地方</a></span><span><a href="#">無(wú)法形容</a></span><span><a href="#" >才子</a></span></div>
<br/><br/><input type="text" value="asd" maxlength="20" id="input-txt"/><input type="button" value="評(píng)價(jià)" id="input-btn"/>
<script type="text/javascript">
function randomColor() {	//16進(jìn)制方式表示顏色0-F	
	var arrHex = ["0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F"];	
	var strHex = "#";	
	var index;	
	for(var i = 0; i < 6; i++) {	//取得0-15之間的隨機(jī)整數(shù)	
		index = Math.round(Math.random() * 15);		
		strHex += arrHex[index];
	}	
	return strHex;
}
function changeColor(){
	var links = document.getElementsByTagName("a");
	for(var i=0;i<links.length;i++){
		var bgColor = randomColor();//改變背景色的代碼，根據(jù)修去修改。
		links[i].style.backgroundColor = bgColor;
	}
}
function sayHi(){
	var scolor,links = document.getElementsByTagName("a");
	for(var i=0;i<links.length;i++){
		links[i].onmouseover = function(){
			scolor = this.style.backgroundColor;
			this.style.color = scolor;
			this.style.borderColor = scolor;
			this.style.backgroundColor = "white";
		}
		links[i].onmouseout = function(){
			this.style.color = "white";
			this.style.borderColor = "";
			this.style.backgroundColor = scolor;
		}
		links[i].onmousedown = function(){
			alert('你對(duì)XXX的印象是 "'+this.childNodes[0].nodeValue+'"');
		}
	}
}
function addEvaluation(){
	var txt = document.getElementById("input-txt");
	var btn = document.getElementById("input-btn");
	var divs = document.getElementsByTagName("div")[0];
	if(!txt) return false;
	if(!btn) return false;
	var texts,links,spans;
	txt.onfocus = function(){
		btn.className="cur";
	}
	txt.onblur = function(){
		btn.className="";
	}
	btn.onclick = function(){
		if(txt.value=="") {
			alert("請(qǐng)輸入一個(gè)印象詞");
			return false
		};
		texts = document.createTextNode(txt.value);
		links = document.createElement("a");
		spans = document.createElement("span");
		links.appendChild(texts);
		links.style.backgroundColor = randomColor();
		spans.appendChild(links);
		divs.appendChild(spans);
		sayHi();
	}
}
changeColor();
sayHi();
addEvaluation();
</script>
</body>
</html>

相關(guān)特效代碼

熱門(mén)特效代碼: 騰訊天氣預(yù)報(bào)的JS代碼; 點(diǎn)擊“添加收藏”代碼; 多款表格邊框單元格特殊效果代碼; CSS 橫向圖片列表; 網(wǎng)站連接速度測(cè)試JavaScript代碼; 用CSS為表格添加陰影效果; 綜合搜索引擎代碼; 超級(jí)計(jì)數(shù)器網(wǎng)頁(yè)特效代碼; 強(qiáng)迫訪問(wèn)廣告鏈接代碼; nVida 網(wǎng)站圖片滑動(dòng)切換代碼

推薦特效代碼: 強(qiáng)迫訪問(wèn)廣告鏈接代碼; 點(diǎn)擊“添加收藏”代碼; CSS 橫向圖片列表; 常用的對(duì)聯(lián)廣告帶關(guān)閉功能; 極品仿windows進(jìn)度條效果; 漂亮的觸發(fā)行變色代碼