【原创】HTML5音乐列表播放器SMusic开发总结
17052015
HTML5音乐列表播放器SMusic开发总结

前段时间写过一篇介绍简单音乐播放器效果开发的博文《为你的博客添加简单的CSS3音乐播放器》,实现了单曲循环播放效果,这个效果也是我的博客首页一直有的效果,同时文中也介绍了一些简单的HTML5 Audio标签的属性和方法,如 play() , paused()等。当然,之前的效果只适合诸如博客或者某个单页面(如专题页面)使用。而现在的可以称之为完整版的播放器弥补了之前的不足,增加了列表播放,音量控制,播放进度,播放时间以及播放模式,上一曲,下一曲等功能,除了歌词外,基本就是个播放器了(本来就是播放器)。

除了上述介绍的功能外,有必要说明一下的是,为了迎合新东家的口味,编码时,JavaScript部分采用原生来写,没有使用之前的jQuery库,代码量可能大了点,加上注释,应该在400来行。这也是我第一次采用纯原生JavaScript来写插件,因此,代码中有很多不足还望指出。音乐文件本来想使用其他音乐网站的接口来着,但是百度了很久,也没有找到一个开放的接口,应该是音乐之类的有版权限制。如果哪位知道有此类接口烦请告知一声,demo中的音乐文件列表是我下载了几首上传到服务器上弄得(如果有喜欢的音乐可以获取地址后添加到QQ空间背景音乐哦),(⊙﹏⊙)b。播放器界面上基本没考虑太多,把百度新首页(需登录)的音乐播放器界面改了下,因此这款播放器也可以称之为仿百度首页音乐播放器。

【原创】mongoose 多条件模糊查询的实现
08052016
mongoose 多条件模糊查询的实现这是今天手头项目中遇到的一个问题,关于mongoose如何实现类似于SQL中 `nick` LIKE '%keyword%' or `email` LIKE '%keyword%' 这种多条件模糊搜索的问题。 查阅了mongoose文档才得以实现,特此记录一下。
主要用到了query.$orquery.$regex这两个find参数。

query.$or用于实现多条件查询,其值为一个数组。相关文档

示例如下:

query.or([{ color: 'red' }, { status: 'emergency' }])

query.$regex用于实现模糊查询。相关文档。使用示例如下:


【转载】理解 JavaScript 中的 this 关键字
15032016
理解 JavaScript 中的 this 关键字

外文源网址:Understanding the "this" keyword in JavaScript.
许多人被JavaScript中的this关键字给困扰住了,我想混乱的根源来自人们理所当然地认为JavaScript中的this应该像Java中的this或Python中的self一样工作。尽管JavaScript的this有时有类似的效果,但它跟Java或其他语言中的this是完全不同的。尽管有点难理解,但它的原理并不神秘。事实上,this遵循一些简单的小规则,这篇文章就对这些规则作出了解释。
但首先,我想给出一些专业术语和一些JavaScript运行时环境的相关信息,希望能帮助你构建一个心智模型来更好的理解this。

【原创】SMusic移动版发布
08032016
SMusic移动版发布

之前在《关于sMusic第二版的一些想法》一文中提到过的sMusic对移动端的支持,时隔4个月,sMusic移动版终于发布了。耗时这么长,确实不应该,但也是无法避免的,个中缘由,不足与外人道也。好在,今天他终于出生了。
目前已经测试了iPhone(ios 9.2.1),小米2(Android 5.0.2,MUI 7.1.5.0)两个手机版本,显示正常;手中设备有限,不足以测试全部(目标是支持IOS 6.0 + ,以及Android 4.4 + 其余版本不做考虑),有兴趣的同学可帮忙测试一下,先来看下iPhone中的截图:

【转载】开大你的音响,感受HTML5 Audio API带来的视听盛宴
05032016
开大你的音响,感受HTML5 Audio API带来的视听盛宴

话说HTML5的炫酷真的是让我爱不释手,即使在这个提到IE就伤心不完的年代。但话又说回来,追求卓越Web创造更美世界这样高的追求什么时候又与IE沾过边儿呢?所以当你在看本文并且我们开始讨论HTML5等前沿东西的时候,我们默认是把IE排除在外的。本文的例子可以工作在最新的Chrome及Firefox浏览器下,其他浏览器暂未测试。你也可以点此全屏演示 或者前往GitHub进行代码下载然后本地运行。 你还可以下载示例音乐(如果你手头没有音频文件的话)

