软件开发培训班 >> 编程开发 >> JavaScript

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

　　本文标签：开心网,好友印象

<!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="http://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>色鬼</span><span>你懂个啥</span><span>-……-</span><span>休息</span><span>帅气</span><span>天涯地方</span><span>无法形容</span><span>才子</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>

技术文章快速查找

js加载读取内容及显示与隐藏div示例

去除链接虚线全面分析总结

jquery.cvtooltip.js 基于jquery的气泡提示插件

用js实现层随着内容大小动态渐变改变推荐

javascript下利用arguments实现string.format函数

Javascript 代码也可以变得优美的实现方法

工作需要写的一个js拖拽组件

浏览器加载、渲染和解析过程黑箱简析

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建