当前位置: 代码迷 >> ASP.NET >> 模仿CSDN的效果,
  详细解决方案

模仿CSDN的效果,

热度:2805   发布时间:2013-02-26 00:00:00.0
模仿CSDN的效果,请教高手!
csdn     的帖子结贴给分的时候     那个黄颜色的分数提示效果是怎么做的?

------解决方案--------------------------------------------------------
<script language= "javascript ">
var cen = document.all.pop;
function fen()
{
var zhong = parseInt(document.all.zhongFen.value,10); //得到总分值
var a = document.getElementsByName( "T ");
var gei = 0;
for (var i=0; i <a.length; i++)
{ gei = (a[i].value== " ") ? gei : (gei + parseInt(a[i].value,10));}
var n = zhong-gei;
cen.style.background = (n < 0) ? "#FF0000 " : "#FFFF00 ";
cen.innerText = "该问题总分值: "+ zhong + "\r\n现可给的分值: "+ n;
return n;
}
</script>
------解决方案--------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN ">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME= "Generator " CONTENT= "EditPlus ">
<META NAME= "Author " CONTENT= " ">
<META NAME= "Keywords " CONTENT= " ">
<META NAME= "Description " CONTENT= " ">
<SCRIPT LANGUAGE= "JavaScript ">
<!--
function fen()
{
var zongfen = parseInt(document.all.zongfen.value,10);//获取总分,类型转换,10代表十进制
var s = document.getElementsByName( "t ");//获取待给分的textbox数组
var gei = 0;
for(var i=0;i <s.length;i++)
{
gei = (s[i].value == " ") ? gei:(gei + parseInt(s[i].value,10))//算出已经给出去了多少分
}
var shengyu = zongfen - gei;//还剩下多少分
if(shengyu < 0)
shengyu = " <font color=red> "+shengyu+ " </font> ";//剩下的分为负,显示红色
var cen = document.all.showfen;//cen是一个div
cen.innerHTML= "总分是 "+zongfen+ " <br> "+ "还剩余 "+shengyu;
}
function show(e)
{
e.select();//鼠标一放上来即选中textbox内文字
fen();
var cen = document.all.showfen;
var ttop = e.offsetTop;//待给分的textbox的位置
var tleft = e.offsetLeft;
if(document.all.zongfen.value != " ")
cen.style.display = " ";
cen.style.top =ttop+10;
cen.style.left = tleft+10;
}
function out()
{
//鼠标一拿开即隐藏div
var cen = document.all.showfen;
cen.style.display= "none ";
}
//-->
</SCRIPT>
</HEAD>
<BODY>
CSDN给分界面效果: <br>
请输入总分: <input type= text id= "zongfen "> <br>
得分者A: <input type= text name= "t " onmouseover = "show(this) " onmouseout= "out() "> <br>
得分者B: <input type= text name= "t " onmouseover = "show(this) " onmouseout= "out() "> <br>
得分者C: <input type= text name= "t " onmouseover = "show(this) " onmouseout= "out() "> <br>
得分者D: <input type= text name= "t " onmouseover = "show(this) " onmouseout= "out() "> <br>
得分者E: <input type= text name= "t " onmouseover = "show(this) " onmouseout= "out() "> <br>
<div id= "showfen " style= "position: absolute; width: 120; display: none; z-index: 99;
font-size: 13px; background: #ffff00 ">
</div>
</BODY>
</HTML>
  相关解决方案