javascript常用函數(shù)(1)
文章主要內容列表:
1、 調整圖片大小,不走形(FF IE 兼容)/ 剪切圖片(overflow:hidden)
2、 控制textarea區(qū)域文字數(shù)量
3、 點擊顯示新窗口
4、 input框自動隨內容自動變長
5、 添加收藏夾
6、 設置首頁
7、 Jquery + Ajax 判斷用戶是否存在
8、 判斷email格式是否正確
9、 綜合判斷用戶名(長度,英文字段等)
10、新聞滾動
11、 只允許輸入正整數(shù) (shopping cart 使用) 或者 正數(shù) (正整數(shù)和正小數(shù))
12、 轉換字符串為數(shù)字
13、 判斷文件格式(獲得文件后綴)
14、 截取字符串
15、分割字符串
主要內容 :
1、 調整圖片大小,不走形(FF IE 兼容)
// 用法 <img src="this_image_path.jpg" onload="DrawImage(this,450,450);" />
function DrawImage(ImgD,FitWidth,FitHeight){
var image=new Image();
image.src=ImgD.src;
if(image.width>0 && image.height>0){
if(image.width/image.height>= FitWidth/FitHeight){
if(image.width>FitWidth){
ImgD.width=FitWidth;
ImgD.height=(image.height*FitWidth)/image.width;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
} else{
if(image.height>FitHeight){
ImgD.height=FitHeight;
ImgD.width=(image.width*FitHeight)/image.height;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
}
}
}
通過 overflow:hidden進行剪切:
function clipImage(o, w, h){
var img = new Image();
img.src = o.src;
if(img.width >0 && img.height>0)
{
if(img.width/img.height >= w/h)
{
if(img.width > w)
{
o.width = (img.width*h)/img.height;
o.height = h;
//o.setAttribute("style", "marginLeft:-" + ((o.width-w)/2).toString() + "px");
$(o).css("margin-left", "-"+((o.width-w)/2).toString() + "px");
}
else
{
o.width = img.width;
o.height = img.height;
}
}
else
{
if(img.height > h)
{
o.height = (img.height*w)/img.width;
o.width = w;
//o.setAttribute("style", "margin-top:-" + ((o.height-h)/2).toString() + "px");
//$(o).css("style", "margin-top:-" + ((o.height-h)/2).toString() + "px");
$(o).css("margin-top", "-"+((o.height-h)/2).toString() + "px");
}
else
{
o.width = img.width;
o.height = img.height;
}
}
}
}
實例:
<style type="text/css">
ul{list-style:none;}
ul li{float:left;padding:1px;border:#ccc 1px solid;width:120px;height:120px;overflow:hidden;text-align:center;over-flow:hidden;}
</style>
<ul>
<li><img src="1.jpg" onload="DrawImage(this,120,120);" /></li>
<li><img src="2.jpg" onload="clipImage(this,120,120);" /></li>
</ul>
2、控制textarea區(qū)域文字數(shù)量
<script>
/**
* Calculate how many characters remain in a textarea (jQuery)
* @param string textarea
* @param int maxLength
* @param string div
*/
function charsRemain(textarea, maxLength, div) {
var currentLength = $(textarea).val().length;
var charsLeft = maxLength - currentLength;
if (charsLeft < 0) { charsLeft = 0; }
$("#"+ div +"_charsRemain").html(charsLeft);
if (currentLength > maxLength) {
var fullText = $(textarea).val().substring(0, maxLength);
$(textarea).val(fullText);
}
}
/**
* Calculate how many characters remain in a textarea (javascript)
* @param string textarea
* @param int maxLength
* @param string div
*/
function charsRemain(textarea, maxLength, div) {
var currentLength = textarea.value.length;
var charsLeft = maxLength - currentLength;
if (charsLeft < 0) { charsLeft = 0; }
document.getElementById(div +"_charsRemain").innerHTML = charsLeft;
if (currentLength > maxLength) {
var fullText = textarea.value.substring(0, maxLength);
textarea.value = fullText;
}
}
</script>
<textarea rows="5" cols="15" onkeyup="charsRemain(this, 250, 'textarea');"></textarea>
<span id="textarea_charsRemain">250</span> characters remaining
3、點擊顯示新窗口
//彈窗
function g_OpenWindow(pageURL, innerWidth, innerHeight)
{
var ScreenWidth = screen.availWidth
var ScreenHeight = screen.availHeight
var StartX = (ScreenWidth - innerWidth) / 2
var StartY = (ScreenHeight - innerHeight) / 2
var wins = window.open(pageURL, 'OpenWin', 'left='+ StartX + ', top='+ StartY + ', Width=' + innerWidth +', height=' + innerHeight + ', resizable=yes, scrollbars=yes, status=no, toolbar=no, menubar=no, location=no')
wins.focus();
}
Java代碼 :
<script language="JavaScript">
// 自動彈出窗口
var whatsNew = open('','_blank','top=50,left=50,width=200,height=300,' + 'menubar=no,toolbar=no,directories=no,location=no,' + 'status=no,resizable=no,scrollbars=yes');
whatsNew.document.write('<center><b>news</b>< /center>');
whatsNew.document.write('<p>this is a test');
whatsNew.document.write('<p>deos address');
whatsNew.document.write('<p align="right">' + '<a href="javascript:self.close()">Close</a>');
whatsNew.document.close();
</script>
不幸的是,很多瀏覽器會屏蔽彈出窗口,你需要手動允許后方可看到!下面是強制彈出窗口,原理就是創(chuàng)建一個form,通過post打開。
<script language="javascript">
function ForceWindow (){
this.r = document.documentElement;
this.f = document.createElement("FORM");
this.f.target = "_blank";
this.f.method = "post";
this.r.insertBefore(this.f, this.r.childNodes[0]); //XML DOM : insertBefore() 方法可在已有的子節(jié)點前插入一個新的子節(jié)點。 insertBefore(newchild,refchild)
}
ForceWindow.prototype.pop = function (sUrl){
this.f.action = sUrl;
this.f.submit();
}
window.force = new ForceWindow();
</script>
<body onLoad="window.force.pop('http://deographics.com/')">
<div>
this is a test ! we will open the deographics's website~~
</div>
</body>
當然還有更好的辦法就是
<script>
function openWin(){
window.showModalDialog(url,window, "help:no;scroll:no;resizable:no;status:0;dialogWidth:420px;dialogHeight:200px;center:yes");
}
</script>
4、input框自動隨內容自動變長
// input auto length
// <input name="words" size="2" maxlength="100" onkeyup="checkLength(this)"/><span id="char">0</span>
function checkLength(which) {
var maxchar=100;
//var oTextCount = document.getElementById("char");
iCount = which.value.replace(/[^\u0000-\u00ff]/g,"aa").length;
if(iCount<=maxchar){
//oTextCount.innerHTML = "<font color=#FF0000>"+ iCount+"</font>";
which.style.border = '1px dotted #FF0000';
which.size=iCount+2;
}else{
alert('Please input letter less than '+ maxchar);
}
}
5、添加收藏夾
// addfavorite
function addfavorite(){
if (document.all){
window.external.addFavorite('http://deographics.com/','deographics');
}else if (window.sidebar){
window.sidebar.addPanel('deographics', 'http://deographics.com/', "");
}
}
6、設置首頁
// setHomepage
function setHomepage(){
if(document.all){
document.body.style.behavior = 'url(#default#homepage)';
document.body.setHomePage('http://deographics.com/');
}else if(window.sidebar){
if(window.netscape){
try{
netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
}catch(e){
alert(" The operation was refused by browser,if you want to enable this feature, please enter in the address column 'about:config', then, change 'signed.applets.codebase_principal_support' to 'true' ");
}
}
var prefs = Components.classes['@mozilla.org/preferences-service;1'].getService(Components.interfaces.nsIPrefBranch);
prefs.setCharPref('browser.startup.homepage','http://deographics.com/');
}
}
7、Jquery + Ajax 判斷用戶是否存在
// 檢測 用戶名是否存在
$("#username").blur(function(){
var name = $(this).val(); var table = $(this).attr('title');
if(name!=''){
var dataString = 'username='+ name + '&table=' + table;
$.post("operate.php",dataString,function(data){ //alert(data);
if(data==0){
alert('This username already exist !'); $(this).val('').focus(); return false;
}
});
}
});
或者
var datastring = 'id=' + $id + '&pos=' + $pos;
$.ajax({
type: "POST",
url: url,
data: dataString,
beforeSend: function(){},
error: function(){alert('Send Error !');},
success: function(data) {
// do something
}
});
8、判斷email格式是否正確
function chekemail(temail){
var pattern = /^[\w]{1}[\w\.\-_]*@[\w]{1}[\w\-_\.]*\.[\w]{2,4}$/i;
if(pattern.test(temail)){return true;}else{return false;}
}
9、綜合判斷用戶名(長度,英文字段等)
// 實例
var username = $('#username');
var backValue = VerifyInput('username');
if(backValue == 'length'){
alert("Username is make up of 3 - 15 characters!");
username.focus();
return false;
}else if(backValue == 'first'){
alert("the First character must be letter or number !");
username.focus();
return false;
}else if(backValue == 'back'){
alert("Username only contains letter number or '_' ");
username.focus();
return false;
}
// 判斷
function VerifyInput(user){
var strUserID = $('#'+user).val();
if (strUserID.length < 3 || strUserID.length > 15){
return 'length';
}else{
for (nIndex=0; nIndex<strUserID.length; nIndex++){
cCheck = strUserID.charAt(nIndex);
if ( nIndex==0 && ( cCheck =='-' || cCheck =='_') ){
return 'first';
}
if (!(IsDigit(cCheck) || IsAlpha(cCheck) || cCheck=='-' || cCheck=='_' )){
return 'back';
}
}
}
}
function IsDigit(cCheck) {return (('0'<=cCheck) && (cCheck<='9'));}
function IsAlpha(cCheck) {return ((('a'<=cCheck) && (cCheck<='z')) || (('A'<=cCheck) && (cCheck<='Z')))}
10、新聞滾動
<style type="text/css">
ul,li{margin:0;padding:0;font-size:12px;color:#999;}
ul{height:100px;overflow:hidden;}
ul li{line-height:20px;height:20px;}
</style>
<ul id="news">
<li>New York web design Inc.1</li>
<li>Your site will be structured 2</li>
<li>hat will communicate the 3</li>
<li>hat will communicate the 4</li>
<li>hat will communicate the 5</li>
<li>hat will communicate the 6</li>
<li>hat will communicate the 7</li>
<li>hat will communicate the 8</li>
<li>hat will communicate the 9</li>
<li>New York web design Inc. 10</li>
<li>New York web design Inc.11</li>
<li>New York web design Inc. 12</li>
<li>New York web design Inc. 13</li>
<li>New York web design Inc. 14</li>
</ul>
Java代碼
// 用法 : 四個參數(shù)分別是:操作對象, 停留時間,相對速度(越小越快),每次滾動多少(最好和Li的Line-height一致)。
scroll('news', 3000, 1, 20 );
function scroll(element, delay, speed, lineHeight) {
var numpergroup = 5;
var slideBox = (typeof element == 'string')?document.getElementById(element):element;
var delay = delay||1000;
var speed=speed||20;
var lineHeight = lineHeight||20;
var tid = null, pause = false;
var liLength = slideBox.getElementsByTagName('li').length;
var lack = numpergroup-liLength%numpergroup;
for(i=0;i<lack;i++){
slideBox.appendChild(document.createElement("li"));
}
var start = function() {
tid=setInterval(slide, speed);
}
var slide = function() {
if (pause) return;
slideBox.scrollTop += 2;
if ( slideBox.scrollTop % lineHeight == 0 ) {
clearInterval(tid);
for(i=0;i<numpergroup;i++){
slideBox.appendChild(slideBox.getElementsByTagName('li')[0]);
}
slideBox.scrollTop = 0;
setTimeout(start, delay);
}
}
slideBox.onmouseover=function(){pause=true;}
slideBox.onmouseout=function(){pause=false;}
setTimeout(start, delay);
}
11、只允許輸入正整數(shù) (shopping cart 使用)
<script language="JavaScript" type="text/javascript">
function checkNum(obj){
var re = /^[1-9]\d*$/;
if (!re.test(obj.value)){
alert("只允許正整數(shù)!");
obj.value='';
obj.focus();
return false;
}
}
</script>
<input name="rate" type="text"onkeyup="checkNum(this)" />
或正數(shù)
<script language="JavaScript" type="text/javascript">
function clearNoNum(obj)
{
//先把非數(shù)字的都替換掉,除了數(shù)字和.
objobj.value = obj.value.replace(/[^\d.]/g,"");
//必須保證第一個為數(shù)字而不是.
objobj.value = obj.value.replace(/^\./g,"");
//保證只有出現(xiàn)一個.而沒有多個.
objobj.value = obj.value.replace(/\.{2,}/g,".");
//保證.只出現(xiàn)一次,而不能出現(xiàn)兩次以上
objobj.value = obj.value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");
}
</script>
只能輸入數(shù)字和小數(shù)點的文本框:<input id="input1" onkeyup="clearNoNum(this)">
12、 轉換字符串為數(shù)字
/*
js提供了parseInt()和parseFloat()兩個轉換函數(shù)。前者把值轉換成整數(shù),后者把值轉換成浮點數(shù)。只有對String類型調用這些方法,這兩個函數(shù)才能正確運行;對其他類型返回的都是NaN(Not a Number)。
*/
parseInt("1234blue"); //returns 1234
parseInt("0xA"); //returns 10
parseInt("22.5"); //returns 22
parseInt("blue"); //returns NaN
parseFloat("1234blue"); //returns 1234.0
parseFloat("0xA"); //returns NaN
parseFloat("22.5"); //returns 22.5
parseFloat("22.34.5"); //returns 22.34
parseFloat("0908"); //returns 908
parseFloat("blue"); //returns NaN
/*
還可使用強制類型轉換(type casting)處理轉換值的類型。使用強制類型轉換可以訪問特定的值,即使它是另一種類型的。
Boolean(value)——把給定的值轉換成Boolean型;
Number(value)——把給定的值轉換成數(shù)字(可以是整數(shù)或浮點數(shù));
String(value)——把給定的值轉換成字符串。
*/
Boolean(""); //false – empty string
Boolean("hi"); //true – non-empty string
Boolean(100); //true – non-zero number
Boolean(null); //false - null
Boolean(0); //false - zero
Boolean(new Object()); //true – object
Number(false) 0
Number(true) 1
Number(undefined) NaN
Number(null) 0
Number( "5.5 ") 5.5
Number( "56 ") 56
Number( "5.6.7 ") NaN
Number(new Object()) NaN
Number(100) 100
var s1 = String(null); //"null"
var oNull = null;
var s2 = oNull.toString(); //won't work, causes an error
13、 判斷文件格式(獲得文件后綴)
// 用法:get_ext(this,'img');
function get_ext(name){
var pos = name.lastIndexOf('.');
var extname = name.substring(pos,name.length) // like: str.split('.')
var lastname = extname.toLowerCase();
if (lastname !='.jpg' && lastname !='.gif' && lastname !='.png' && lastname !='.bmp'){
return lastname;
}else{
return name;
}
}
}
14、截取字符串
// 簡單型
<script type="text/javascript">
var str="Hello world!"
document.write(str.substr(3,7))
</script>
// 結果是 lo worl
// 復雜型(中文或者中英文混合截取)
<script>
//截取字符串 包含中文處理
//(串,長度,增加...)
function subString(str, len, hasDot)
{
var newLength = 0;
var newStr = "";
var chineseRegex = /[^\x00-\xff]/g;
var singleChar = "";
var strLength = str.replace(chineseRegex,"**").length;
for(var i = 0;i < strLength;i++)
{
singleChar = str.charAt(i).toString();
if(singleChar.match(chineseRegex) != null)
{
newLength += 2;
}
else
{
newLength++;
}
if(newLength > len)
{
break;
}
newStr += singleChar;
}
if(hasDot && strLength > len)
{
newStr += "...";
}
return newStr;
}
document.write(subString("你好,this is a test!",10,1)); // 參數(shù)依次為 字符串, 截取的長度 和 是否顯示省略號
</script>
15、分割字符串
<script type="text/javascript">
var str = 'this_is_a_test_!';
var arr = str.split('_');
document.write(arr + "<br />"); // 羅列全部
document.write(arr[0] + "<br />"); // 取單項
</script>
以上就是小編為大家整理的常用的javascript函數(shù),希望對大家的學習有所幫助,之后還有更多javascript常用函數(shù)分享給大家,繼續(xù)關注。
- javascript 終止函數(shù)執(zhí)行操作
- JavaScript截取字符串的Slice、Substring、Substr函數(shù)詳解和比較
- javascript字母大小寫轉換的4個函數(shù)詳解
- JavaScript中的函數(shù)的兩種定義方式和函數(shù)變量賦值
- JavaScript中的apply和call函數(shù)詳解
- javascript中聲明函數(shù)的方法及調用函數(shù)的返回值
- JavaScript實現(xiàn)的in_array函數(shù)
- JavaScript數(shù)組函數(shù)unshift、shift、pop、push使用實例
- 理解javascript中的回調函數(shù)(callback)
- javascript 自定義回調函數(shù)示例代碼
- Javascript獲取當前時間函數(shù)和時間操作小結
- 原生Javascript封裝的一個AJAX函數(shù)分享
- 詳談JavaScript 匿名函數(shù)及閉包
- JavaScript中的alert()函數(shù)使用技巧詳解
- JavaScript中的console.dir()函數(shù)介紹
- javascript常用函數(shù)(2)
相關文章
JavaScript使用readAsDataUrl方法預覽圖片
這篇文章主要為大家詳細介紹了JavaScript使用readAsDataUrl方法預覽圖片,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-05-05
JavaScript中防抖和節(jié)流的區(qū)別及適用場景
這篇文章主要介紹了JavaScript中防抖和節(jié)流的區(qū)別及適用場景,文章通過圍繞主題的相關資料展開詳細的內容介紹,具有一定的參考價值,需要的小伙伴可以參考一下2022-05-05
JavaScript實現(xiàn)文件下載的超簡單兩種方式分享
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)文件下載的超簡單兩種方式,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2023-12-12
詳述JavaScript實現(xiàn)繼承的幾種方式(推薦)
這篇文章主要介紹了詳述JavaScript實現(xiàn)繼承的幾種方式(推薦)的相關資料,需要的朋友可以參考下2016-03-03
基于JavaScript實現(xiàn)一個簡單的事件觸發(fā)器
這篇文章主要為大家詳細介紹了如何使用JavaScript實現(xiàn)一個簡單的事件觸發(fā)器,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-01-01