这里将要介绍的HTML5 音频处理接口与Audio标签是不一样的。页面上的Audio标签只是HTML5更语义化的一个表现,而HTML5提供给JavaScript编程用的AudioAPI则让我们有能力在代码中直接操作原始的音频流数据,对其进行任意加工再造。

【原创】微信web开发者工具
11012016
微信web开发者工具

这篇文章没别的,就是感谢一下微信团队的付出。让我们告别微信在线调试的时代吧。 以下内容都来自微信web开发者工具

概述

为帮助开发者更方便、更安全地开发和调试基于微信的网页,我们推出了 web 开发者工具。它是一个桌面应用,通过模拟微信客户端的表现,使得开发者可以使用这个工具方便地在 PC 或者 Mac 上进行开发和调试工作。

【原创】2016,新年来一发
07012016
2016,新年来一发2016年了,水墨寒博客也迎来了小小的改版。这次改版,风格界面基本没变,秉承了一贯的简洁之风(王婆卖瓜,自卖自夸)。为什么要改版呢,因为不要脸的人太多了,网站允许模仿,但你全站下载只改个名字算怎么回事?看到有些站,甚至有人大言不惭的对我说,不就是一个主题吗?(对于这种无赖,我就只能呵呵了)。真的是又好气又好笑,亲,你真的理解游弋在代码里的人生这几个字的意思吗?开源的东西我都会放在http://www.smohan.net/lab/上,没有开源的,请你尊重一下。贼偷就不说了,还是说说改版的事。事实上,改变是很大度的,只是看不见而已。
【原创】两个关于日期时间的JavaScript方法
30122015
两个关于日期时间的JavaScript方法由于博客全部改版为PJAX(pushState + ajax)。因此,类似于作品等列表都是使用接口读的,后台返回的时间是一个MySQL时间戳,并不能直接使用,需要格式化成指定的字符串。以前这些都是后台搞完返回,现在需要在前端去实现,总结了下博客改版过程中使用到的关于日期时间的方法,主要有parseTime格式化和timeAgo多久之前两个方法。前者就是我们常见到的类似于2015-12-30 12:00、12月20日这种,后者则是类似于2天前,3周前这种,都是比较常用的。
【原创】巧用CSS3滤镜实现图片不同渲染效果
25122015
巧用CSS3滤镜实现图片不同渲染效果本站在首页文章封面图从无色转变为有色,以及页面切换、发布留言等信息提示的背景模糊都利用到了css3filter滤镜。CSS3 Filter是W3C CSS filter Effect 1.0中定义的滤镜,一个使用CSS来改变图片和HTML的模糊度、亮度、对比度、饱和度等等效果的过滤器。目前有grayscaleblurinvertsaturate等10个filter-function。filter属性目前支持的浏览器较少,chrome,Firefox基本都支持了,IE只有EDGE(这个算IE吗)部分支持。具体兼容性请自行测试一下。这里的Demo在chrome(47.0.2526.80),Firefox(43)上测试通过。先来看一下http://caniuse.com/的兼容性评测:
【原创】Math.random() 二三事
08122015
Math.random() 二三事

随机数是统计学领域的一个重要概念,对于游戏来说同样意义非凡,用好随机数,可以使你的游戏更真实、更人性、富有魅力。
举例子来说:一个打靶游戏,子弹每次都命中准心所示位置是不科学的,加上抖动误差,会使真实感更加强烈;再如,抽奖大转盘程序,每当转盘停止转动时,指针恰好都指向奖品图片的正中点,人们会觉得这个转盘很不自然,指向一个随机位置效果要好得多。
学过 JavaScript 的人都知道,应用随机数很简单,只要一个 Math.random() 就可以获得一个大于等于 0 小于 1 的浮点数。从一个集合中随机选择对象时,使用浮点数离散化后的结果作为选择集的索引:

