
前端——JavaScript
哈哈hyc
这个作者很懒,什么都没留下…
展开
-
post方式返回文件流实现前端blob下载,responseType: ‘blob‘无效
一般情况下,下载分为好几种,但是常用的是get下载文件流直接下载post下载文件流是很少见的,但是鉴于参数太多,不能走get 只能走post下载,post下载分为两种:1.form表单下载2.post返回文件流转成blob下载,研究了很久 也很坑,上代码:这个地方如果responseType设为blob的话,返回的文件流将会被转成blob对象,不是文件流,但是无论怎么设置都没有转成blob对象,网上有很多解释,一个是说封装好的axios设置responseType是无效的,于是乎,我就引入了原生axios,原创 2022-07-12 16:23:25 · 4285 阅读 · 1 评论 -
Do not access Object.prototype method ‘hasOwnProperty‘ from target object
今天用对象的属性hasOwnProperty,去判断对象是否包含该值,我这里主要判断对象是否为空,出现了以上错误,之前也遇到过类似的错误,如parseInt(‘24.5’),必须要给转换的进制类型,改为parseInt(‘24.5’,10)则正常通过上述文字提示发现,不要从目标对象访问 Object 原型方法”,想到一种解决方案——直接找到这个方法,用 call 改变指向调用:Object.prototype.hasOwnProperty.call(obj, 'key')在ECMAScript.原创 2021-08-13 17:07:23 · 654 阅读 · 0 评论 -
关于Vue不能监听(watch)数组变化
一、vue监听数组vue实际上可以监听数组变化,比如data () { return { watchArr: [], };},watchArr (newVal) { console.log('监听:' + newVal);},created () { setTimeout(() => { this.watchArr = [1, 2, 3]; }, 1000);},在比如使用splice(0,2,3)从数组下标0删除两个元素,并在下标0插入一个元原创 2021-02-24 19:11:57 · 2306 阅读 · 1 评论 -
Vue 实现复制功能,不需要任何结构内容直接复制方式
介绍:在做复制文档功能时,考虑到是个不太会复用的小功能,最后选择直接用 document.execCommand 方法实现。在查阅资料时候,发现其他人都需要在页面上写上结构、ID。然后捕捉某个ID获取内容,感觉很不方便。使用:methods: { copyShaneUrl(shareLink){ var input = document.createElement("input"); // 直接构建input input.value = shareLink; //原创 2020-09-28 15:38:04 · 784 阅读 · 0 评论 -
div在body中可以任意拖动
HTML代码<div id="idOuterDiv" class="CsOuterDiv"> </div>CSS代码body { background-color:#232429;}.CsOuterDiv { width:256px; height:146px; background-color:white; position:absolute; top:50%; left:50%; tra.原创 2020-09-07 17:10:11 · 253 阅读 · 0 评论 -
js 实现 list转换成tree的方法示例(数组到树)
目标:JS 将有父子关系的平行数组转换成树形数据方法:双重遍历,一次遍历parentId,一次遍历id == parendId;该方法应该能很容易被想到,实现起来也一步一步可以摸索出来;const oldData = [{id:1,name:'boss',parentId:0},{id:2,name:'lily',parentId:1},{id:3,name:'jack',parentId:1},{id:4,name:'john',parentId:2},...原创 2020-07-30 15:42:07 · 3077 阅读 · 0 评论 -
vue中按钮防止暴力点击,多次提交数据的问题,组件通用化封装
方法1:用计时器改变按钮可点击状态<template> <div class="test"> <button @click="btnClick">button</button> </div></template><script> export default { name: 'HelloWorld', data() { return { is_...原创 2020-07-18 10:36:22 · 1116 阅读 · 0 评论 -
在vue中阻止click事件冒泡,防止触发冒泡另一个事件
使用vue阻止子级元素的click事件冒泡,很简单,用stop<div @click="test1()"> <span @click.stop="test2()">按钮1</span> <span>按钮2</span></div>这样点击div里面的按钮1,就不会触发div绑定时间test1()方法...原创 2020-07-01 10:45:07 · 3354 阅读 · 0 评论 -
网站前端如何实现HTML转PDF下载的两种方式
将HTML页面转化为PDF下载是前端经常会遇到的需求,下面就列举两种方式进行实现。以下两种方式默认都是在Vue项目环境下,其他框架项目自行灵活运用。方式一:使用html2canvas和jspdf插件实现该方式是通过html2canvas将HTML页面转换成图片,然后再通过jspdf将图片的base64生成为pdf文件。实现步骤如下:1,下载插件模块npm install html2canvas jspdf --save2,定义功能实现方法在项目工具方法存放文件夹utils中创.原创 2020-06-11 19:25:56 · 1419 阅读 · 1 评论 -
JavaScript中将iso8859-1的字符转换成中文
var str = “ç\u0088±æ\u0088\u0091ä¸\u00ADå\u009B½”;var utfstring =decodeURI(escape(str))是用escape把iso8859-1的字符进行编码,然后再调用decodeURI按照utf8的方式进行解码。当然上面的编码会把符号也会转义,这个时候只需按照下面的改下就可以了var str = “ç\u0088±æ\u0088\u0091ä¸\u00ADå\u009B½”;var utfstring =decode.原创 2020-05-15 09:07:27 · 5073 阅读 · 2 评论 -
网页设计js 判断数据是否为空
// var a = "";// var a = " ";// var a = null;// var a = undefined;// var a = [];// var a = {};// var a = NaN; if(a === undefined) { // 只能用 === 运算来测试某个值是否是未定义的 ...原创 2020-04-21 13:52:01 · 425 阅读 · 0 评论 -
安卓、ios时间转换成时间戳的形式
将日期转换成时间戳的形式,在安卓和ios不同的系统下转正会有兼容性的问题安卓系统下Date.parse(new Date('2018-03-30 12:00:00'))会直接转换成时间戳的形式(简单说就是整数形式)ios系统下Date.parse(new Date('2018-03-30 12:00:00'))sorry,转换不了解决方法ios系统下使用Date.parse...原创 2020-03-25 09:21:20 · 337 阅读 · 0 评论 -
filter函数(JS)
filter函数filter也是一个常用的操作,它用于把Array的某些元素过滤掉,然后返回剩下的元素。和map()类似,Array的filter()也接收一个函数。和map()不同的是,filter()把传入的函数依次作用于每个元素,然后根据返回值是true还是false决定保留还是丢弃该元素。例如,在一个Array中,删掉偶数,只保留奇数,可以这么写:var arr = ...原创 2020-01-10 17:12:06 · 4637 阅读 · 0 评论 -
input 输入框 只能输入数字、字母、汉字等
<!-- 1.文本框只能输入数字代码(小数点也不能输入) --><input onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"><br><br><!-- 2.只能输入数字,能输小...原创 2019-05-22 19:10:29 · 2880 阅读 · 0 评论 -
es7中Async/await学习
Async/await有一种特殊的语法可以更舒适地与promise协同工作,它叫做async/await,它是非常的容易理解和使用。Async functions让我们先从async关键字说起,它被放置在一个函数前面。就像下面这样:async function f() { return 1}函数前面的async一词意味着一个简单的事情:这个函数总是返回一个promi...翻译 2019-05-05 10:40:05 · 306 阅读 · 1 评论 -
js中=,==,===的区别和使用
js中== 是赋值的意思,让左边的值等于右边的值==== 是判断等于的意思,返回值是一个布尔值,它只判断值是否相等,不判断类型是否一样====== 也是判断等于的意思,返回值也是一个布尔值,但是它不仅仅判断值是否相等,还判断类型是否相等java中java中只有=和==还有equals=是赋值的意思,同js==基本数据类型比较的是数值是否相等引用类型比较是不是同一个对象,...原创 2019-03-26 18:24:19 · 260 阅读 · 0 评论 -
js判断电脑是windows系统还是mac系统
js判断是win系统还是mac系统代码//判断系统类型function OSnow(){ var agent = navigator.userAgent.toLowerCase(); var isMac = /macintosh|mac os x/i.test(navigator.userAgent); if (agent.indexOf("win32") >...原创 2019-03-04 17:14:33 · 7516 阅读 · 0 评论 -
JavaScript 正则表达式表单验证简单实例
大家在前端开发过程中总会遇到一些表单,难免会碰到一些正则表达式,以下为一些简单表单实例的正则表达式,仅供参考,具体可以自行修改:/*是否带有小数*/function isDecimal(strValue ) { var objRegExp= /^\d+\.\d+$/; return objRegExp.test(strValue); } /*校验是否中...原创 2018-07-30 16:39:39 · 539 阅读 · 0 评论 -
前端面试——JavaScript 严格模式(use strict)
使用 "use strict" 指令"use strict" 指令在 JavaScript 1.8.5 (ECMAScript5) 中新增。它不是一条语句,但是是一个字面量表达式,在 JavaScript 旧版本中会被忽略。"use strict" 的目的是指定代码在严格条件下执行。严格模式下你不能使用未声明的变量。 为什么使用严格模式:消除Javascript语法的一...原创 2018-07-30 17:42:30 · 820 阅读 · 0 评论 -
前端面试——JavaScript中this的作用
<span class="marked">this <span>是 JavaScript 语言的一个关键字。它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用。比如:function test() { this.x = 1; }随着函数使用场合的不同,this 的值会发生变化。但是有一个总的原则,那就是this指的是,调用函数的那个对象。...原创 2018-07-31 13:47:31 · 887 阅读 · 0 评论 -
前端面试——JS去除首尾空格代码
关于 JavaScript 里的 trim()/strip() 方法 在其他语言中常常用 trim()/strip() 方法脱去不必要的空格等元素。JavaScript 本身并不提供 trim() 方法,不过可以用正则表达式,通过给 String 对象增加 trim 方法的方式实现。如下:if(typeof(String.prototype.trim) === "undefined"...原创 2018-07-31 17:38:17 · 8015 阅读 · 1 评论 -
前端面试——JavaScript的BOM和DOM有什么区别?
这是浏览器运行时中的两个不同的概念。1、BOM 浏览器对象模型Browser Object Model(浏览器对象模型),提供了独立于内容而与浏览器窗口进行交互的对象。描述了与浏览器进行交互的方法和接口,可以对浏览器窗口进行访问和操作,譬如可以弹出新的窗口,改变状态栏中的文本,对Cookie的支持,IE还扩展了BOM,加入了ActiveXObject类,可以通过js脚本实例化ActiveX...原创 2018-08-01 14:23:13 · 2395 阅读 · 0 评论 -
Swiper运用在苹果移动端的变暗bug修复
有时候我们在手机端制作全屏滑动的时候可以用到swiper这个插件,插件好用是好用,但是有的时候就会出现一些小bug,比如运用swipper之后苹果手机打开点击或者长按的时候就会变暗,这个时候我们需要用到一些属性控制他就可以使他不会变暗了,一下为css控制的代码:* { outline: none; webkit-focus-ring-color: rgba(0, 0, 0, ...原创 2018-09-30 11:18:15 · 1116 阅读 · 1 评论 -
移动swiper中动画卡顿,通过requestAnimationFrame写向下的动画
当手机网页使用swiper的时候,在css中写入动画的时候有些时候浏览页面会进行卡顿,这个时候你就需要手写动画了,以下为参考的一些的案例,大家可以用来参考setT(); var dataSet = 0, dataStop = 0.35, dataSetT = 7; function setT(){ $(".jiantou").css({"margin-bot...原创 2018-11-16 09:55:58 · 2694 阅读 · 0 评论 -
页面解除复制选中 脚本
由于js执行顺序从上至下,页面加载完后,js已经执行完毕,所以不能在页面中编辑js脚本。选择谷歌浏览器console中运行如下脚本谷歌的console在当前页面下按住F12调出即可。<script language="javascript" type="text/javascript">document.oncontextmenu=new Function('event.ret...原创 2018-12-10 10:22:22 · 1270 阅读 · 0 评论 -
JS中闭包的介绍
闭包的概念闭包就是能够读取其他函数内部变量的函数。一、变量的作用域要理解闭包,首先必须理解Javascript特殊的变量作用域。变量的作用域无非就是两种:全局变量和局部变量。Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量。Js代码 var n=999;function f1(){ alert(n);}f1(); // 999...原创 2018-12-29 14:56:08 · 250 阅读 · 0 评论 -
前端开发注意事项个人参考
一、html页面结构1、标签尽量使用语义化标签,使人一目了然,下面是一些常见的语义化标签<header></header>:通常包括网站标志、主导航、全站链接以及搜索框。<nav></nav>:标记导航,一般用于主要的导航栏<main></main>:页面主要内容 <article>&l原创 2018-12-30 19:18:44 · 1155 阅读 · 0 评论 -
使用 postMessage 解决 iframe 跨域通信问题
这周碰到一个让人头疼的需求:要在我的web项目中嵌入另一个第三方web项目。第一时间想到的就是用iframe了,但问题来了,我和第三方web项目是有交互的,这就违反同源策略了,处理跨域问题是最让人头疼的事之一。需求是这样的,在我的页面点击一些按钮,要实时反馈到iframe子页面,子页面再进行响应。当时脑子里第一时间想到的解决方案是:用NGINX把两个项目代理到同一域名下。但这样似乎有点小题...原创 2019-01-17 10:14:07 · 2942 阅读 · 0 评论 -
遍历json实现简单模糊查询
有的时候前端页面静态的,数据用的是json,但是实现搜索的时候就需要进行简单的搜索功能的制作了,一下代码是个人写出的遍历json实现查询功能的代码,仅供参考://遍历json实现模糊查询 function indexSelect(index){ if(index=="" || index==null ){ json = eval(json); ...原创 2019-01-17 10:22:33 · 4598 阅读 · 3 评论 -
JavaScript 获取 Url 上的参数(QueryString)值
获取URL里面传的参数,在Js中不能像后台一样使用Request.QueryString来获取URL里面参数,下面介绍两种方式用来获取参数方式一:使用split分隔来获取,这种方法考试了地址中包含了returnUrl参数的形式,如果地址中本来就包含了另外一个网址,这个时候需要先过滤掉这个网址再去获取参数值,这里只考试另一个网址是最后一个参数的模式function getParam(par...原创 2019-01-25 11:46:31 · 475 阅读 · 0 评论 -
前端面试——JavaScript中undefined 和 null 区别
大家在面试前端的时候经常会问到这个问题,之前虽然也知道这两个之间的区别,但是让我描述的话,感觉上还是说的不是很清楚。今天也详细看了一次这个知识点,现在来说说这两者间的区别。 null:在 JavaScript 中 null 表示 "什么都没有"。null是一个只有一个值的特殊类型。表示一个空对象引用。 undefined:在 JavaScript 中, undefine...原创 2018-07-30 13:59:50 · 3922 阅读 · 0 评论