js HTML5 Ajax實現(xiàn)文件上傳進(jìn)度條功能
更新時間：2016年02月13日 09:20:40 作者：Strutsz
這篇文章主要介紹了javascript實現(xiàn)文件上傳進(jìn)度條功能的相關(guān)資料啊，感興趣的朋友可以參考一下
本文實例介紹了js結(jié)合HTML5 Ajax實現(xiàn)文件上傳進(jìn)度條功能，分享給大家供大家參考，具體內(nèi)容如下
1. lib.js
var Host = window.location.host;
//--Cookie
function setCookie(name,value)
{
var Days = 30;
var exp = new Date();
exp.setTime(exp.getTime() + Days*24*60*60*1000);
document.cookie = name + '='+ escape (value) + ';expires=' + exp.toGMTString();
}
function getCookie(name)
{
var arr,reg=new RegExp('(^| )'+name+'=([^;]*)(;|$)');
if(arr=document.cookie.match(reg))
return unescape(arr[2]);
else
return null;
}
//--Dom & String
var get = {
//-- 獲得Dom Id
Id:function(obj)
{
return is.object(obj) ? obj : (document.getElementById(obj));
},
//--獲得Body
body:function()
{
return document.body;
},
//-- 通過Html 標(biāo)簽取對象
Tag:function(obj, Tagname)
{
return obj.getElementsByTagName(Tagname);
},
//-- 通過Name 來取對象
Name:function (Name)
{
return document.getElementsByName(Name);
},
//-- Url編碼轉(zhuǎn)換
encode:function (str)
{
return encodeURIComponent(str);
},
filepath:function (obj,callback)
{
window.URL = window.URL || window.webkitURL;
img = new Image();
var reader = new FileReader();
reader.readAsDataURL(get.Id(obj).files[0]);
reader.onload = function(e){
callback(this.result);
source = this.result;
}
// return window.URL.createObjectURL(get.Id(obj).files[0]);
}
}
var set = {
//-- url 跳轉(zhuǎn)
url:function(URL)
{
window.location.href = URL;
},
//-- 頁面刷新
reload:function()
{
window.location.reload();
},
//-- 動態(tài)設(shè)置 標(biāo)簽內(nèi)容 @ obj 為標(biāo)簽內(nèi)容，text 為內(nèi)容
html:function (obj, text)
{
obj.innerHTML = text;
}
}
var string = {
//-- 將字符轉(zhuǎn)換成Json
toJson:function(str)
{
return eval('('+str+')');
},
//-- 不區(qū)分大小寫判斷 相等true ,
eqlower:function(str1, str2)
{
if(str1.toLowerCase() == str2.toLowerCase()){
return true;
}
return false;
}
}
var is = {
//-- 是否是IE瀏覽器,用此來判斷是否支持HTML5，低于IE10的返回false，由于 IE采用 V8 JavaScript引擎
html5:function ()
{
return (!/*@cc_on!@*/~0x1111111111111111) ? false : true;
},
//--驗證身份證，并且返回身份證，性別，住址，年齡
Card:function (sId) {
var card_area={
11:'北京', 12:'天津', 13:'河北', 14:'山西', 21:'遼寧', 15:'內(nèi)蒙古',
22:'吉林', 31:'上海', 32:'江蘇', 33:'浙江', 34:'安徽', 23:'黑龍江',
35:'福建', 36:'江西', 37:'山東', 41:'河南', 42:'湖北', 43:'湖南',
44:'廣東', 45:'廣西', 46:'海南', 50:'重慶', 51:'四川', 52:'貴州',
53:'云南', 54:'西藏', 61:'陜西', 62:'甘肅', 63:'青海', 64:'寧夏',
65:'新疆', 71:'臺灣', 81:'香港', 82:'澳門', 91:'國外'
};
var iSum=0
var info=''
var card_info=Array(2);
var error = '';
sId=sId.replace(/x$/i,'a');
if (sId.length==0){
error = '請?zhí)顚懩愕纳矸葑C';
return false;
}
if (null == card_area[parseInt(sId.substr(0,2))]) {
error = '非法證件你的地區(qū)填寫有錯誤請仔細(xì)填寫';
return false;
}
sBirthday=sId.substr(6,4)+'-'+Number(sId.substr(10,2)) + '-'+Number(sId.substr(12,2));
var d = new Date(sBirthday.replace(/-/g,'/'));
if (sBirthday!=(d.getFullYear()+'-'+ (d.getMonth()+1) + '-' + d.getDate())) {
error = '非法證件你的生日填寫有錯誤請仔細(xì)填寫';
return false;
}
for(var i = 17; i>=0; i--)
{
iSum += (Math.pow(2,i) % 11) *
parseInt(sId.charAt(17 - i),11)
}
if (1 != iSum%11) {
error = '非法證號你確認(rèn)你是地球人請認(rèn)真填寫哦~~~~';
return false;
}
if (sId.length>19){
error = '你確認(rèn)你的身份證是有效證件？';
return false;
}
card_info[0] = card_area[parseInt(sId.substr(0, 2))];
card_info[1] = sBirthday;
card_info[2] = sId.substr(16, 1) % 2 ? '男' : '女';
return card_info;
},
//--獲取變量的類型， object，string，int.....等
type:function(type)
{
if(is.object(type)) {
return 'object';
}else if (is.string(type)) {
return 'string';
}else if (is.int(type)) {
return 'int';
}else if (is.double(type)) {
return 'double';
}else {
return 'null';
}
},
//-- 變量是否是對象，返回 true|false
object:function(type)
{
return 'object' == typeof(type) ? true:false;
},
//-- 變量是否是字符串 ， 返回 true|false
string:function(type)
{
return 'string' == typeof(type) ? true:false;
},
//-- 變量是否是整型，返回 true|false
int:function(type)
{
if ('number' == typeof(type)) {
if(0 > type.toString().indexOf('.')) {
return true;
}
}
return false;
},
//-- 變量是否是小數(shù)，返回 true|false
double:function(type)
{
if('number' == typeof(type)) {
if (0<=type.toString().indexOf('.')) {
return true;
}
}
return false;
}
}
var file = {
//--異步文件上傳
upload:function (json)
{
var post = new XMLHttpRequest();
var FLIE = new Object();
var json = is.object(json) ? json : string.toJson(json);
var dataType = string.eqlower(json.dataType,'json') ? true : false;
var fileSize = 0;
if(!json.url&&json.error) {
json.error(404);
return;
}
if(!is.object(json.file)) {
FLIE.id = get.Id(json.file);
//-- 大文件處理
if(json.maxfile) {
//--文件總大小
fileSize = file.getSize(FLIE.id);
//--以2M為單位進(jìn)行文件切割
shardSize = 1024 * 1024 << 1;
//--總片數(shù)
shardCount = Math.ceil(fileSize / shardSize);
for(var i = 0; i < shardCount; ++i)
{
//--計算每一片的起始與結(jié)束位置
var start = i * shardSize;
var end = Math.min(fileSize, start + shardSize);
var formData = new FormData();
//--slice方法用于切出文件的一部分
formData.append(json.file, FLIE.id.files[0].slice(start,end));
formData.append("total", shardCount); //總片數(shù)
formData.append("index", i + 1); //當(dāng)前是第幾片
post.upload.addEventListener('progress', callback, false);
post.open('post', json.url, true); // 異步傳輸
post.send(formData);
post.upload.onprogress = function (ev) {
if(file.getProgress(ev) == 100) {
json.success(ev);
}
}
}
}else {
var formData = new FormData();
formData.append(json.file, FLIE.id.files[0]);
if (json.progress) {
post.upload.addEventListener('progress', json.progress, false);
}
post.open('post', json.url, true); // 異步傳輸
post.send(formData);
/*post.upload.onprogress = function (ev) {
if(file.getProgress(ev) == 100) {
json.success(ev);
}
}*/
post.onreadystatechange = function () {
switch (post.readyState) {
case 1:{break;}
case 2:{break;}
case 3:{break;}
case 4:{
if (post.status == 200 || post.status == 0) {
json.success(string.toJson(post.responseText));
}
break;
}
}
}
}
}
},
//-- 獲得上傳文件的進(jìn)度值
getProgress:function (evt) {
var percentComplete = Math.round(evt.loaded * 100 / evt.total);
return percentComplete.toString();
},
//-- 獲得文件的大小
getSize:function (file) {
var FILE = get.Id(file).files[0];
var fileSize = 0;
if (file.size > 1024 * 1024) {
fileSize = (Math.round(FILE.size * 100 / (1024 * 1024)) / 100).toString();
} else {
fileSize = (Math.round(FILE.size * 100 / 1024) / 100).toString();
}
return fileSize;
},
//-- 獲得文件的類型
getType:function (file) {
var FILE = get.Id(file).files[0];
return FILE.type;
},
//-- 獲得文件的名字
getName:function (file) {
var FILE = get.Id(file).files[0];
return FILE.name;
},
//--包含文件
include:function (path) {
}
}
//--Ajax數(shù)據(jù)提交類
var Call = {
/**
* 參數(shù)為json對象|Json字符串，
* @type post|get 默認(rèn)為get ，請求方式
* @url String 字符串型 ,請求地址
* @loading bool true|false 是否開啟動畫
* @time int 動畫時間 如果 loading 為false 則不用設(shè)置這個參數(shù)
* @data Json | String 提交的數(shù)據(jù)
* @sucess 回調(diào)函數(shù) 這個必須有
*/
Ajax:function(json){
var json = is.object(json)?json:string.toJson(json);
var type = (json.type == undefined) || (json.type == '') ? 'get' : json.type; ;
var url = (json.url == undefined) || (json.url == '') ? alert('請求url不能為空') : json.url;
var loading = (json.Loading == undefined) || (json.Loading == '') ? false : json.Loading;
var time = (json.time == undefined) || (json.time == '') ? 2000 : json.time;
var dataType = string.eqlower(json.dataType,'json') ? 'json' : 'string';
if(loading) { var L = Loading.start(); }
var data = '';
if(is.object(json.data)) {
if(json.data) {
for(d in json.data) {
data = data + d + '=' + json.data[d] + '&';
}
}
if(string.eqlower(json.type,'get')) {
data ='?' + data.substring(0, data.length-1);
}
}else{
if(json.data.length>=1) {
data = json.data.indexOf('?') < 0 ? '?'+json.data:json.data+'';
}
}
try {
//--IE高版本創(chuàng)建XMLHTTP
XMLHttpReq = new ActiveXObject('Msxml2.XMLHTTP');
}
catch(E) {
try {
XMLHttpReq = new ActiveXObject('Microsoft.XMLHTTP');//IE低版本創(chuàng)建XMLHTTP
}
catch(E) {
XMLHttpReq = new XMLHttpRequest();//兼容非IE瀏覽器，直接創(chuàng)建XMLHTTP對象
}
}
if(XMLHttpReq) {
if (string.eqlower(json.type, 'post')) {
XMLHttpReq.open('post', url, true);
XMLHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
XMLHttpReq.send(data);
}else if (string.eqlower(json.type, 'get')) {
XMLHttpReq.open('get', url+data, true);
XMLHttpReq.send(null);
}
XMLHttpReq.onreadystatechange = function () {
switch (XMLHttpReq.readyState) {
case 1:{break;}
case 2:{break;}
case 3:{break;}
case 4:{
if (XMLHttpReq.status == 200 || XMLHttpReq.status == 0) {
if (loading) {
setTimeout(function(){
Loading.stop(L);
if(json.dataType == 'json')
json.success(string.toJson(XMLHttpReq.responseText));
else
json.success(XMLHttpReq.responseText)
}, time*1000);
}else {
if(json.dataType == 'json')
json.success(string.toJson(XMLHttpReq.responseText));
else
json.success(XMLHttpReq.responseText)
}
}
break;
}
}
}
}
}
}
var Loading = {
//-- Ajax動畫
start:function(){
var d = add.Dom(document.body,'style');
d.innerHTML = '@keyframes d{from {left:0px;}to {left:98%;}}';
var back = add.Dom(document.body, 'div');
var d0 = add.Dom(back, 'div');
var d1 = add.Dom(d0, 'div');
var d2 = add.Dom(d0, 'div');
var d3 = add.Dom(d0, 'div');
var d4 = add.Dom(d0, 'div');
add.Attr(back, 'style', 'width:100%;height:100%;filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5; background:#000; position:fixed; left:0px; top:0px; z-index;1000;');
add.Attr(d0, 'style', 'position:relative; top:50%; width:100%; height:30px;');
add.Attr(d1, 'style', 'height:15px; width:15px; position:absolute; background:#ABCDEF; animation:d 2s infinite; -moz-border-radius:15px; -webkit-border-radius: 15px; border-radius: 15px 15px 15px 15px; ');
add.Attr(d2, 'style', 'height:15px; width:15px; position:absolute; background:#ABCDEF; animation:d 3s infinite; -moz-border-radius:15px; -webkit-border-radius: 15px; border-radius: 15px 15px 15px 15px; ');
add.Attr(d3, 'style', 'height:15px; width:15px; position:absolute; background:#ABCDEF; animation:d 4s infinite; -moz-border-radius:15px; -webkit-border-radius: 15px; border-radius: 15px 15px 15px 15px; ');
add.Attr(d4, 'style', 'height:15px; width:15px; position:absolute; background:#ABCDEF; animation:d 5s infinite; -moz-border-radius:15px; -webkit-border-radius: 15px; border-radius: 15px 15px 15px 15px; ');
var div = { domback:back, dom0:d0, dom1:d1, dom2:d2, dom3:d3, dom4:d4 }
return div;
},
//-- Ajax停止動畫
stop:function(d) {
d.dom0.parentNode.removeChild(d.dom0);
d.dom1.parentNode.removeChild(d.dom1);
d.dom2.parentNode.removeChild(d.dom2);
d.dom3.parentNode.removeChild(d.dom3);
d.dom4.parentNode.removeChild(d.dom4);
d.domback.parentNode.removeChild(d.domback);
}
}
var del = {
Dom:function(obj) {
obj.parentNode.removeChild(obj);
}
}
var add = {
//--動態(tài)添加Dom節(jié)點
Dom:function (obj,dom) {
var dom = document.createElement(dom);
get.Id(obj).appendChild(dom);
return dom;
},
//-- 動態(tài)添加屬性
Attr:function(obj,key,value){
obj.setAttribute(key, value);
return obj;
}
}
//--URL編碼
function url(Str){
return decodeURI(Str);
}
/**
* 模板字符串，語法標(biāo)簽采用<js></js>
* 完全遵循javascript原生語法
* @param template
* @param vars
* @returns {Function}
*/
function js_template(template, vars) {
//唯一分隔標(biāo)志字符串
var split = '_{' + Math.random() + '}_';
//消除換行符
var estr = template.replace(/\n|\r|\t/g, '');
var js = [];
/****
* 匹配標(biāo)簽<js> ...</js>--并且替換為特定的分隔串，
* 并將匹配的js代碼放入js數(shù)組中備用
* */
estr = estr.replace(/<js>(.*?)<\/js>/g, function ($0, $1) {
js.push($1);
return split;
});
/*根據(jù)特定的分隔串分隔得到普通text文本串的數(shù)組*/
var text = estr.split(split);
estr = " var output='';";
/****
* 0101010---0為text[]元素,1為js[]元素
* 重新串起來連接為可執(zhí)行eval的estr
* **/
for (var i = 0; i < js.length; ++i) {
estr += 'output+=text[' + i + '];';
estr += js[i];
}
estr += 'output+=text[' + js.length + '];';
estr += 'return output;';
var fun =new Function('vars','text',estr);
return function(data){
return fun.apply(null,[data,text]);
}
}
2. add.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"><title>Lumino Pro - Dashboard</title>
<link href="__SOURCE__/css/bootstrap.min.css" rel="stylesheet">
<link href="__SOURCE__/css/datepicker3.css" rel="stylesheet">
<link href="__SOURCE__/css/styles.css" rel="stylesheet">
<link href="__SOURCE__/css/Table.css" rel="stylesheet">
<link href="__SOURCE__/css/dt.css" rel="stylesheet">
<link href="__SOURCE__/css/plus/buttons.css" rel="stylesheet">
<link href="__SOURCE__/css/file.css" rel="stylesheet">
<link href="__SOURCE__/css/webuploader.css" rel="stylesheet">
<link href="__SOURCE__/css/plus/bootstrap-switch.min.css" rel="stylesheet">
<link rel='stylesheet' type='text/css'>
<!--[if lt IE 9]>
<link href="__SOURCE__/css/rgba-fallback.css" rel="stylesheet">
<script src="__SOURCE__/js/html5shiv.js"></script>
<script src="__SOURCE__/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<include file="Apps/Admin/View/include/nav.html"/>
<div id="sidebar-collapse" class="col-sm-3 col-lg-2 sidebar">
<form role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
</form>
<include file="Apps/Admin/View/include/menu.html"/>
</div><!--/.sidebar-->
<div class="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2 main">
<div class="row">
<ol class="breadcrumb">
<li><a href="#"><span class="glyphicon glyphicon-home"></span></a></li>
<li class="active">Dashboard</li>
</ol>
</div>
<div class="row col-no-gutter-container">
<div class="panel panel-default">
<div class="panel-heading">Banner添加
<button id='up' type="button" style='float:right; margin:4px;"' class="btn btn-default"><span class="glyphicon glyphicon-plus"></span>上傳</button>
<button id='add' type="button" style='float:right; margin:4px;"' class="btn btn-default"><span class="glyphicon glyphicon-plus"></span>確定添加</button>
</div>
<div class="panel-body">
<div class="canvas-wrapper">
<form id='banner'>
<dl class='dt'>
<dd><label>Banner名字</label></dd>
<dt>
<div class="form-group has-success">
<input name='name' class="form-control" placeholder="Banner名字" value=''>
</div>
</dt>
<div style='clear:both;'></div>
<dd><label>Banner類型:</label></dd>
<dt>
<div class="form-group has-warning">
<select name='type' class="form-control" style='background:rgb(31,45,55); color:#FFF;'>
<option value='1' style=' font-size:18px;'>首頁</option>
<option value='2' style=' font-size:18px;'>內(nèi)頁廣告</option>
</select>
</div>
</dt>
<div style='clear:both;'></div>
<dd><label>Banner鏈接地址:</label></dd>
<dt>
<div class="form-group has-warning">
<input name='link' class="form-control" placeholder="Banner鏈接地址" value=''>
</div>
</dt>
</dl>
<dl class='dt'>
<dd><label>Banner上傳:</label></dd>
<dt>
<div class="form-group has-warning">
<input class="form-control" type = 'button' value='選擇文件'>
<input id='files' type='file' class="file">
</div>
</dt>
<div style='clear:both;'></div>
<dd><label>文件類型:</label></dd>
<dt>
<div class="form-group has-warning">
<div id='filetype' class='left' style='padding-top:2px;'></div>
</div>
</dt>
<div style='clear:both;'></div>
<dd><label>文件上傳進(jìn)度:</label></dd>
<dt>
<div class='form-control' style='padding:2px; height:26px; overflow:hidden;'>
<!-- <div id='progress' style='background:#ABCDEF; width:0px; height:22px;'></div> -->
<progress id='progress' max="100" value='0' style='width:100%; height:22px; background:#30a5ff;'>o(︶︿︶)o</progress>
<div id='gress' height:0px; style='padding-top:2px; color:#FFF; position:relative; bottom:28px; left:40%;'></div>
</div>
<div id='fileSize' class='right' style='padding-top:2px;'>
<span class='left'></span>
<span></span>
</div>
</dt>
</dl>
</form>
<div style='clear:both;'></div>
<div class='fixed-table-container' style='height:244px;'>
<img class='left' id ='thmb' src=''>
<div>
<ul class='ul-info' style='display:none;'>
<li><span class='left'>文件大小:</span><p>22222kb</p></li>
<li><span class='left'>文件路徑:</span><p>22222kb</p></li>
<li><span class='left'>圖片高度:</span><p>22222kb</p></li>
<li><span class='left'>圖片寬度:</span><p>22222kb</p></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div> <!--/.main-->
</div>
<script src="__SOURCE__/js/jquery-1.11.1.min.js"></script>
<script src="__SOURCE__/js/bootstrap.min.js"></script>
<script src="__SOURCE__/js/file.js"></script>
<script type="text/javascript" src="__SOURCE__/js/plus/bootstrap-datetimepicker.de.js" charset="UTF-8"></script>
<script src="__SOURCE__/js/plus/bootstrap-switch.min.js"></script>
<script src="__SOURCE__/js/table.js"></script>
<script type="text/javascript" src='__SOURCE__/js/lib.js'></script>
<script>
var data = new Object();
get.Id('files').onchange = function () {
get.filepath(this,function(str){
get.Id('thmb').src = str;
});
set.html(filetype,file.getName('files'));
get.Id('progress').value = 0;
set.html(get.Id('gress'),'');
set.html(get.Tag(get.Id('fileSize'), 'span')[0], file.getSize('files') + 'KB');
set.html(get.Tag(get.Id('fileSize'), 'span')[1], '/0kb');
}
get.Id('up').onclick = function () {
if(file.getSize('files')<=0) {
return false;
}
file.upload({
form:'banner', //form的id
url:'{:U('Banner/add',0,0)}', //上傳請求文件的地址
//maxfile:true, //是否啟用大文件上傳
dataType:'json',
progress:function(ev) { //--上傳中的進(jìn)度回掉函數(shù)
get.Id('progress').value = file.getProgress(ev);
//獲得上傳進(jìn)度用file.getProgress(ev)
set.html(get.Id('gress'),file.getProgress(ev)+'%');
set.html(get.Tag(get.Id('fileSize'), 'span')[1], '/' + file.getProgress(ev) * (file.getSize('files') / 100 >>0) + 'KB');
},
file:'files', //--文件輸入框的id
//--上傳完成后，后臺返回的回調(diào)函數(shù)
success:function(e){
set.html(get.Tag(get.Id('fileSize'), 'span')[1], '/' + file.getSize('files') + 'KB');
set.html(get.Id('gress'),'上傳完成');
data.bannerWidth = e.bannerWidth;
data.bannerHeight = e.bannerHeight;
data.bannerTyle = e.bannerTyle;
data.bannerImg = e.bannerImg;
}
});
}
get.Id('add').onclick = function () {
data.name = get.Name('name')[0].value;
data.type = get.Name('type')[0].value;
data.link = get.Name('link')[0].value;
data.act = 'add';
Call.Ajax({
type:'post', // 請求方式
Loading:true, // 是否啟動動畫
time:5, //動畫顯示幾秒
url:'{:U('Banner/add',0,0)}?act=add', //請求地址
data:data, //發(fā)送的數(shù)據(jù)
dataType:'json', //Ajax返回的數(shù)據(jù)類型 ，可以是String
success:function (e) { //回調(diào)函數(shù)
set.url(e.url);
}
});
}
</script>
</body>
</html>
希望本文所述對大家學(xué)習(xí)javascript程序設(shè)計有所幫助。
您可能感興趣的文章:
- 基于JS實現(xiàn)視頻上傳顯示進(jìn)度條
- JS+html5實現(xiàn)異步上傳圖片顯示上傳文件進(jìn)度條功能示例
- 原生JS上傳大文件顯示進(jìn)度條 php上傳文件代碼
- js實現(xiàn)帶進(jìn)度條提示的多視頻上傳功能
- 原生javascript上傳圖片帶進(jìn)度條【實例分享】
- 利用Plupload.js解決大文件上傳問題, 帶進(jìn)度條和背景遮罩層
- PHP + plupload.js實現(xiàn)多圖上傳并顯示進(jìn)度條加刪除實例代碼
- JS插件plupload.js實現(xiàn)多圖上傳并顯示進(jìn)度條
- PHP中使用Session配合Javascript實現(xiàn)文件上傳進(jìn)度條功能
- JS實現(xiàn)上傳文件顯示進(jìn)度條
相關(guān)文章
基于javascript實現(xiàn)漂亮的頁面過渡動畫效果附源碼下載
本文通過javascript實現(xiàn)漂亮的頁面過濾動畫效果，用戶通過點擊頁面左側(cè)的菜單，對應(yīng)的頁面加載時伴隨著滑動過濾動畫，并帶有進(jìn)度條效果。用戶體驗度非常好，感興趣的朋友一起看看吧2015-10-10
這篇文章主要介紹了詳解Webpack-dev-server的proxy用法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
Three.js獲取鼠標(biāo)點擊的三維坐標(biāo)示例代碼
本篇文章主要介紹了Three.js獲取鼠標(biāo)點擊的三維坐標(biāo)示例代碼。具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-03-03
第一種是使用document.write/writeln(）方式，第二種使用jQuery，第三種是使用原生js方法，感興趣的小伙伴們可以參考一下2018-05-05
這篇文章主要介紹了Bootstrap Table使用整理(二)的相關(guān)資料,需要的朋友可以參考下2017-06-06
這篇文章主要為大家詳細(xì)介紹了js+canvas實現(xiàn)簡單掃雷小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02
event對象的方法 兼容多瀏覽器 同時兼容ie和ff的寫法2009-06-06
JS表單數(shù)據(jù)驗證的正則表達(dá)式(常用)
這篇文章主要介紹了JS表單數(shù)據(jù)驗證的正則表達(dá)式,這種方法比較常用，以及使用正則表達(dá)式驗證表單的方法，本文給大家介紹非常詳細(xì)，需要的的朋友參考下2017-02-02
這篇文章主要介紹了原生js中ajax訪問的實例詳解的相關(guān)資料,希望通過本文大家能夠掌握理解這部分內(nèi)容，需要的朋友可以參考下2017-09-09
JavaScript中的子窗口與父窗口的互相調(diào)用問題
本文給大家介紹了JavaScript中的子窗口與父窗口的互相調(diào)用問題，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-02-02