js
程序me
这个作者很懒,什么都没留下…
展开
-
H5 直播的疯狂点赞动画是如何实现的?(附完整源码)
直播有一个很重要的互动:点赞。为了烘托直播间的氛围,直播相对于普通视频或者文本内容,点赞通常有两个特殊需求:点赞动作无限次,引导用户疯狂点赞直播间的所有疯狂点赞,都需要在所有用户界面都动画展现出来我们先来看效果图:从效果图上我们还看到有几点重要信息:点赞动画图片大小不一,运动轨迹也是随机的点赞动画图片都是先放大再匀速运动。快到顶部的时候,是渐渐消失。收到大量的点赞请求的时...原创 2020-04-13 23:14:45 · 2738 阅读 · 0 评论 -
别高估自己,这道题,有点难!
今天在一个技术群里面,有朋友丢了一道题目,问这个输出是啥?粗略一看,输出都是 21 啊,你以为加个 if(true),大伙就不知道了?然后,就没有然后了…………“光荣”的答错了!正确答案:内部是 21,外部是 1;这个玄妙之处确实就在这个块级作用域 if 里面。假如我们去掉 if 看题。var a = 0;// if(true){ a = 1;function a(){}a...原创 2020-04-13 23:09:28 · 488 阅读 · 1 评论 -
深度揭秘 Promise 微任务和执行过程
本文一步一步深入解读 Promise 的注册和执行过程,读懂这几段代码,Promise 的注册和执行过程都将所向披靡,不再话下~~~~。你就是 Promise 大神!~~。当然了,就没人能误导你了~前言本文已代码解读的方式来学习整个过程。这里提供了四段代码,如果你都能理解清楚,正确的说出output过程,那么厉害大牛如你,Promise 的执行过程了如指掌。好多大牛已经熟悉了,当然了,并不是...原创 2019-10-21 13:49:12 · 4118 阅读 · 4 评论 -
try catch捕捉异常分析
try catch捕捉异常ry cath里面定义function,执行function在try catch面,可以捕捉到try{ function d(){a.b;} d();}catch(e){console.log("error",e);}error ReferenceError: a is not defined at d (<anonymous...原创 2019-04-22 13:07:52 · 2240 阅读 · 0 评论 -
js逗号运算符
1、先看一例var a=1,b=2,c=3;function test(){ return a++,++b,c++;}执行test(),返回c 即返回c的值最终a==2,b==3,c==4表达式1,表达式2,表达式3……表达式n 依次执行表达式1,2,3,最终返回执行n之后的结果2、再看一例var age=10;var obj={ age:20...原创 2019-04-24 18:39:43 · 545 阅读 · 0 评论 -
小程序和H5瀑布流的实现
瀑布流:左右两列高度不一样的数据。像瀑布一样往下排列。瀑布流和普通列表还是有点不一样,会碰到三点问题:1、怎么处理页面图片闪烁的问题。 加载页面的时候,刚看到文字在这个文字,然后有被挤下去了,图片刚没有,加载完有显示出来了。2、怎么平衡左右两列的高度差的问题。 左右两列是渲染数据,但是可能左边刚好很多都是图片比较高的数据,右边都是矮的图片,那么滚动翻页的...原创 2019-05-08 19:10:16 · 3895 阅读 · 0 评论 -
js判断当前页面是否活动页面
在开发中,希望当前页面如果不是活动页面,即用户切换了tab页,或者用户把浏览器缩小隐藏了这个时候,我们希望页面暂停,比如游戏暂停,视频停止播放等。那怎么做呢?1、使用document.hidden来判定是否隐藏var hidden, state, visibilityChange;if (typeof document.hidden !== "undefined") { h...原创 2019-05-23 22:03:37 · 4909 阅读 · 0 评论 -
初识html5小游戏
本次Html5小游戏使用createjs来开发。一、初始化首先要初始化页面场景,和一些默认页面元素。获取屏幕宽度,设置canvas this.windowWidth = document.documentElement.clientWidth; this.windowHeight = document.documentElement.clientHeight; const canv...原创 2019-06-05 18:57:33 · 863 阅读 · 0 评论 -
js排序算法,冒泡,选择,插入,快速排序
排序算法:冒泡,选择,插入,快速排序// 冒泡排序function bubbleSort(arr){ var start = Date.now(); for(var i=0,len=arr.length;i<len;i++){ var temp; for(var j=i+1;j<len-1;j++){ if...原创 2019-06-03 13:44:57 · 234 阅读 · 0 评论 -
js对象字面量定义与JSON.parse的性能比较
今日看到一篇文章(https://v8.dev/blog/cost-of-javascript-2019 ,其中有一段是如下描述:原创 2019-07-08 19:45:42 · 1855 阅读 · 2 评论 -
H5&小程序中实现emoji表情
emoji表情都非常熟悉了,比如微信的会话窗口可以发表情。但是仔细看有一个重要的发现,比如朋友给你发一个emoji表情,在聊天会话列表页查看最近消息,会发现有点不同,体现在如下:列表页看到的就是一个表情,比如大笑????的表情。列表页看到的是一个文字,比如[发呆],[懵逼]前者就是默认emoji表情了,后者则是自定义表情。显然你拿着微信的[懵逼]在微博上是显示不出微信的[懵逼]表情的...原创 2019-09-09 12:57:37 · 7976 阅读 · 0 评论 -
新手引导蒙层的多种实现方式
当前发现很多页面做蒙层引导,还是使用图片形式来做。图片引导蒙层有几大缺点:图片大,影响加载图片的内容都是假的,和真实的底部内容没对上全屏蒙层图片,图片的宽高和屏幕宽高不一致,显示两边留黑,或者有压缩的效果。图片的引导位置不能点击。low ? not cool ?本文讲述三种思路来实现引导蒙层border实现box-shadow实现z-index + opacity实现...原创 2019-09-09 13:05:45 · 5243 阅读 · 0 评论 -
手把手教你写一个AST解析器
AST 解析器工作中经常用到,vue中的VNode就是如此!其实如果有需要将 非结构化数据转 换成 结构化对象用 来分析、处理、渲染的场景,我们都可以用此思想做转换。如何解析成 AST ?我们知道 html 源码只是一个文本数据,尽管它里面包含复杂的含义和嵌套节点逻辑,但是对于浏览器,babel 或者 vue 来说,输入的就是一个长字符串,显然,纯粹的一个字符串是表示不出来啥含义,那么就需...原创 2019-10-08 12:45:02 · 1714 阅读 · 0 评论 -
正则表达式全析
基础语法:^ 匹配开始$匹配结束() 结果匹配项[] 任意匹配项 [abc]匹配a,b,c[^] 非任意匹配项 [^abc]不含a,b,c{2,} 2个以上,{2,2} 2个字符校验汉字:^[\u4e00-\u9fa5]{0,}$ // 0到N个中文字符^[^\u4e00-\u9fa5]{0,}$ //不包含中文字符的其他字符^[\u00FF-...原创 2019-04-09 19:11:26 · 155 阅读 · 0 评论 -
eslint配置
//使用eslint默认推荐的https://cn.eslint.org/docs/rules/,里面打勾的标识配置都为生效"extends": "eslint:recommended",//如下使用的是eslint-config-standard,可以省略前缀eslint-config-,引用共享的配置https://cn.eslint.org/docs/developer-guid...原创 2019-04-08 20:54:29 · 1006 阅读 · 0 评论 -
正则表达式–零宽断言详解
在使用正则表达式时,有时我们需要捕获的内容前后必须是特定内容,但又不捕获这些特定内容的时候,零宽断言就起到作用了。一.基本概念:零宽断言正如它的名字一样,是一种零宽度的匹配,它匹配到的内容不会保存到匹配结果中去,最终匹配结果只是一个位置而已。作用是给指定位置添加一个限定条件,用来规定此位置之前或者之后的字符必须满足限定条件才能使正则中的字表达式匹配成功。注意:这里所说的子表达式并非...转载 2019-03-05 17:30:38 · 291 阅读 · 0 评论 -
js执行location.href不跳转问题
location.href不跳转问题今天一位同事碰到一个问题,用JS设置了location.href就是不跳转的问题。经过分析,发现是这个原因原创 2016-04-12 13:20:59 · 29272 阅读 · 2 评论 -
int Integer 转换成String 的效率比较
对于int转换成String的效率问题,以前一直都不注意,现特别测试了一下,得出结论:1.String str = int+”“;效率最低,2.次之:String str = “”+i;比1 要快近一倍。3,比较高 String str = String.valueOf(int);效率要高多了,比2要快近一倍,比1要快近三倍。4,比较高 String str = Integer.toString(i原创 2016-04-14 10:43:03 · 1383 阅读 · 0 评论 -
modulejs源码阅读笔记
modulejs是一款比seajs、commonjs更加简洁、小巧的javascript模块化开发管理工具。 1、进入页面执行runModuleJS方法,注册事件,读取缓存。其中的hookReadyFun方法,是监听模块是否都OK的。每加载完一个模块(网络下载完,会自动执行,而模块的方法名是define方法,define方法会发布module_ready的方法),都会回调次方法,会checkD原创 2016-08-18 22:43:03 · 1260 阅读 · 0 评论 -
微信在Ios上h5不能分享
在android上能正常分享,IOS,则点击分享没反应。后来查明,原因是desc过长导致。原创 2016-11-03 18:23:04 · 1477 阅读 · 0 评论 -
new Date()
new Date();Date.now();new Date(2018,2,20);// 2 --->3月new Date("2018-03-20");new Date("2018-3-2");//ios Invalid Date/** * 选取出时间期内的选项 * */function testItem(array,start,end){ if(!array||arra...原创 2018-03-20 19:42:39 · 933 阅读 · 0 评论 -
最多显示三行,多余...展开,点击展开收起 getClientRects
需求:显示文本,最多显示三行,多余的显示 ... 展开,点击展开收起.效果如下:需要考虑的点:换行,展开的时候遮住收起如果是不需要有固定在右侧的展开收起,那么移动端直接用css3:overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: ve...原创 2018-04-02 21:54:27 · 26102 阅读 · 5 评论 -
H5短视频滑动播放video
用户下滑,加载新的视频播放,上滑看历史页面。1、布局, 手势下上滑要整体上下滑动,滑动距离不够,需要自动回退到初始播放页面,滑动大于最小距离,则需要翻页。 使用<ul><li></li><li></li>...</ul> ul{ width:100%;transform:translateY(0)}l...原创 2018-05-08 17:31:34 · 11310 阅读 · 9 评论 -
contenteditable实现编辑器,光标、输入法处理,emoji的显示和转换存储
需要开发一个移动端的富文本编辑器,但是不想用uedit等富文本编辑器,那就只能自己支持了。1、contenteditable="true",对组件设置contenteditable="false",这俩是前提<div id="content" contenteditable="true" class="content"></div>&am原创 2018-08-17 14:30:22 · 26217 阅读 · 5 评论 -
文字超长,实现展开收起功能...
对于超长文字,有时需要实现...功能。如果...不需要获取事件,直接用css3来实现: overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical如果需要获取事件,点击还能展开,...原创 2018-08-20 13:38:46 · 15547 阅读 · 5 评论 -
实现一个自己的npm registry
npm install -g gulp这个是从npmjs.com下载gulp,然后安装到本地的$PATH目录里面打开terminal ,输入:echo $PATH即可看到本地的path。输入which npm 可以看到npm安装在/usr/local/bin/npm目录下。我们知道npm的registry是https://registry.npmjs.org/下面已reque...原创 2018-08-23 11:39:32 · 1376 阅读 · 0 评论 -
裁剪图片,拼接的时候中间出现白线
富文本显示,用户编辑了两张图片,然后裁剪了。结果显示端的时候,拼接中间出现白线。 拉取实际大小的时候(小程序bindload),得到的是三位小数的像素值。向上取证,重置高度。即可。...原创 2018-09-26 21:23:20 · 4218 阅读 · 0 评论 -
h5在微信环境下选视频,读取视频
var file = document.getElementById("selectvideo").files;if(!file||file.length==0){return;}video = file[0];1、使用createObjectUrllet windowURL = window.URL || window.webkitURL;let videoURL =...原创 2018-12-26 18:28:38 · 2447 阅读 · 0 评论 -
同步异步动态引入js文件
动态加载js文件有时候我们需要根据参数不同来引入不同的js文件,用html直接写标签满足不了我们的需求,总结几种方法,以及同步异步加载的各种需求一.直接加载一.异步加载,并发执行,但引入js内容不能直接使用 //1.1 直接document.write document.write(""); //1.2 动态改变已有script的src属性转载 2016-04-14 10:48:07 · 1527 阅读 · 1 评论