<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <meta name=" Author "content=" Chomo "/> <link rel=" Start "href=" Http://www.jb51.net "titl E= "Home"/> <title> imitation net friend impression function </title> <style type= "Text/css" > box{; width:500px; 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:no Ne position:relative; border:0;} . Box a:hover{border:2px #09e solid;padding:8px;} input.cur{border:1px #c00 Outset} </style> </pead> <body> <div class= "box" ><span> Goat < /span><span> What do you know </span><span>-......-</span><span> rest </span><span> handsome </span>< span> Tianya Place </span><span> can't describe </span><span> wit </span></div> <input type= " Text "value=" ASD "maxlength=" id= "Input-txt"/><input type= "button" value= "Evaluation" id= "INPUT-BTN"/> Type= "Text/javascript" > Function Randomcolor () {//16 method represents the color 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++) {//Get 0-15 random integer 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 ();//change the background color of the code, modified according to the repair. Links[i].style.backgroundcolor = bgcolor; }} function Sayhi () {varScolor,links = document.getElementsByTagName ("a"); for (Var i=0;i<links.length;i++) {links[i].onmouseover = function () {Scolor = This.style.backgroun Dcolor; 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 (' Your impression of xxx is ' +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 ("Please enter an impression word"); 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> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]