搜尋
首頁web前端js教程js HTML5 Ajax實作檔案上傳進度條功能_javascript技巧

本文实例介绍了js结合HTML5 Ajax实现文件上传进度条功能,分享给大家供大家参考,具体内容如下

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 标签取对象
   Tag:function(obj, Tagname) 
   {
    return obj.getElementsByTagName(Tagname);
   },
   //-- 通过Name 来取对象
   Name:function (Name) 
   {
     return document.getElementsByName(Name);
   },
   //-- Url编码转换
   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 跳转
  url:function(URL) 
  {
    window.location.href = URL;
  },
  //-- 页面刷新
  reload:function() 
  {
    window.location.reload();
  },
  //-- 动态设置 标签内容 @ obj 为标签内容,text 为内容
  html:function (obj, text) 
  {
     obj.innerHTML = text;
  }
}
var string = {
  //-- 将字符转换成Json
  toJson:function(str) 
  {
    return eval('('+str+')');
  },
  //-- 不区分大小写判断 相等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:'内蒙古',
 
        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 = '请填写你的身份证';
        return false;
      } 
       
      if (null == card_area[parseInt(sId.substr(0,2))]) {
        error = '非法证件你的地区填写有错误请仔细填写';
        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 = '非法证件你的生日填写有错误请仔细填写';
        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 = '非法证号你确认你是地球人请认真填写哦~~~~'; 
        return false;
 
      }
       
      if (sId.length>19){
        error = '你确认你的身份证是有效证件?';
        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;
  },
  //-- 变量是否是小数,返回 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) &#63; json : string.toJson(json);
    var dataType = string.eqlower(json.dataType,'json') &#63; 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为单位进行文件切割
        shardSize = 1024 * 1024 << 1;      
        //--总片数
        shardCount = Math.ceil(fileSize / shardSize); 
        for(var i = 0; i < shardCount; ++i)
        {
          //--计算每一片的起始与结束位置
          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); //总片数
          formData.append("index", i + 1);    //当前是第几片
          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;
            }
          }
        }
      }
    }
     
  },
  //-- 获得上传文件的进度值
  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数据提交类
