WEB前端實(shí)現(xiàn)裁剪上傳圖片功能
最后的效果如下：
這里面有幾個(gè)功能，第一個(gè)是支持拖拽，第二個(gè)壓縮，第三個(gè)是裁剪編輯，第四個(gè)是上傳和上傳進(jìn)度顯示，下面依次介紹每個(gè)功能的實(shí)現(xiàn)：
1. 拖拽顯示圖片
拖拽讀取的功能主要是要兼聽(tīng)html5的drag事件，這個(gè)沒(méi)什么好說(shuō)的，查查api就知道怎么做了，主要在于怎么讀取用戶拖過(guò)來(lái)的圖片并把它轉(zhuǎn)成base64以在本地顯示。
var handler = {
init: function($container){
//需要把dragover的默認(rèn)行為禁掉，不然會(huì)跳頁(yè)
$container.on("dragover", function(event){
event.preventDefault();
});
$container.on("drop", function(event){
event.preventDefault();
//這里獲取拖過(guò)來(lái)的圖片文件，為一個(gè)File對(duì)象
var file = event.originalEvent.dataTransfer.files[0];
handler.handleDrop($(this), file);
});
}
}
varhandler={
init:function($container){
//需要把dragover的默認(rèn)行為禁掉，不然會(huì)跳頁(yè)
$container.on("dragover",function(event){
event.preventDefault();
});
$container.on("drop",function(event){
event.preventDefault();
//這里獲取拖過(guò)來(lái)的圖片文件，為一個(gè)File對(duì)象
varfile=event.originalEvent.dataTransfer.files[0];
handler.handleDrop($(this),file);
});
}
}
代碼第10行獲取圖片文件，然后傳給11行處理。
如果使用input，則監(jiān)聽(tīng)input的change事件：
$container.on("change", "input[type=file]", function(event){
if(!this.value) return;
var file = this.files[0];
handler.handleDrop($(this).closest(".container"), file);
this.value = "";
});
$container.on("change","input[type=file]",function(event){
if(!this.value)return;
varfile=this.files[0];
handler.handleDrop($(this).closest(".container"),file);
this.value="";
});
代碼第3行，獲取File對(duì)象，同樣傳給handleDrop進(jìn)行處理
接下來(lái)在handleDrop函數(shù)里，讀取file的內(nèi)容，并把它轉(zhuǎn)成base64的格式：
handleDrop: function($container, file){
var $img = $container.find("img");
handler.readImgFile(file, $img, $container);
},
handleDrop:function($container,file){
var$img= $container.find("img");
handler.readImgFile(file,$img,$container);
},
我的代碼里面又調(diào)了個(gè)readImgFile的函數(shù)，helper的函數(shù)比較多，主要是為了拆解大模塊和復(fù)用小模塊。
在readImgFile里面讀取圖片文件內(nèi)容：
使用FileReader讀取文件 JavaScript
readImgFile: function(file, $img, $container){
var reader = new FileReader(file);
//檢驗(yàn)用戶是否選則是圖片文件
if(file.type.split("/")[0] !== "image"){
util.toast("You should choose an image file");
return;
}
reader.onload = function(event) {
var base64 = event.target.result;
handler.compressAndUpload($img, base64, file, $container);
}
reader.readAsDataURL(file);
}
readImgFile:function(file,$img,$container){
varreader=newFileReader(file);
//檢驗(yàn)用戶是否選則是圖片文件
if(file.type.split("/")[0]!=="image"){
util.toast("You should choose an image file");
return;
}
reader.onload=function(event){
varbase64=event.target.result;
handler.compressAndUpload($img,base64,file, $container);
}
reader.readAsDataURL(file);
}
這里是通過(guò)FileReader讀取文件內(nèi)容，調(diào)的是readAsDataURL，這個(gè)api能夠把二進(jìn)制圖片內(nèi)容轉(zhuǎn)成base64的格式，讀取完之后會(huì)觸發(fā)onload事件，在onload里面進(jìn)行顯示和上傳：
//獲取圖片base64內(nèi)容
var base64 = event.target.result;
//如果圖片大于1MB，將body置半透明
if(file.size > ONE_MB){
$("body").css("opacity", 0.5);
}
//因?yàn)檫@里圖片太大會(huì)被卡一下，整個(gè)頁(yè)面會(huì)不可操作
$img.attr("src", baseUrl);
//還原
if(file.size > ONE_MB){
$("body").css("opacity", 1);
}
//然后再調(diào)一個(gè)壓縮和上傳的函數(shù)
handler.compressAndUpload($img, file, $container);
//獲取圖片base64內(nèi)容
varbase64=event.target.result;
//如果圖片大于1MB，將body置半透明
if(file.size>ONE_MB){
$("body").css("opacity",0.5);
}
//因?yàn)檫@里圖片太大會(huì)被卡一下，整個(gè)頁(yè)面會(huì)不可操作
$img.attr("src",baseUrl);
//還原
if(file.size>ONE_MB){
$("body").css("opacity",1);
}
//然后再調(diào)一個(gè)壓縮和上傳的函數(shù)
handler.compressAndUpload($img,file,$container);
如果圖片有幾個(gè)Mb的，在上面第8行展示的時(shí)候被卡一下，筆者曾嘗試使用web worker多線程解決，但是由于多線程沒(méi)有window對(duì)象，更不能操作dom，所以不能很好地解決這個(gè)問(wèn)題。采取了一個(gè)補(bǔ)償措施：通過(guò)把頁(yè)面變虛告訴用戶現(xiàn)在在處理之中，頁(yè)面不可操作，稍等一會(huì)
這里還會(huì)有一個(gè)問(wèn)題，就是ios系統(tǒng)拍攝的照片，如果不是橫著拍的，展示出來(lái)的照片旋轉(zhuǎn)角度會(huì)有問(wèn)題，如下一張豎著拍的照片，讀出來(lái)是這樣的：
即不管你怎么拍，ios實(shí)際存的圖片都是橫著放的，因此需要用戶自己手動(dòng)去旋轉(zhuǎn)。旋轉(zhuǎn)的角度放在了exif的數(shù)據(jù)結(jié)構(gòu)里面，把這個(gè)讀出來(lái)就知道它的旋轉(zhuǎn)角度了，用一個(gè)EXIF的庫(kù)讀?。?/p>
讀取exif的信息
readImgFile: function(file, $img, $container){
EXIF.getData(file, function(){
var orientation = this.exifdata.Orientation,
rotateDeg = 0;
//如果不是ios拍的照片或者是橫拍的，則不用處理，直接讀取
if(typeof orientation === "undefined" || orientation === 1){
//原本的readImgFile，添加一個(gè)rotateDeg的參數(shù)
handler.doReadImgFile(file, $img, $container, rotateDeg);
}
//否則用canvas旋轉(zhuǎn)一下
else{
rotateDeg = orientation === 6 ? 90*Math.PI/180 :
orientation === 8 ? -90*Math.PI/180 :
orientation === 3 ? 180*Math.PI/180 : 0;
handler.doReadImgFile(file, $img, $container, rotateDeg);
}
});
}
readImgFile:function(file,$img,$container){
EXIF.getData(file,function(){
varorientation=this.exifdata.Orientation,
rotateDeg=0;
//如果不是ios拍的照片或者是橫拍的，則不用處理，直接讀取
if(typeoforientation==="undefined"||orientation===1){
//原本的readImgFile，添加一個(gè)rotateDeg的參數(shù)
handler.doReadImgFile(file,$img,$container,rotateDeg);
}
//否則用canvas旋轉(zhuǎn)一下
else{
rotateDeg=orientation===6?90*Math.PI/180:
orientation===8?-90*Math.PI/180:
orientation===3?180*Math.PI/180:0;
handler.doReadImgFile(file,$img,$container,rotateDeg);
}
});
}
知道角度之后，就可以用canvas處理了，在下面的壓縮圖片進(jìn)行說(shuō)明，因?yàn)閴嚎s也要用到canvas
2. 壓縮圖片
壓縮圖片可以借助canvas，canvas可以很方便地實(shí)現(xiàn)壓縮，其原理是把一張圖片畫(huà)到一個(gè)小的畫(huà)布，然后再把這個(gè)畫(huà)布的內(nèi)容導(dǎo)出base64，就能夠拿到一張被壓小的圖片了：
//設(shè)定圖片最大壓縮寬度為1500px var maxWidth = 1500; var resultImg = handler.compress($img[0], maxWidth, file.type); //設(shè)定圖片最大壓縮寬度為1500px varmaxWidth=1500; varresultImg=handler.compress($img[0],maxWidth,file.type);
compress函數(shù)進(jìn)行壓縮，在這個(gè)函數(shù)里首先創(chuàng)建一個(gè)canvas對(duì)象，然后計(jì)算這個(gè)畫(huà)布的大?。?/p>
compress: function(img, maxWidth, mimeType){
//創(chuàng)建一個(gè)canvas對(duì)象
var cvs = document.createElement('canvas');
var width = img.naturalWidth,
height = img.naturalHeight,
imgRatio = width / height;
//如果圖片維度超過(guò)了給定的maxWidth 1500，
//為了保持圖片寬高比，計(jì)算畫(huà)布的大小
if(width > maxWidth){
width = maxWidth;
height = width / imgRatio;
}
cvs.width = width;
cvs.height = height;
}
compress:function(img,maxWidth,mimeType){
//創(chuàng)建一個(gè)canvas對(duì)象
varcvs=document.createElement('canvas');
varwidth=img.naturalWidth,
height=img.naturalHeight,
imgRatio=width/height;
//如果圖片維度超過(guò)了給定的maxWidth 1500，
//為了保持圖片寬高比，計(jì)算畫(huà)布的大小
if(width>maxWidth){
width=maxWidth;
height=width/imgRatio;
}
cvs.width=width;
cvs.height=height;
}
接下來(lái)把大的圖片畫(huà)到一個(gè)小的畫(huà)布上，再導(dǎo)出：
//把大圖片畫(huà)到一個(gè)小畫(huà)布
var ctx = cvs.getContext("2d").drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight, 0, 0, width, height);
//圖片質(zhì)量進(jìn)行適當(dāng)壓縮
var quality = width >= 1500 ? 0.5 :
width > 600 ? 0.6 : 1;
//導(dǎo)出圖片為base64
var newImageData = cvs.toDataURL(mimeType, quality);
var resultImg = new Image();
resultImg.src = newImageData;
return resultImg;
//把大圖片畫(huà)到一個(gè)小畫(huà)布
varctx=cvs.getContext("2d").drawImage(img,0,0,img.naturalWidth,img.naturalHeight,0,0,width,height);
//圖片質(zhì)量進(jìn)行適當(dāng)壓縮
varquality=width>=1500?0.5:
width>600?0.6:1;
//導(dǎo)出圖片為base64
varnewImageData=cvs.toDataURL(mimeType,quality);
varresultImg=newImage();
resultImg.src=newImageData;
returnresultImg;
最后一行返回了一個(gè)被壓縮過(guò)的小圖片，就可對(duì)這個(gè)圖片進(jìn)行裁剪了。
在說(shuō)明裁剪之前，由于第二點(diǎn)提到ios拍的照片需要旋轉(zhuǎn)一下，在壓縮的時(shí)候可以一起處理。也就是說(shuō)，如果需要旋轉(zhuǎn)的話，那么畫(huà)在canvas上面就把它旋轉(zhuǎn)好了：
var ctx = cvs.getContext("2d");
var destX = 0,
destY = 0;
if(rotateDeg){
ctx.translate(cvs.width / 2, cvs.height / 2);
ctx.rotate(rotateDeg);
destX = -width / 2,
destY = -height / 2;
}
ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight, destX, destY, width, height);
varctx=cvs.getContext("2d");
vardestX=0,
destY=0;
if(rotateDeg){
ctx.translate(cvs.width/2,cvs.height/2);
ctx.rotate(rotateDeg);
destX=-width/2,
destY=-height/2;
}
ctx.drawImage(img,0,0,img.naturalWidth,img.naturalHeight,destX,destY,width,height);
這樣就解決了ios圖片旋轉(zhuǎn)的問(wèn)題，得到一張旋轉(zhuǎn)和壓縮調(diào)節(jié)過(guò)的圖片之后，再用它進(jìn)行裁剪和編輯
3. 裁剪圖片
裁剪圖片，上網(wǎng)找到了一個(gè)插件cropper，這個(gè)插件還是挺強(qiáng)大，支持裁剪、旋轉(zhuǎn)、翻轉(zhuǎn)，但是它并沒(méi)有對(duì)圖片真正的處理，只是記錄了用戶做了哪些變換，然后你自己再去處理?？梢园炎儞Q的數(shù)據(jù)傳給后端，讓后端去處理。這里我們?cè)谇岸颂幚?，因?yàn)槲覀儾挥萌ゼ嫒軮E8。
如下，我把一張圖片，旋轉(zhuǎn)了一下，同時(shí)翻轉(zhuǎn)了一下：
它的輸出是：
{
height: 319.2000000000001,
rotate: 45,
scaleX: -1,
scaleY: 1,
width: 319.2000000000001
x: 193.2462838120872
y: 193.2462838120872
}
{
height:319.2000000000001,
rotate:45,
scaleX:-1,
scaleY:1,
width:319.2000000000001
x:193.2462838120872
y:193.2462838120872
}
通過(guò)這些信息就知道了：圖片被左右翻轉(zhuǎn)了一下，同時(shí)順時(shí)針轉(zhuǎn)了45度，還知道裁剪選框的位置和大小。通過(guò)這些完整的信息就可以做一對(duì)一的處理。
在展示的時(shí)候，插件使用的是img標(biāo)簽，設(shè)置它的css的transform屬性進(jìn)行變換。真正的處理還是要借助canvas，這里分三步說(shuō)明：
1. 假設(shè)用戶沒(méi)有進(jìn)行旋轉(zhuǎn)和翻轉(zhuǎn)，只是選了簡(jiǎn)單地選了下區(qū)域裁剪了一下，那就簡(jiǎn)單很多。最簡(jiǎn)單的辦法就是創(chuàng)建一個(gè)canvas，它的大小就是選框的大小，然后根據(jù)起點(diǎn)x、y和寬高把圖片相應(yīng)的位置畫(huà)到這個(gè)畫(huà)布，再導(dǎo)出圖片就可以了。由于考慮到需要翻轉(zhuǎn)，所以用第二種方法，創(chuàng)建一個(gè)和圖片一樣大小的canvas，把圖片原封不動(dòng)地畫(huà)上去，然后把選中區(qū)域的數(shù)據(jù)imageData存起來(lái)，重新設(shè)置畫(huà)布的大小為選中框的大小，再把imageData畫(huà)上去，最后再導(dǎo)出就可以了：
var cvs = document.createElement('canvas');
var img = $img[0];
var width = img.naturalWidth,
height = img.naturalHeight;
cvs.width = width;
cvs.height = height;
var ctx = cvs.getContext("2d");
var destX = 0,
destY = 0;
ctx.drawImage(img, destX, destY);
//把選中框里的圖片內(nèi)容存起來(lái)
var imageData = ctx.getImageData(cropOptions.x, cropOptions.y, cropOptions.width, cropOptions.height);
cvs.width = cropOptions.width;
cvs.height = cropOptions.height;
//然后再畫(huà)上去
ctx.putImageData(imageData, 0, 0);
varcvs=document.createElement('canvas');
varimg=$img[0];
varwidth=img.naturalWidth,
height=img.naturalHeight;
cvs.width=width;
cvs.height=height;
varctx=cvs.getContext("2d");
vardestX=0,
destY=0;
ctx.drawImage(img,destX,destY);
//把選中框里的圖片內(nèi)容存起來(lái)
varimageData=ctx.getImageData(cropOptions.x,cropOptions.y,cropOptions.width,cropOptions.height);
cvs.width=cropOptions.width;
cvs.height=cropOptions.height;
//然后再畫(huà)上去
ctx.putImageData(imageData,0,0);
代碼14行，通過(guò)插件給的數(shù)據(jù)，保存選中區(qū)域的圖片數(shù)據(jù)，18行再把它畫(huà)上去
2. 如果用戶做了翻轉(zhuǎn)，用上面的結(jié)構(gòu)很容易可以實(shí)現(xiàn)，只需要在第11行drawImage之前對(duì)畫(huà)布做一下翻轉(zhuǎn)變化：
canvas flip實(shí)現(xiàn) JavaScript
//fip
if(cropOptions.scaleX === -1 || cropOptions.scaleY === -1){
destX = cropOptions.scaleX === -1 ? width * -1 : 0; // Set x position to -100% if flip horizontal
destY = cropOptions.scaleY === -1 ? height * -1 : 0; // Set y position to -100% if flip vertical
ctx.scale(cropOptions.scaleX, cropOptions.scaleY);
}
ctx.drawImage(img, destX, destY);
//fip
if(cropOptions.scaleX===-1||cropOptions.scaleY===-1){
destX=cropOptions.scaleX===-1?width*-1:0; // Set x position to -100% if flip horizontal
destY=cropOptions.scaleY===-1?height*-1:0; // Set y position to -100% if flip vertical
ctx.scale(cropOptions.scaleX,cropOptions.scaleY);
}
ctx.drawImage(img,destX,destY);
其它的都不用變，就可以實(shí)現(xiàn)上下左右翻轉(zhuǎn)了，難點(diǎn)在于既要翻轉(zhuǎn)又要旋轉(zhuǎn)
3. 兩種變換疊加沒(méi)辦法直接通過(guò)變化canvas的坐標(biāo)，一次性drawImage上去。還是有兩種辦法，第一種是用imageData進(jìn)行數(shù)學(xué)變換，計(jì)算一遍得到imageData里面，從第一行到最后一行每個(gè)像素新的rgba值是多少，然后再畫(huà)上去；第二種辦法，就是創(chuàng)建第二個(gè)canvas，第一個(gè)canvas作翻轉(zhuǎn)，把它的結(jié)果畫(huà)到第二個(gè)canvas，然后再旋轉(zhuǎn)，最后導(dǎo)到。由于第二種辦法相對(duì)比較簡(jiǎn)單，我們采取第二種辦法：
同上，在第一個(gè)canvas畫(huà)完之后：
實(shí)現(xiàn)旋轉(zhuǎn)、翻轉(zhuǎn)結(jié)合 JavaScript
ctx.drawImage(img, destX, destY);
//rotate
if(cropOptions.rotate !== 0){
var newCanvas = document.createElement("canvas"),
deg = cropOptions.rotate / 180 * Math.PI;
//旋轉(zhuǎn)之后，導(dǎo)致畫(huà)布變大，需要計(jì)算一下
newCanvas.width = Math.abs(width * Math.cos(deg)) + Math.abs(height * Math.sin(deg));
newCanvas.height = Math.abs(width * Math.sin(deg)) + Math.abs(height * Math.cos(deg));
var newContext = newCanvas.getContext("2d");
newContext.save();
newContext.translate(newCanvas.width / 2, newCanvas.height / 2);
newContext.rotate(deg);
destX = -width / 2,
destY = -height / 2;
//將第一個(gè)canvas的內(nèi)容在經(jīng)旋轉(zhuǎn)后的坐標(biāo)系畫(huà)上來(lái)
newContext.drawImage(cvs, destX, destY);
newContext.restore();
ctx = newContext;
cvs = newCanvas;
}
ctx.drawImage(img,destX,destY);
//rotate
if(cropOptions.rotate!==0){
varnewCanvas=document.createElement("canvas"),
deg=cropOptions.rotate/180*Math.PI;
//旋轉(zhuǎn)之后，導(dǎo)致畫(huà)布變大，需要計(jì)算一下
newCanvas.width=Math.abs(width*Math.cos(deg))+Math.abs(height*Math.sin(deg));
newCanvas.height=Math.abs(width*Math.sin(deg))+Math.abs(height*Math.cos(deg));
varnewContext=newCanvas.getContext("2d");
newContext.save();
newContext.translate(newCanvas.width/2,newCanvas.height/2);
newContext.rotate(deg);
destX=-width/2,
destY=-height/2;
//將第一個(gè)canvas的內(nèi)容在經(jīng)旋轉(zhuǎn)后的坐標(biāo)系畫(huà)上來(lái)
newContext.drawImage(cvs,destX,destY);
newContext.restore();
ctx=newContext;
cvs=newCanvas;
}
將第二步的代碼插入第一步，再將第三步的代碼插入第二步，就是一個(gè)完整的處理過(guò)程了。
最后再介紹下上傳
4. 文件上傳和上傳進(jìn)度
文件上傳只能通過(guò)表單提交的形式，編碼方式為multipart/form-data，這個(gè)我在《三種上傳文件不刷新頁(yè)面的方法討論：iframe/FormData/FileReader》已做詳細(xì)討論，可以通過(guò)寫(xiě)一個(gè)form標(biāo)簽進(jìn)行提交，但也可以模擬表單提交的格式，表單提交的格式在那篇文章已提及。
首先創(chuàng)建一個(gè)ajax請(qǐng)求：
JavaScript
var xhr = new XMLHttpRequest();
xhr.open('POST', upload_url, true);
var boundary = 'someboundary';
xhr.setRequestHeader('Content-Type', 'multipart/form-data; boundary=' + boundary);
varxhr=newXMLHttpRequest();
xhr.open('POST',upload_url,true);
varboundary='someboundary';
xhr.setRequestHeader('Content-Type','multipart/form-data; boundary='+boundary);
并設(shè)置編碼方式，然后拼表單格式的數(shù)據(jù)進(jìn)行上傳：
ajax上傳 JavaScript
var data = img.src;
data = data.replace('data:' + file.type + ';base64,', '');
xhr.sendAsBinary([
//name=data
'--' + boundary,
'Content-Disposition: form-data; name="data"; filename="' + file.name + '"',
'Content-Type: ' + file.type, '',
atob(data), '--' + boundary,
//name=docName
'--' + boundary,
'Content-Disposition: form-data; name="docName"', '',
file.name,
'--' + boundary + '--'
].join('\r\n'));
vardata=img.src;
data=data.replace('data:'+file.type+';base64,','');
xhr.sendAsBinary([
//name=data
'--'+boundary,
'Content-Disposition: form-data; name="data"; filename="'+file.name+'"',
'Content-Type: '+file.type,'',
atob(data),'--'+boundary,
//name=docName
'--'+boundary,
'Content-Disposition: form-data; name="docName"','',
file.name,
'--'+boundary+'--'
].join('\r\n'));
表單數(shù)據(jù)不同的字段是用boundary的隨機(jī)字符串分隔的。拼好之后用sendAsBinary發(fā)出去，在調(diào)這個(gè)函數(shù)之前先監(jiān)聽(tīng)下它的事件，包括
1) 上傳的進(jìn)度：
上傳進(jìn)度 JavaScript
xhr.upload.onprogress = function(event){
if(event.lengthComputable) {
duringCallback((event.loaded / event.total) * 100);
}
};
xhr.upload.onprogress=function(event){
if(event.lengthComputable){
duringCallback((event.loaded/event.total)*100);
}
};
這里凋duringCallback的回調(diào)函數(shù)，給這個(gè)回調(diào)函數(shù)傳了當(dāng)前進(jìn)度的參數(shù)，用這個(gè)參數(shù)就可以設(shè)置進(jìn)度條的過(guò)程了。進(jìn)度條可以自己實(shí)現(xiàn)，或者直接上網(wǎng)找一個(gè)，隨便一搜就有了。
2) 成功和失敗：
成功和失敗回調(diào) JavaScript
xhr.onreadystatechange = function() {
if (this.readyState == 4){
if (this.status == 200) {
successCallback(this.responseText);
}else if (this.status >= 400) {
if (errorCallback && errorCallback instanceof Function) {
errorCallback(this.responseText);
}
}
}
};
xhr.onreadystatechange=function(){
if(this.readyState==4){
if(this.status==200){
successCallback(this.responseText);
}elseif(this.status>=400){
if(errorCallback&& errorCallback instanceofFunction){
errorCallback(this.responseText);
}
}
}
};
這個(gè)上傳功能參考了一個(gè)JIC插件
至此整個(gè)功能就拆解說(shuō)明完了，上面的代碼可以兼容到IE10，F(xiàn)ileReader的api到IE10才兼容，問(wèn)題應(yīng)該不大，因?yàn)槲④浂家呀?jīng)放棄了IE11以下的瀏覽器，為啥我們還要去兼容呢。
這個(gè)東西一來(lái)減少了后端的壓力，二來(lái)不用和后端來(lái)回交互，對(duì)用戶來(lái)說(shuō)還是比較好的，除了上面說(shuō)的一個(gè)地方會(huì)被卡一下之外。核心代碼已在上面說(shuō)明，完整代碼和demo就不再放出來(lái)了。
以上所述是小編給大家介紹的WEB前端實(shí)現(xiàn)裁剪上傳圖片功能，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
js操作二級(jí)聯(lián)動(dòng)實(shí)現(xiàn)代碼
網(wǎng)上二級(jí)（多級(jí)）聯(lián)動(dòng)的例子也不少，有各種不同的操作方法。我所采用的方法網(wǎng)上也應(yīng)該有的，不過(guò)我還沒(méi)有看到過(guò)。2010-07-07
JavaScript 替換所有匹配內(nèi)容及正則替換方法
這篇文章主要介紹了JavaScript 替換所有匹配內(nèi)容，文中給大家提到了使用正則表達(dá)式替換方法，通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2020-02-02
js獲取當(dāng)前日期時(shí)間及其它日期操作匯總
這篇文章主要介紹了js獲取當(dāng)前日期時(shí)間及其它日期操作匯總，感興趣的小伙伴們可以參考一下2016-03-03
layer實(shí)現(xiàn)彈出層自動(dòng)調(diào)節(jié)位置
今天小編就為大家分享一篇layer實(shí)現(xiàn)彈出層自動(dòng)調(diào)節(jié)位置，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
在使用JavaScript對(duì)數(shù)組進(jìn)行操作的時(shí)候，我們經(jīng)常需要將數(shù)組進(jìn)行備份，事實(shí)證明如果只是簡(jiǎn)單的將它賦予其他變量，那么我們只要更改其中的任何一個(gè)，然后其他的也會(huì)跟著改變，這就導(dǎo)致了問(wèn)題的發(fā)生。2014-04-04
JAVASCRIPT車架號(hào)識(shí)別/驗(yàn)證函數(shù)代碼 汽車車架號(hào)驗(yàn)證程序
偶然中在CSDN里找到C#版的驗(yàn)證程序，因此改編了一版JS版本，相信會(huì)對(duì)大家有用2012-01-01
利用JS實(shí)現(xiàn)簡(jiǎn)單的瀑布流加載圖片效果
今天學(xué)習(xí)了一個(gè)瀑布流加載效果，很多網(wǎng)站都有瀑布流效果，下面通過(guò)本文給大家分享利用JS實(shí)現(xiàn)簡(jiǎn)單的瀑布流加載圖片效果，需要的朋友參考下吧2017-04-04
php+js實(shí)現(xiàn)倒計(jì)時(shí)功能
由PHP傳入JS處理的時(shí)間戳我說(shuō)怎么老是對(duì)不上號(hào)呢，原來(lái)JS時(shí)間戳為13位，包含3位毫秒的，而PHP只有10位不包含毫秒的。恩，基礎(chǔ)還是要補(bǔ)補(bǔ)的2014-06-06
微信小程序中this.data與this.setData的區(qū)別詳解
這篇文章主要給大家介紹了關(guān)于微信小程序中this.data與this.setData區(qū)別的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧2018-09-09
js實(shí)現(xiàn)移動(dòng)端輪播圖滑動(dòng)切換
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)移動(dòng)端輪播圖滑動(dòng)切換，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12