posts - 15,  comments - 8,  trackbacks - 0
效果图:

 <script type="text/javascript">
 
var agt = navigator.userAgent.toLowerCase();
 
var is_op = (agt.indexOf("opera"!= -1);
 
var is_ie = (agt.indexOf("msie"!= -1&& document.all && !is_op;
 
var is_ie5 = (agt.indexOf("msie 5"!= -1&& document.all && !is_op;
 
 
function CreateXmlHttpReq(handler) {
   
var xmlhttp = null;
   
if (is_ie) {
     
var control = (is_ie5) ? "Microsoft.XMLHTTP" : "Msxml2.XMLHTTP";
     
try {
       xmlhttp 
= new ActiveXObject(control);
       xmlhttp.onreadystatechange 
= handler;
     } 
catch (ex) {
       alert(
"You need to enable active scripting and activeX controls");  
     }
   } 
else {
     xmlhttp 
= new XMLHttpRequest();
     xmlhttp.onload 
= handler;
     xmlhttp.onerror 
= handler;
   }
   
return xmlhttp;
 }
 
 
 
function XmlHttpPOST(xmlhttp, url, data) {
   
try {
     xmlhttp.open(
"POST", url, true);
     xmlhttp.setRequestHeader(
"Content-Type""application/x-www-form-urlencoded; charset=UTF-8");
     xmlhttp.send(data);
   } 
catch (ex) {
     
// do nothing
   }
 }
 
 
 
var myxmlhttp;
 ratingMsgs 
= new Array(6);
 ratingMsgColors 
= new Array(6);
 barColors 
= new Array(6);
 
 ratingMsgs[
0= "太短";
 ratingMsgs[
1= "";
 ratingMsgs[
2= "一般";
 ratingMsgs[
3= "很好";
 ratingMsgs[
4= "极佳";
 ratingMsgs[
5= "未评级";
 
 ratingMsgColors[
0= "#676767";
 ratingMsgColors[
1= "#aa0033";
 ratingMsgColors[
2= "#f5ac00";
 ratingMsgColors[
3= "#6699cc";
 ratingMsgColors[
4= "#008000";
 ratingMsgColors[
5= "#676767";
 
 barColors[
0= "#dddddd";
 barColors[
1= "#aa0033";
 barColors[
2= "#ffcc33";
 barColors[
3= "#6699cc";
 barColors[
4= "#008000";
 barColors[
5= "#676767";
 
 
function CreateRatePasswdReq () {
 
  var passwd = getElement('Passwd').value;
 
  var email = getElement('Email').value;
 
  var lastname = getElement('LastName').value;
 
  var firstname = getElement('FirstName').value;
 
  var min_passwd_len = 6;
 
 
 
  if (passwd.length < min_passwd_len) {
   
  if (passwd.length > 0) {
     
  DrawBar(0);
   
  } else {
     
  ResetBar();
   
  }
 
  } else {
 
    passwd = escape(passwd);
 
    var params = 'Passwd='+passwd+'&Email='+email+'&FirstName='+firstname+'&LastName='+lastname;
 
    myxmlhttp = CreateXmlHttpReq(RatePasswdXmlHttpHandler);
 
    XmlHttpPOST(myxmlhttp, "https://www.google.com/accounts/RatePassword", params);
 
  }
 }
 
 
function getElement(name) {
   
if (document.all) {
   
  return document.all(name);
   }
   
return document.getElementById(name);
 }
 
 
function RatePasswdXmlHttpHandler() { // Can't check status since safari doesn't support it
   if (myxmlhttp.readyState != 4) {
   
  return;
   }
   rating 
= parseInt(myxmlhttp.responseText);
   DrawBar(rating);
 }
 
 
function DrawBar(rating) {
 
  var posbar = getElement('posBar');
 
  var negbar = getElement('negBar');
 
  var passwdRating = getElement('passwdRating');
 
  var barLength = getElement('passwdBar').width;
 
 
  if (rating >= 0 && rating <= 4) {     //We successfully got a rating
     posbar.style.width = barLength / 4 * rating + "px";
     negbar.style.width 
= barLength / 4 * (4 - rating) + "px";
 
  } else {
     posbar.style.width 
= "0px";
     negbar.style.width 
= barLength + "px";
     rating 
= 5// Not rated Rating
   }
 
  posbar.style.background = barColors[rating]
 
  passwdRating.innerHTML =
   
    "<font color='" + ratingMsgColors[rating] +"'>" + ratingMsgs[rating] + "</font>";
 }
 
 
 
//Resets the password strength bar back to its initial state without any message showing.
 
function ResetBar() {
 
  var posbar = getElement('posBar');
 
  var negbar = getElement('negBar');
 
  var passwdRating = getElement('passwdRating');
 
  var barLength = getElement('passwdBar').width;
 
 
  posbar.style.width = "0px";
 
  negbar.style.width = barLength + "px";
 
  passwdRating.innerHTML = "";
 
}
 
 
</script>
 
 
<table width="60%"  border="0">
     
<tr>
         
<td width="30%">
             
<input type="hidden" value="" id="FirstName" size="30">
             
<input type="hidden" value="" id="LastName" size="30">
             
<input type="hidden" id="Email" value="" size="30">
             
<input type="password" id="Passwd" value="" onkeyup="CreateRatePasswdReq()" size="30">
         
</td>
         
<td width="70%">
             
<table cellpadding="0" cellspacing="0" border="0">
                 
<tr>
                     
<td width="200" id="passwdBar">
                         
<table cellpadding="0" cellspacing="0" border="0">
                             
<tr>
                                 
<td nowrap valign="top"  height="15px">
                            
        <font color="#808080" size="-1" face="Arial, sans-serif">
                                
        <div id="passwdRating"></div>
                            
        </font>
                            
    </td>
                             
</tr>
                             
<tr>
                                 
<td height="3px"></td>
                             
</tr>
                             
<tr>
                                 
<td colspan="2">
                                     
<table cellpadding="0" bgcolor="#ffffff" cellspacing="0" border="0" width="200">
                                         
<tr>
                                             
<td width="0%" id="posBar" bgcolor="#e0e0e0" height="4px"></td>
                                             
<td width="100%" id="negBar" bgcolor="#e0e0e0" height="4px"></td>
                                         
</tr>
                                     
</table>
                                 
</td>
                             
</tr>
                         
</table>
                     
</td>
                 
</tr>
             
</table>
         
</td>
     
</tr>
 
</table>

posted on 2008-12-19 16:46 lvq810 阅读(295) 评论(0)  编辑  收藏 所属分类: Html/JavaScript/Ajax

只有注册用户登录后才能发表评论。


网站导航: