JS(包含工具)

最新推荐文章于 2024-02-05 13:41:44 发布

口咸耳关

最新推荐文章于 2024-02-05 13:41:44 发布

阅读量362

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_36401256/article/details/118577535

版权

1,js

①ES6讲解

点击查看

②HTTP请求详解

点击查看

2,js工具类

①html2canvas.js 选取元素直接导出图片

注意: 小程序不可用 transform属性无效

id:元素id       num:导出比例        callback:回调函数,传入导出的base64

function canvasEvent(id, num, callback) {
    var copyDom = document.getElementById(id);
    var width = copyDom.offsetWidth;
    var height = copyDom.offsetHeight;
    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');
    var scale = window.devicePixelRatio * num;
    console.log('设备的------' + scale + '----' + width + '----' + height)
    canvas.width = width * scale;
    canvas.height = height * scale;
    canvas.style.width = width * scale + 'px';
    canvas.style.height = height * scale + 'px';
    context.scale(scale, scale);
    //设置context位置，值为相对于视窗的偏移量负值，让图片复位
    var rect = copyDom.getBoundingClientRect();
    //获取元素相对于视察的偏移量
    context.translate(-rect.left, -rect.top);
    html2canvas(copyDom, {
        canvas: canvas,
        useCORS: true,
        scale: scale,
        // allowTaint:true,
    }).then(function (canvas) {
        console.log('canvas----' + canvas)
        console.log('canvas----' + canvas.toDataURL("image/jpeg"))
        callback && callback(canvas.toDataURL("image/jpeg"))
    })
}

⑤echarts图表

Q:绘制的数据图随窗口自适应

A:点击查看解决方法

⑥网页进度条(nprogress.js)

官网
 演示网站
 基本用法

3,其他方法

①url方式打开手机应用商店下载页面

判断当前环境是安卓还是ios

判断设备类型
var u = navigator.userAgent;  
android终端
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;
ios终端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);

安卓(应用宝)

												应用包名
https://a.app.qq.com/o/simple.jsp?pkgname = com.xuwuji.tudingparent

ios

									应用id
itms-apps://itunes.apple.com/app/id1463525094

②百度地图原生的异步加载

普通引入

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>

异步加载

function initialize() {  
  var mp = new BMap.Map('map');  
  mp.centerAndZoom(new BMap.Point(121.491, 31.233), 11);  
} 
function loadScript() {  
  var script = document.createElement("script");  
  script.src = "http://api.map.baidu.com/api?v=2.0&ak=您的密钥&callback=initialize";
  document.body.appendChild(script);  
}  
window.onload = loadScript;

	这里的 initialize 就是异步加载的回调函数,建议设置为 window 的方法,这样在 initialize 方法
	里就可以获取到全局的BMap了

③判断是否是微信浏览器环境

function getIsWxClient () {
    var ua = navigator.userAgent.toLowerCase();
    if (ua.match(/MicroMessenger/i) == "micromessenger") {
        return true;	//是微信环境
    }else{
        return false;	//不是微信环境
    }
};

④前端数据流文件下载三种方式

1,直接使用get请求方式进行下载：

window.open(`${url}?${qs.stringify(param)}`, '_blank')

2,使用form 表单post请求进行下载：

const postDownloadFile = (action, param) => {
  const form = document.createElement('form');
  form.action = action;
  form.method = 'post';
  form.target = 'blank';
  Object.keys(param).forEach((item) => {
      const input = document.createElement('input');
      input.type = 'hidden';
      input.name = item;
      input.value = param[item];
      form.appendChild(input);
  });
  document.body.appendChild(form);
  form.submit();
  document.body.removeChild(form);
}
postDownloadFile(url, param);

3,axios（ajax）前端根据返回数据流生成文件下载：

axios.post(url, param, {responseType: 'blob'}).then((res) => {
  console.log('res', res);
  const blob = res.data;
  const reader = new FileReader();
  reader.readAsDataURL(blob);
  reader.onload = (e) => {
    const a = document.createElement('a');
    a.download = `文件名称.zip`;
    ********// 后端设置的文件名称在res.headers的 "content-disposition": "form-data; 
    ********//name=\"attachment\"; filename=\"20181211191944.zip\"",
    a.href = e.target.result;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  };
}).catch((err) => {
  console.log(err.message);
});

