效果圖：
<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 閱讀(330)
評論(0) 編輯 收藏 所屬分類:
Html/JavaScript/Ajax