【代码教程】仿开心网好友印象功能html代码

2013-08-18 10:38:02 -0400

[代码教程] 仿开心网好友印象功能 html代码

仿开心网好友印象功能 html代码

✎请勿抄袭本页面,可以复制框内代码

代码说明如下
代码名：仿开心网好友印象功能 html代码
类型：html
来自：互联网
代码说明：您可以复制以下框内的代码粘贴到您须要的地方!你可以改了边框内显示的文字,找到代码中的文字改成你须要的文字!点击边框内的文字出现你对爱beyond的印象,这句在代码中找到爱beyond改成你须要的文字!将下方框内代码加入你的网站须要这种功能的地方!

html代码如下框内

<!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>
<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>
<br/><br/><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('你对爱BEYOND的印象是 "'+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>

代码效果演示

仿开心网好友印象功能

色鬼你懂个啥-……-休息帅气天涯地方无法形容才子

«Newer Older»

Comment:

Name:

Back to home

Subscribe | Register | Login | N