⑤原生js的页面跳转方法

1.window.location.href

// 将js直接写在html中
<button onclick="window.location.href='https://www.baidu.com'">点击跳转</button>
//将js和html分开
<button class="click_btn">点击跳转</button>
<script>
    var myBtn=document.getElementsByClassName('click_btn')[0];
    myBtn.onclick=function(){
        window.location.href="https://www.baidu.com";
    }
</script>
//需要注意的是，这里的window可以省略，即直接使用location.href
<button onclick="location.href='https://www.baidu.com'">点击跳转</button>

2.location.replace

// 将js直接写在html中
<button onclick="location.replace('https://www.baidu.com')">点击跳转</button>
//将js和html分开
<button class="click_btn">点击跳转</button>
<script>
    var myBtn=document.getElementsByClassName('click_btn')[0];
    myBtn.onclick=function(){
        window.location.replace("https://www.baidu.com")
    }
</script>

window.location.href 和 location.replace的区别：

1.有3个页面 a,b,c。如果当前页面是c页面，并且c页面是这样跳转过来的：a->b->c
2.b->c 是通过 window.location.replace("…xx/c") 此时b页面的url会被c页面代替，并且点击后退按
钮时会回退到a页面（最开始的页面）
3.b->c是通过 window.location.href("…xx/c") 此时b页面的路径会被c页面代替，但是点击回按钮后页
面回退的是b页面

3.window.navigate("https://www.baidu")

// 将js直接写在html中
<button onclick="window.navigate('https://www.baidu.com')">点击跳转</button>
//将js和html分开
<button class="click_btn">点击跳转</button>
<script>
    var myBtn=document.getElementsByClassName('click_btn')[0];
        myBtn.onclick=function(){
        window.navigate("https://www.baidu.com")
    }
</script>

window.location.href 和 window.navigate的区别：

1.首先说明的是 window.navigate 与 window.location.href 都是实现页面链接跳转的。
2.window.navigate 这个方法是只针对IE的，不适用于火狐等其他浏览器，在HTML DOM Window Object中
根本没有列出window.navigate这个方法，所以这个方法尽量少用，遗忘最好。
3.window.location.href 兼容所有浏览器的。因此在实现页面跳转的时候还是使用这个比较靠谱。

4.window.open("https://www.baidu.com")

// 将js直接写在html中
<button onclick="window.open('https://www.baidu.com')">点击跳转</button>
//将js和html分开
<button class="click_btn">点击跳转</button>
<script>
    var myBtn=document.getElementsByClassName('click_btn')[0];
        myBtn.onclick=function(){
        window.open("https://www.baidu.com")
    }
</script>

5.self.location 和 top.location(两者的写法实相同的)

// 将js直接写在html中
<button onclick="top.location.href='https://www.baidu.com'">点击跳转</button>
//将js和html分开
<button class="click_btn">点击跳转</button>
<script>
    var myBtn=document.getElementsByClassName('click_btn')[0];
        myBtn.onclick=function(){
            self.location="https://www.baidu.com";
    }
</script>

self.location 和 top.location 的区别和作用：

1.两者可以结合起来，防止非法引用我们的网页
2.假如你的网页地址是:http://www.a.com，别人的网址是http://www.b.com。他在他的页面用iframe等
框架引用你的http://www.a.com
3.那么你可以用一下代码，来转向你的页面

if(top.location.href!=self.location.href){
	location.href="http://www.a.com";
}

⑥网页内容复制copy

function () {
	var text = '文本内容'
	var tag = document.createElement('input');
	tag.setAttribute('id', 'copy_content');
	tag.value = text;
	document.getElementsByTagName('body')[0].appendChild(tag);
	document.getElementById('copy_content').select();
	document.execCommand('copy');
	document.getElementById('copy_content').remove();
	alert('成功')
}

口咸耳关

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS(包含工具)

1,js①ES6讲解点击查看②HTTP请求详解点击查看2,js工具类①html2canvas.js 选取元素直接导出图片注意: 小程序不可用 transform属性无效id:元素id num:导出比例 callback:回调函数,传入导出的base64function canvasEvent(id, num, callback) { var copyDom = document.getElementById(id); var width =
复制链接

扫一扫