本篇文章置顶

vue自定义全局登录插件, 在全局任意位置使用this.$login()即可调起登录弹窗
分为两个文件:
Login.vue(登录样式主体)
index.js(插件方法及注册到全局)
使用方法

以下具体代码:

阅读全文 »

vue自定义loading指令,在元素上使用你v-loading可显示数据加载时动画,数据加载后消失
分为三个文件:
loading.vue(loading样式主体)
loading.js(自定义指令相关方法)
index.js(指令注册到全局)
使用方法

以下具体代码:

阅读全文 »

实现效果:聊天时,消息连续到来,声音依次播放。有多少消息,播放多少次。
这种播放效果并不理想,只是在程序中提示音次数是对的,但由于播放一次到下次播放会有一个时间差,
因为浏览器一次只能播放一个音频,从音频播放到不播放之间有一个杂音区间,因此这种播放效果并不利落

思路:统计需要播放的次数,如果当前音频没有处于播放状态,则播放音频,播放次数减一,
否则等音频播放完成后,再进行下一次播放,直到要播放的次数放完

以下具体代码:

阅读全文 »

实现效果:聊天中,有消息进入时声音提醒,主要运用audio标签。
注意:
①audio 标签src须静态值,若设置动态值,须audio对象 调用load()方法
②声音文件请用MP3格式,wav格式不兼容ios
③元素加载后,使用touchstart(h5)或 click(pc)事件初始化一次声音文件(play(), pause()), 初始化后,后续可主动触发声音播放
④初始化事件中,pause()后须设置currentTime为音频最大时间数(我这里是1s)
⑤每次触发播放前须设置currentTime为0(ios使用fastSeek()方法设置,设置后须load())
⑥播放完成后须设置currentTime为音频最大时间数(我这里是1s), 可通过监听audio对象的onended事件设置

以下具体代码:

阅读全文 »

原生JS拖拽运用onmousedown,onmousemove,onmouseup等事件来实现拖拽,难点在于在拖拽时会同时触发点击事件。
思路:
定义一个变量var isDrag
在onmousedown时isDrag = false
在onmousemove时isDrag = true, 同时需要判断鼠标点击偏移量小时,isDrag = false
在click事件时根据isDrag来判断是否允许点击事件
以下具体代码:

阅读全文 »

思路

原生js构建消息提示框思路并不复杂:

  1. 创建消息框,添加到body中
  2. 写消息框样式,包括图标,消息文本,关闭按钮
  3. 打开事件,关闭事件,持续时间(定时器),是否显示关闭按钮

    最终效果图
    js-message-box

阅读全文 »