var Call = {
    /**
     * 参数为json对象|Json字符串, 
     * @type post|get 默认为get ,请求方式
     * @url String 字符串型 ,请求地址
     * @loading bool true|false 是否开启动画
     * @time int 动画时间 如果 loading 为false 则不用设置这个参数
     * @data Json | String 提交的数据
     * @sucess 回调函数 这个必须有  
     */
    Ajax:function(json){
      var json = is.object(json)&#63;json:string.toJson(json);
      var type = (json.type == undefined) || (json.type == '') &#63; 'get' : json.type; ;
      var url = (json.url == undefined) || (json.url == '') &#63; alert('请求url不能为空') : json.url;
      var loading = (json.Loading == undefined) || (json.Loading == '') &#63; false : json.Loading;    
      var time = (json.time == undefined) || (json.time == '') &#63; 2000 : json.time;  
      var dataType = string.eqlower(json.dataType,'json') &#63; '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 ='&#63;' + data.substring(0, data.length-1);
        }
      }else{
        if(json.data.length>=1) {
          data = json.data.indexOf('&#63;') < 0 &#63; '&#63;'+json.data:json.data+'';
        }
      }
      try {
        //--IE高版本创建XMLHTTP
        XMLHttpReq = new ActiveXObject('Msxml2.XMLHTTP');
      }
      catch(E) { 
        try { 
          XMLHttpReq = new ActiveXObject('Microsoft.XMLHTTP');//IE低版本创建XMLHTTP 
        } 
        catch(E) { 
          XMLHttpReq = new XMLHttpRequest();//兼容非IE浏览器,直接创建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 = {
  //--动态添加Dom节点
  Dom:function (obj,dom) {
    var dom = document.createElement(dom);
    get.Id(obj).appendChild(dom);
    return dom;
  },
  //-- 动态添加属性
  Attr:function(obj,key,value){
    obj.setAttribute(key, value);
    return obj;
  }
}
//--URL编码
function url(Str){
  return decodeURI(Str);
}
/**
 * 模板字符串,语法标签采用<js></js> 
 * 完全遵循javascript原生语法
 * @param template
 * @param vars
 * @returns {Function}
 */
function js_template(template, vars) {
   
  //唯一分隔标志字符串
  var split = '_{' + Math.random() + '}_';
 
  //消除换行符
  var estr = template.replace(/\n|\r|\t/g, '');
 
  var js = [];
  /****
   * 匹配标签<js> ...</js>--并且替换为特定的分隔串,
   * 并将匹配的js代码放入js数组中备用
   * */
  estr = estr.replace(/<js>(.*&#63;)<\/js>/g, function ($0, $1) {
    js.push($1);
    return split;
  });
 
  /*根据特定的分隔串分隔得到普通text文本串的数组*/
  var text = estr.split(split);
  estr = " var output='';";
  /****
   * 0101010---0为text[]元素,1为js[]元素
   * 重新串起来连接为可执行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 href='http://fonts.useso.com/css&#63;family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' 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;'>内页广告</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>文件上传进度:</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 lazy"  src="/static/imghwm/default1.png"  data-src="__SOURCE__/js/jquery-1.11.1.min.js"  id ='thmb' alt="js HTML5 Ajax實作檔案上傳進度條功能_javascript技巧" >
                <div>
                  <ul style='display:none;'>
                    <li><span>文件大小:</span><p>22222kb</p></li>
                    <li><span>文件路径:</span><p>22222kb</p></li>
                    <li><span>图片高度:</span><p>22222kb</p></li>
                    <li><span>图片宽度:</span><p>22222kb</p></li>
                  </ul>
                </div>
              </div>
            </div>            
          </div>
        </div>
                   
    </div>  <!--/.main-->
  </div>
               
  <script></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) { //--上传中的进度回掉函数
          get.Id('progress').value = file.getProgress(ev);
          //获得上传进度用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
        //--上传完成后,后台返回的回调函数
        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)}&#63;act=add', //请求地址
        data:data,  //发送的数据 
        dataType:'json', //Ajax返回的数据类型 ,可以是String
        success:function (e) { //回调函数
          set.url(e.url);  
        }
      });
    }
  </script>
</body>
</html>

希望本文所述对大家学习javascript程序设计有所帮助。

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
如何使用JS和百度地图实现地图平移功能如何使用JS和百度地图实现地图平移功能Nov 21, 2023 am 10:00 AM

如何使用JS和百度地图实现地图平移功能百度地图是一款广泛使用的地图服务平台,在Web开发中经常用于展示地理信息、定位等功能。本文将介绍如何使用JS和百度地图API实现地图平移功能,并提供具体的代码示例。一、准备工作使用百度地图API前,首先需要在百度地图开放平台(http://lbsyun.baidu.com/)上申请一个开发者账号,并创建一个应用。创建完成

js字符串转数组js字符串转数组Aug 03, 2023 pm 01:34 PM

js字符串转数组的方法:1、使用“split()”方法,可以根据指定的分隔符将字符串分割成数组元素;2、使用“Array.from()”方法,可以将可迭代对象或类数组对象转换成真正的数组;3、使用for循环遍历,将每个字符依次添加到数组中;4、使用“Array.split()”方法,通过调用“Array.prototype.forEach()”将一个字符串拆分成数组的快捷方式。

如何使用JS和百度地图实现地图热力图功能如何使用JS和百度地图实现地图热力图功能Nov 21, 2023 am 09:33 AM

如何使用JS和百度地图实现地图热力图功能简介:随着互联网和移动设备的迅速发展,地图成为了一种普遍的应用场景。而热力图作为一种可视化的展示方式,能够帮助我们更直观地了解数据的分布情况。本文将介绍如何使用JS和百度地图API来实现地图热力图的功能,并提供具体的代码示例。准备工作:在开始之前,你需要准备以下事项:一个百度开发者账号,并创建一个应用,获取到相应的AP

如何使用JS和百度地图实现地图多边形绘制功能如何使用JS和百度地图实现地图多边形绘制功能Nov 21, 2023 am 10:53 AM

如何使用JS和百度地图实现地图多边形绘制功能在现代网页开发中,地图应用已经成为常见的功能之一。而地图上绘制多边形,可以帮助我们将特定区域进行标记,方便用户进行查看和分析。本文将介绍如何使用JS和百度地图API实现地图多边形绘制功能,并提供具体的代码示例。首先,我们需要引入百度地图API。可以利用以下代码在HTML文件中导入百度地图API的JavaScript

js中new操作符做了哪些事情js中new操作符做了哪些事情Nov 13, 2023 pm 04:05 PM

js中new操作符做了:1、创建一个空对象,这个新对象将成为函数的实例;2、将新对象的原型链接到构造函数的原型对象,这样新对象就可以访问构造函数原型对象中定义的属性和方法;3、将构造函数的作用域赋给新对象,这样新对象就可以通过this关键字来引用构造函数中的属性和方法;4、执行构造函数中的代码,构造函数中的代码将用于初始化新对象的属性和方法;5、如果构造函数中没有返回等等。

用JavaScript模拟实现打字小游戏!用JavaScript模拟实现打字小游戏!Aug 07, 2022 am 10:34 AM

这篇文章主要为大家详细介绍了js实现打字小游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。

php可以读js内部的数组吗php可以读js内部的数组吗Jul 12, 2023 pm 03:41 PM

php在特定情况下可以读js内部的数组。其方法是:1、在JavaScript中,创建一个包含需要传递给PHP的数组的变量;2、使用Ajax技术将该数组发送给PHP脚本。可以使用原生的JavaScript代码或者使用基于Ajax的JavaScript库如jQuery等;3、在PHP脚本中,接收传递过来的数组数据,并进行相应的处理即可。

js是什么编程语言?js是什么编程语言?May 05, 2019 am 10:22 AM

js全称JavaScript,是一种具有函数优先的轻量级,直译式、解释型或即时编译型的高级编程语言,是一种属于网络的高级脚本语言;JavaScript基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式和声明式,如函数式编程。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
3 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

VSCode Windows 64位元 下載

VSCode Windows 64位元 下載

微軟推出的免費、功能強大的一款IDE編輯器

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

mPDF

mPDF

mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)