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

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript 仿开心网好友印象功能(点击文字弹出印象框)

Javascript: jquery中常用的SET和GET; 解javascript 混淆加密收藏; JavaScript 在线压缩和格式化收藏; JavaScript URL参数读取改进版; javascript打开新窗口同时关闭旧窗口; 借用Google的Javascript API Loader来加速你的网站; javascript Xml增删改查(IE下)操作实现代码; js操作Xml(向服务器发送Xml,处理服务器返回的Xml)(IE下有效); 最近项目写了一些js，水平有待提高; JavaScript库开发规则; JavaScript入门教程(1) 什么是JS; JavaScript入门教程(2) JS基础知识; JavaScript入门教程(3) js面向对象; JavaScript入门教程(4) js浏览器对象; JavaScript入门教程(5) js Screen屏幕对象; JavaScript入门教程(7) History历史对象; JavaScript入门教程(8) Location地址对象; JavaScript入门教程(9) Document文档对象; JavaScript入门教程(11) js事件处理; JavaScript入门教程(12) js对象化编程

No. « ‹ 124 125 126 127 › »

技术文章搜索

关键字

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

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-01-10 浏览: 341 ::

收藏到网摘: n/a

JavaScript 未知高度元素垂直居中实现代码 JS+CSS实现的一种交互体验表单页面

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

<!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.ruanchen.com" 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 全选提示:你可先修改部分代码,再按运行]

JavaScript 未知高度元素垂直居中实现代码 JS+CSS实现的一种交互体验表单页面

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

评论 (0) All