javascript 仿开心网好友印象功能(点击文字弹出印象框)

更新时间：2009年12月22日 23:14:26 作者：

这是仿开心网的好友印象添加功能，在输入框里提交印象词后，即可显示在网页上，点击文字弹出印象评语提示框。想用的朋友最好在重新美化一下，我觉得还是不错的。

<!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=gb2312" /> <meta name="author" content="Chomo" /> <link rel="start" href="https://www.jb51.net" title="Home" /> <title>仿开心网好友印象功能</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 class="box"><span><a href="#">色鬼</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="#" >天涯地方</a></span><span><a href="#">无法形容</a></span><span><a href="#" >才子</a></span></div> <input type="text" value="asd" maxlength="20" id="input-txt"/><input type="button" value="评价" id="input-btn"/> <script type="text/javascript"> function randomColor() {    //16进制方式表示颜色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之间的随机整数             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();//改变背景色的代码，根据修去修改。         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('你对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("请输入一个印象词");             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>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

推荐:极酷右键菜单
推荐:极酷右键菜单...
2006-11-11
非常不错的页面特效建议大家看下
非常不错的页面特效建议大家看下...
2007-06-06
CSS 布局一个漂亮的滑块
这个是用CSS美化出来的一个漂亮滑块，注意它是一个静态的，没有加入JS,因此不能适时拖动，本示例重点是想表述CSS布局复杂图形的一种方法.
2009-10-10
大平洋汽车网左侧菜单
大平洋汽车网左侧菜单...
2007-02-02
CSS 美化表格边框为凹陷立体效果的实现方法
这个CSS美化实例应该属于布局的范畴吧。这里的重点是CSS，因此表格使用了TABle，用CSS控制Table的边框像Windows系统窗体里的边线一样，表格边框为凹陷立体效果。
2009-10-10
炽热的文字
炽热的文字...
2006-11-11
JavaScript实现禁止后退的方法
JavaScript实现禁止后退的方法...
2006-12-12
功能很全的精品JS计算器
功能很全的精品JS计算器...
2007-02-02
一个简单的收缩菜单效果
一个简单的收缩菜单效果...
2007-03-03
mouseover时显示滚动字幕特效
mouseover时显示滚动字幕特效...
2007-02-02

javascript 仿开心网好友印象功能(点击文字弹出印象框)

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具