本文汇总了多种实用的JavaScript技巧，包括图片等比例缩放、密码强度评估、文本框数字输入限制、判断文件存在性及金额格式化等功能的实现。
JS实现图片等比例缩放
<script language="javascript" type="text/javascript">
<!--
function ImgAuto(i){//你必须给图片提前设定初始宽度和高度，建议直接就是最大宽度和高度
var MaxW=250; //定义图片显示的最大宽度
var MaxH=250; //定义图片显示的最大高度
var o=new Image();o.src=i.src;var w=o.width;var h=o.height;var t;if (w>MaxW){t=MaxW;}else{t=w;}
if ((h*t/w)>MaxH){i.height=MaxH;i.width=MaxH/h*w;}else{i.width=t;i.height=t/w*h;}
}
-->
</script>
<img src="http://bbs.tnbz.com/attachments/forumid_42/XP_IuSTD0jh5sSb.jpg" width="250" height="250" onload="ImgAuto(this)">
使用Javascript评估用户输入密码的强度
<script language=javascript>
//CharMode函数
//测试某个字符是属于哪一类.
function CharMode(iN){
if (iN>=48 && iN <=57) //数字
return 1;
if (iN>=65 && iN <=90) //大写字母
return 2;
if (iN>=97 && iN <=122) //小写
return 4;
else
return 8; //特殊字符
}
//bitTotal函数
//计算出当前密码当中一共有多少种模式
function bitTotal(num){
modes=0;
for (i=0;i<4;i++){
if (num & 1) modes++;
num>>>=1;
}
return modes;
}
//checkStrong函数
//返回密码的强度级别
function checkStrong(sPW){
if (sPW.length<=4)
return 0; //密码太短
Modes=0;
for (i=0;i<sPW.length;i++){
//测试每一个字符的类别并统计一共有多少种模式.
Modes|=CharMode(sPW.charCodeAt(i));
}
return bitTotal(Modes);
}
//pwStrength函数
//当用户放开键盘或密码输入框失去焦点时,根据不同的级别显示不同的颜色
function pwStrength(pwd){
O_color="#eeeeee";
L_color="#FF0000";
M_color="#FF9900";
H_color="#33CC00";
if (pwd==null||pwd==''){
Lcolor=Mcolor=Hcolor=O_color;
}
else{
S_level=checkStrong(pwd);
switch(S_level) {
case 0:
Lcolor=Mcolor=Hcolor=O_color;
case 1:
Lcolor=L_color;
Mcolor=Hcolor=O_color;
break;
case 2:
Lcolor=Mcolor=M_color;
Hcolor=O_color;
break;
default:
Lcolor=Mcolor=Hcolor=H_color;
}
}
document.getElementById("strength_L").style.background=Lcolor;
document.getElementById("strength_M").style.background=Mcolor;
document.getElementById("strength_H").style.background=Hcolor;
return;
}
</script>
<form name=form1 action="" >
输入密码:
<input type=password size=10 onKeyUp=pwStrength(this.value)
onBlur=pwStrength(this.value)>
<br>密码强度:
<table width="217" border="1" cellspacing="0" cellpadding="1" bordercolor="#cccccc"
height="23" style='display:inline'>
<tr align="center" bgcolor="#eeeeee">
<td width="33%" id="strength_L">弱</td>
<td width="33%" id="strength_M">中</td>
<td width="33%" id="strength_H">强</td>
</tr>
</table>
</form>
限制文本框只能输入数字或浮点数的JS脚步
<!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>限制文本框输入数字或浮点数(暂只支持IE)</title>
</head>
<body>
<table border="0" cellspacing="1" cellpadding="0" width="100%" style="background-color:#ccc; font-size:12px;">
<tr>
<td style="height:100px; background-color:#fff;" colspan="2" align="center" valign="middle">
<h3>限制文本框输入数字或浮点数(暂只支持IE)</h3></td>
</tr>
<tr>
<td style="width: 30%; height:25px; background-color:#fff; padding-left:10px;">
该文本框只允许输入整型：</td>
<td style=" background-color:#fff; padding-left:10px;">
<input type="text" id="input1" name="input1" onpropertychange="javascript:CheckInputInt(this);" /></td>
</tr>
<tr>
<td style="width: 30%; height: 25px; background-color: #fff; padding-left:10px;">
该文本框允许输入浮点数：</td>
<td style="background-color: #fff; padding-left:10px;">
<input type="text" id="input2" name="input2" onpropertychange="javascript:CheckInputFloat(this);" /></td>
</tr>
<tr>
<td align="center" colspan="2" rowspan="2" style="padding-left: 10px; height: 58px;
background-color: #fff">
<a href="http://bbs.51aspx.com">返回上级</a></td>
</tr>
<tr>
</tr>
</table>
<script language="javascript" type="text/javascript">
// Int 51-aspx
function CheckInputInt(oInput)
{
if ('' != oInput.value.replace(//d/g,''))
{
oInput.value = oInput.value.replace(//D/g,'');
}
}
//Float 51aspx
function CheckInputFloat(oInput)
{
if('' != oInput.value.replace(//d{1,}/.{0,1}/d{0,}/,''))
{
oInput.value = oInput.value.match(//d{1,}/.{0,1}/d{0,}/) == null ? '' :oInput.value.match(//d{1,}/.{0,1}/d{0,}/);
}
}
</script>
</body>
</html>
用javascript判断文件是否存在
<script language=javascript>
function IsExist(url)
...{
x = new ActiveXObject("Microsoft.XMLHTTP")
x.open("HEAD",url,false)
x.send()
return x.status==200
}
alert(IsExist("http://www.test.com/test.gif"))
</script>
<SCRIPT language="javascript">
var xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
xmlhttp.Open("GET", "http://community.youkuaiyun.com/images/优快云_logo.GIF", false);
xmlhttp.Send();
alert(xmlhttp.responseText);
</SCRIPT>
<img src="http://www.test.com/test.gif" onerror="alert('该图片不存在!');">
更多请看如下网址：http://bhcode.net/special_js.html
整数或浮点型转换为金钱形式
<script language="javascript">
function toMoney(str){
if(str.length != 0 ){
var strArray = new Array();
var strArrayTemp = new Array();
var strIndex = -1;
var loopC = 0;
var len = str.length;
var dot = str.indexOf(".");
var isComma = 0;
if(dot == -1)
{
str += ".0";
dot = str.indexOf(".");
}
for(var i=dot-1; i >= 0; i--){
isComma ++;
if(isComma % 3 == 0){
loopC ++;
strIndex = strIndex + 2;
strArray[strIndex] = str.substring(dot-isComma,dot-isComma+3);
}
}
strArray[strIndex+2] = str.substring(0,dot-loopC*3);
strArray[0] = str.substring(dot,dot+3);
if(strArray[strIndex+2] != undefined&&strArray[strIndex+2]!=""){
if(str>100)
strArray[strIndex+1] = ",";
}else{
strArray[strIndex+2] = "";
strArray[strIndex+1] = "";
}
for(var i= 2 ; i < strIndex;i+=2){
strArray[i] = ",";
}
for(var i=strArray.length-1 ;i >= 0 ;i--){
strArrayTemp = strArrayTemp + strArray[i];
}
return strArrayTemp;
}else{
alert("String is null");
return "";
}
}
扫一扫
1647
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
