javascript
关注
分享
扫一扫
文章平均质量分 59
qq_24581629
xx
展开
-
url参数解析与拼接
1.参数解析// 返回url的参数对象export function getUrlParseQuery (url) { if (url) { // 字符串截取 url = url.substr(url.indexOf('?') + 1) } // 创建一个对象，用于存name，和value const result = {} // location.search设置或返回从问号 (?) 开始的 URL（查询部分） const queryString = url |原创 2020-08-29 17:57:02 · 1089 阅读 · 0 评论 -
vue实现页面间的跳转动画
1、监听路由变化2种方式监听页面切换// 方式1（引入第三方库vue-navigation）this.$navigation.on('forward', (to, from) => { // 动画类 this.transitionName = 'slide-left'})this.$navigation.on('back', (to, from) => { this.transitionName = 'slide-right'})// 方式2（路由对象route上加原创 2020-08-29 12:03:12 · 1091 阅读 · 0 评论 -
web端实现图片下载
1、需求场景很多时候，前端需要将二维码和背景图片组合，然后生成一张海报，供用户下载分享2、功能实现使用canvas绘制海报调用canvas的toDataURL()方法，生成base64编码上传到图片服务器（移动端直接下载base64会报错）实现下载 // 使用a标签方式下载 const dlLink = document.createElement('a') dlLink.download = 'fileName' // 图片的url后面，必须加上后缀，否则会直接打开图片，不是下载图原创 2020-08-28 10:50:59 · 1044 阅读 · 0 评论 -
解决 div或者a标签的高度比里面的img高度多了5px 问题
a元素或者div元素下有一个匿名文本，这个文本外有一个匿名行级盒子，它有的默认vertical-align是baseline的，而且往往因为上文line-height的影响，使它有个line-height，从而使其有了高度，因为baseline对齐的原因，这个匿名盒子就会下沉，往下撑开一些距离，所以把a撑高了。解决办法一是消除掉匿名盒子的高度，也就是给a设置line-height:0或font-s转载 2017-09-27 18:07:42 · 1591 阅读 · 0 评论 -
svg animate实现加载中的动画
<svg viewBox="0 0 64 64" style="width: 40px; height: 40px"> <g stroke-width="0"> <circle cx="24" cy="0" transform="translate(32,32)" r="7.48463"> <animate attributeName="r" dur=转载 2017-12-12 10:15:27 · 1420 阅读 · 0 评论 -
JS判断ios系统的版本号
<html> <meta charset="UTF-8"/><body><script type="text/javascript"> var str= navigator.userAgent.toLowerCase(); var ver=str.match(/cpu iphone os (.*?) like mac os/); if(!ver){转载 2017-12-22 18:30:24 · 9755 阅读 · 0 评论 -
javascript浅拷贝与深拷贝
比如，现在有一个对象，叫做”中国人”。var Chinese = { nation:'中国' };还有一个对象，叫做”医生”。 var Doctor ={ career:'医生' }浅拷贝 把父对象的属性，全部拷贝给子对象。function extendCopy(p) { var c = {}; for (var i in原创 2017-05-09 17:42:58 · 258 阅读 · 0 评论 -
textarea实现高度自适应
文本框textarea根据输入内容自适应高度 javascript代码/** * 文本框根据输入内容自适应高度 * @param {HTMLElement} 输入框元素 * @param {Number} 设置光标与输入框保持的距离(默认0) * @param转载 2018-03-05 14:07:45 · 348 阅读 · 0 评论 -
JavaScript UTC时间转换
UTC：协调世界时，又称世界统一时间、世界标准时间、国际协调时间。格林尼治标准时（GMT）格林尼治标准时间（Greenwich Mean Time，GMT）是指位于伦敦郊区的皇家格林尼治天文台的标准时间，因为本初子午线被定义在通过那里的经线。 理论上来说，格林尼治标准时间的正午是指当太阳横穿格林尼治子午线时的时间。由于地球在它的椭圆轨道里的运动速度不均匀，这个时刻可能和实际的太阳时相差16分...转载 2019-05-17 14:48:48 · 3561 阅读 · 0 评论 -
一张图理解prototype、proto和constructor的三角关系
前面的话 javascript里的关系又多又乱。作用域链是一种单向的链式关系，还算简单清晰；this机制的调用关系，稍微有些复杂；而关于原型，则是prototype、proto和constructor的三角关系。本文先用一张图开宗明义，然后详细解释原型的三角关系 图示概念上图中的复杂关系，实际上来源就两行代码function Foo(){};var f1 = new Foo();【构造函数转载 2017-09-11 15:35:48 · 242 阅读 · 0 评论 -
判断变量的类型（typeof、instanceof、Object.prototype.toString）
1、typeof 返回一个变量的基本类型，用来检测值类型的数据类型，只有以下几种：number,boolean,string,object,undefined,functionalert(typeof 1) //numberalert(typeof "1") //stringalert(typeof []) //objectalert(typeof null) //objectalert转载 2017-09-06 14:23:34 · 5848 阅读 · 0 评论 -
Javascript异步编程的4种方法
你可能知道，Javascript语言的执行环境是”单线程”（single thread）。所谓”单线程”，就是指一次只能完成一件任务。如果有多个任务，就必须排队，前面一个任务完成，再执行后面一个任务，以此类推。这种模式的好处是实现起来比较简单，执行环境相对单纯；坏处是只要有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行。常见的浏览器无响应（假死），往往就是因为某一段Javascri转载 2017-04-13 11:17:52 · 261 阅读 · 0 评论 -
jQuery的deferred对象详解
jQuery的开发速度很快，几乎每半年一个大版本，每两个月一个小版本。 每个版本都会引入一些新功能。今天我想介绍的，就是从jQuery 1.5.0版本开始引入的一个新功能—-deferred对象。这个功能很重要，未来将成为jQuery的核心方法，它彻底改变了如何在jQuery中使用ajax。为了实现它，jQuery的全部ajax代码都被改写了。但是，它比较抽象，初学者很难掌握，网上的教程也不多。所转载 2017-04-13 12:43:26 · 280 阅读 · 0 评论 -
用CSS开启硬件加速
判断是运行在pc端，还是移动端(目前没有区分pad，pad环境下该值为true)const ua = navigator.userAgent;const isMobile = !!ua.match(/mobile/i) || 'orientation' in win; support3D：是否支持css硬件加速 supportHairline：是否支持0.5px的细线 suppo转载 2017-04-10 16:31:57 · 523 阅读 · 0 评论 -
document.documentElement和document.body的区别,以及网页中获取滚动条卷去部分的高度
网页中获取滚动条卷去部分的高度，可以通过 document.body.scrollTop 来获取，比如使div跟着滚动条滚动：//html<div id="div" style="width:100px;height:100px;background:#ccc;position:absolute;"></div>//jswindow.onscroll = function() { va转载 2017-05-19 16:48:44 · 2204 阅读 · 1 评论 -
javascript对象原型
实际上，虽然JavaScript 的对象最初都是由Object.prototype 对象克隆而来的，但对象构造器的原型并不仅限于Object.prototype 上，而是可以动态指向其他对象。 这样一来，当对象a 需要借用对象b 的能力时，可以有选择性地把对象a 的构造器的原型指向对象b，从而达到继承的效果。下面的代码是我们最常用的原型继承方式：var obj = { name: 'sven' }转载 2017-06-20 20:01:53 · 208 阅读 · 0 评论 -
call和apply
call 和applyECAMScript 3给Function 的原型定义了两个方法，它们是Function.prototype.call 和Function.prototype.apply。在实际开发中，特别是在一些函数式风格的代码编写中，call 和apply 方法尤为有用。在JavaScript 版本的设计模式中，这两个方法的应用也非常广泛，能熟练运用这两个方法，是我们真正成为一名JavaS转载 2017-06-15 16:14:50 · 191 阅读 · 0 评论 -
点击其他区域,input输入框不失去焦点
首先监听 document 的 mousedown 事件，然后判断触发 mousedown 事件的目标元素是不是你不想让input失去焦点的那个元素，是的话就阻止默认事件。 代码如下：<!DOCTYPE html><html><head><meta charset="utf-8"><title>input输入框</title><script> document.addEventL原创 2017-07-15 18:19:03 · 16808 阅读 · 1 评论 -
获取元素的宽和高
1、获取窗口的文档显示区的宽度和高度。//包含滚动条window.innerHeightwindow.innerWidth//不包含滚动条document.documentElement.clientHeightdocument.documentElement.clientWidth2、获取document的宽度和高度//name: width/heightfunction getWid原创 2017-07-26 17:35:41 · 977 阅读 · 0 评论 -
Array 的五种迭代方法 -----every() /filter() /forEach() /map() /some()
ES5定义了五个迭代方法，每个方法都接收两个参数：要在每一项上运行的函数和运行该函数的作用域对象（可选的），作用域对象将影响this的值。传入这些方法中的函数会接收三个参数：数组的项的值、该项在数组中的位置和数组对象本身。1.every() 和 some()every()是对数组中的每一项运行给定函数，如果该函数对每一项都返回true，则返回true。some()是对数组中的每一项运行给定函数，如果转载 2017-08-18 14:07:44 · 462 阅读 · 0 评论