【转载】从网易与淘宝的font-size思考前端设计稿与工作流
02122015
从网易与淘宝的font-size思考前端设计稿与工作流

偶然间发现这篇文章,可以说,这是我见到的对移动REM做的最详细,最细心的一篇总结性文章,果断转载。本文结合作者(流云诸葛)对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习,讨论html5设计稿尺寸以及前端与设计之间协作流程的问题,内容较多,但对你的技术和工作一定有价值。

问题的引出

最近阅读白树的博文《移动web资源整理》时,他在博文中有一段指出,如果html5要适应各种分辨率的移动设备,应该使用rem这样的尺寸单位,同时给出了一段针对各个分辨率范围在html上设置font-size的代码:

【转载】Flex布局新旧混合写法详解(兼容微信)
12112015

flex是个非常好用的属性,如果说有什么可以完全代替 float 和 position ,那么肯定是非它莫属了(虽然现在还有很多不支持 flex 的浏览器)。然而在移动开发中,本来绝大多数浏览器(包括安卓2.3以上的自带浏览器)都支持的属性,偏偏有个例外,就是国产某某X5内核神器(不知哪个版本的webkit,仅支持 display:box),自主研发这东西也不好多说什么了,下面入正题。

首先还是从两个版本的语法开始讲吧,这里还是假设flex容器为 .box ,子元素为 .item 。

旧语法篇

定义容器的display属性

.box{
    display: -moz-box; /*Firefox*/
    display: -webkit-box; /*Safari,Opera,Chrome*/
    display: box;
}
【原创】关于sMusic第二版的一些想法
01112015
关于sMusic第二版的一些想法

sMusic第一版发布以来,受到了网友的青睐 。截止发文,程序在本站的下载次数已到达了近千次(只是本站的下载次数),这是我所始料未及的。最初的想法是在我学习audio的同时,将学习心得与代码实现思路以及一个很简单的demo发布在博客上,因此,我特意将全部代码做了注释开源在github上。当然,大家也提出了很多问题,我陆续也修改增加了部分配置项,使sMusic尽可能的达到可以使用的要求。目前,除了歌词,基本功能已完善。这里我必须说一下,请大家尊重作者。既然开源,使用和修改的权利在大家,但请在二次发布时注明出处(偶然搜索,看到部分人和站点就改了个歌曲列表,然后就成他写的了。对于这些人,我就不提出了,我没有撕逼的习惯和时间。对代码的热情是我唯一分享的原因。谢谢大家~)

【转载】Sass基础——Sass函数
12092015
Sass基础——Sass函数

在Sass中除了可以定义变量,具有@extend%placeholders和Mixins等特性之外,还自备了一系列的函数功能。前面在《Sass基础——颜色函数》一文中主要向大家介绍了Sass函数中有关于颜色函数的功能以及使用。其实在Sass的函数功能中除了颜色函数之外,还具有字符串函数、数字函数、列表函数、Introspection函数以及三元函数等,当然大家还可以根据需求自定义函数。注:本文已合并《Sass基础——颜色函数》这篇文章。 在这篇文章中,我们主要对Sass函数中的字符串函数、数字函数、列表函数、Introspection函数以及三元函数,包括颜色函数的功能能使用做一些简单的介绍,希望对初学Sass的同学略有帮助。

【转载】首先,向我们走来的是程序员方阵,他们戴着防脱发钢盔走来
03092015
首先,向我们走来的是程序员方阵,他们戴着防脱发钢盔走来

各位观众,各位互联网界的同志们,欢迎来到互联网阅兵现场。金秋九月,凉风习习,小秘书为您独家解说“互联网军”各大方阵。看呐~他们精神饱满、英姿飒爽,在“互联网+”的大潮中,焕发着勃勃生机。

下面阅兵正式开始!首先,向我们走来的是程序员方阵,他们刚刚从加班现场赶来,心里默默祈祷着早上编的程序不要出现BUG。他们是“钱多、话少、不乱跑”的典型代表, 而他们眼镜度数则决定了他们在业界的地位。外修语言,内修算法,他们最想要的,不是一个风情万种的女盆友,而是一位心地仁慈的PM!

即将启用新域名 smohan.im  smohan.net将作为静态存储域名使用,请关注smohan.im动态