为博客的文章添加二维码 为博客的文章添加了一个生成二维码的功能，可以在扫描二维码后在移动端进行阅读，还能分享给朋友或者分享到朋友圈。只在文章的页面才有生成二维码的功能，首页及其他页面是没有的。具体的步骤是： 在文章页面添加一个“生成二维码”的点击按钮 用户点击按钮后，请求生成二维码的js 请求完毕后，生成二维码并添加到页面中 用户再次点击按钮时，只是切换二维码的显示与隐藏 本博客采用jquery.code.min.js生成二维码，使用方法也非常的简单。首先引入jQuery和jquery.code.min.js，然后在页面中准备一个元素（如 ），用来存放二维码。$('#qrcode').qrcode({ render : 'canvas', // 采用canvas或table的方式生成，默认canvas width : 176, // 默认256 height: 176, // 默认256 text : 'this is text' // 内容 }) 如果其他的参数都不需要，只要内容即生成二维码，还可以：$('#qrcode').qrcode('this is text') 具体的代码如下：$('.bcontent').append('点击生成二维码，可在手机端观看'); $('.bcontent').on('click', '.qrcode a', function(){ var $tsp = $(this).next(); if( $tsp.find('canvas').length ){ if( $tsp.css('display')=='block' ){ $tsp.hide(); }else{ $tsp.show(); } }else{ if( self.showing ){ return; } self.showing = true; $tsp.show().html( '正在生成中...' ); $.ajax({ url : 'jquery.qrcode.min.js', dataType : 'script', type : 'get' }).done(function(){ self.showing = false; $tsp.html(''); $tsp.qrcode({ render : 'canvas', width : 176, height: 176, text : window.location.href }); }) } }) 你可以扫描本文章下的二维码，分享到朋友圈中。

视频video标签在移动端的播放总结 昨天新上线了一个关于腾讯 18 周年嘉年华的 html5，这个 html5 是有 5 段不同的视频组成，中间使用各种手势进行串联，欢迎大家访问。众所周知，在移动端的视频和音频都是需要用户手动点击开启的，而使用autoplay或在 js 里写play()是没有任何作用的。还有几个常见的问题这里也提示一下： iOS 不支持preload属性，android 可能会支持，没太细测试。用户只有在点击的时候才会去加载视频； iOS 不支持autoplay属性，需手动点击开启，使用 setTimeout 延迟开启也不行； canplaythrough表示可是流畅播放了，但是在 android 下是没有卵用的； 有的 android 下是播放完成后才会触发。 playing表示开始播放了，android 下无效； canplay认为是视频元素没有问题，可以运行，没有更多含义了，基本用不上，android 下一样； iOS 和 android 都支持 ended 事件，但不能在 ended 事件里启动一段音频或视频，因此不能使用ended进行视频的循环播放； 有的 iOS 版本下，会弹出一个全屏播放器来播放视频，iPad 则支持内联播放。有人说添加webkit-playsinline属性即可支持内联播放，不过我这儿并没有什么卵用。全屏播放后，会造成操作很不流畅，必须关闭视频的全屏效果，才能进行下一步的操作； 在网络不太好，或视频比较大的情况下，在点击和正式播放的空隙内会有一段等待视频加载的时间；有时候也会出现只有音频而没有画面的情况。 针对这些问题，有的是系统级的问题（比如调起全屏的播放器，循环播放视频等），我们无法修改；其他的，我们都尽量地通过程序来实现。 1. 如何获取视频的加载进度，让视频加载完成后才让用户进入？ # 不能，没有任何的办法来判断视频的加载进度，而且在 iOS 中，只有视频在播放的时候，才临时去加载视频。因此，即使在 video 标签中写了preload属性也是不管用的。使用canplaythrough事件也是没法检测的，虽然 video 标签在加载的时候会触发 canplaythrough 方法，但播放时依然会有卡顿的现象，而且某些 android 还不支持次属性。 2. 播放视频时只有声音没有图像 # 有部分原因是视频的编码不正确，在 mp4 格式的视频中，只支持 h.264 的视频。我的项目中也遇到了这种情况，但不是视频编码的问题。我在自己的网络下测试时，没有这样的问题，但是在外部环境测试时就会出现黑屏、有声音没图像的情况。那么应该就是视频有点大了，然后我就把视频压缩了一下，结果还是会有这样的情况出现。经过同事的指点，我在用户点击和视频正式播放之前添加一个 loading 效果，当视频正式播放的时候就取消 loading。如下：function video_loading($video) { $(".video_loading").show(); var timer = setInterval(function () { var currentTime = $video[0].currentTime; // 检测当前的播放时间 if (currentTime > 0) { $(".video_loading").hide(); clearInterval(timer); } }, 100); } 完美解决黑屏和有声音没图像的问题。 3. 在每段视频的结尾都有向上滑、点击的操作 # 我们是无法在视频上直接进行滑动和点击等操作的，只能是在视频播放结束时，添加一个透明遮罩，让用户在遮罩上进行操作。/** 视频的播放时间改变时进行的操作 videoid video标签的id cur 当前播放时间，可以传入ended参数 func 回调函数 */ videoUpdate : function(videoid, cur, func){ var myVideo = document.getElementById(videoid); if( myVideo ){ if( typeof cur =='number' ){ myVideo.addEventListener('timeupdate', function(){ if( this.currentTime>=cur ){ func(); myVideo.removeEventListener('timeupdate', function(){ }, false); } }, false); }else{ myVideo.addEventListener(cur, function(){ func(); }, false); } } } 使用方法：// 第一屏的视频进行到4秒时，显示透明图层以提供用户操作 tool.videoUpdate("video1", 4, function () { $(".s1 .overlay").show(); }); // 第一屏的视频结束时，显示向下滑动提示按钮 tool.videoUpdate("video1", "ended", function () { $(".s1 .tip").show(); }); 总结 # 这是第一次做移动端的视频播放 html5，在很多地方还有不足的地方，欢迎大家提出意见和建议。

php里简单的对称加密算法 前几天突发奇想要往数据库里保存一些机密的东西，然后就想着怎么让别人即使进入到了数据库也看不懂存储的是什么，那么只有加密了；可是我们自己还要看呢，那只能找一些对称加密的算法了，我们想看的时候再解密回来。在网上找到了一个不错的PHP方面的对称加密算法；在PHP的语法环境里，有urlencode与urldecode,base64_encode和base64_decode自带的对称算法，不过这些自带的算法不能称之为加密算法，只能说是编码方式而已。可是我们可以利用这些来进行一些加工，来实现简单的加密和解密算法。这次的加密和解密算法是使用base64的方式改编的。通常我们使用base64_encode($str)产生的字符串，不经过任何的加工的话，base64_decode()就能转回我们之前的字符串；可是如果我们在base64_encode()之后的字符串里插入几个字符呢，那他就转不回来了，即使转过来也不是我们自己的字符串。

移动端在页面输出调试信息 在移动端，没有了PC浏览器上调试代码的利器，导致我们很难排查和调试问题，于是我就简单的写了一个可把log输出到页面上的js代码。那么log输出的日志里通常需要包含这些信息： 当前时间，精确到秒或毫秒； 输出想要输出的信息 调试的文件； log输出所在的行数，同一个文件可能有多个log输出，最好每个都能定位到行 通常第1个和第2个比较容易实现，直接获取当前date的时间，然后追加到页面上即可。但是当前所处的文件和行号好像不太好获取。经常看console的时候应该知道，通常js出错的时候，console会给出错误信息和所在行号。这里我们也是这样的思路。 主动抛出错误，然后用try...catch进行接收，在catch里获取当前执行代码所在的行号 function log(){ try{ throw new Error(); }catch(e){ console.log(e.stack); } } log(); 运行上面的代码，console里会这样的输出：Error // 抛出异常的类型 at log (tools.html:175) // 抛出异常时的行号： throw new Error() ，这里也能看到其所处的函数和所在文件 at tools.html:180 // 运行log函数的行号： log() 我们从e.stack里能获取不少的信息，同时，我们还能获取到log()执行所处的环境：function a(){ log() } a(); var obj = { func : function(){ log(); } } obj.func(); 输出的信息是：Error at log (tools.html:175) at a (tools.html:183) // 在a函数中运行，执行log的位置是183 at tools.html:185 --- Error at log (tools.html:175) at Object.b (tools.html:189) // 在Object.b函数中运行，执行log的位置是189 at tools.html:192 我们再对e.stack进行优化处理一下，就可以获取到我们想要的信息了，完整的代码如下：function log(msg){ var $body = document.querySelector('body'); if( !$body.querySelector('.info_wz_852') ){ $body.innerHTML += ''; } var $info = $body.querySelector('.info_wz_852'); var date = new Date(), minute = ('00'+date.getMinutes()).slice(-2), second = ('00'+date.getSeconds()).slice(-2); try{ throw new Error(); }catch(e){ var loc = (e.stack.replace(/Error\n/).split(/\n/)[1]).replace(/^(\s|\u00A0)+/,'').replace(/(\s|\u00A0)+$/,''); // var arr = loc.split(':'), // col = parseInt(arr.pop()), // line = parseInt(arr.pop()); $info.innerHTML += '['+minute+':'+second+'] '+loc+''+msg+''; } } 输出的结果是： [47:47] at foo (http://xxx.com/test/index.html:165:5)123[47:47] at http://xxx.com/test/index.html:171:1456 当然，如果需要更复杂的功能，也可以继续添加，比如ajax传给后端等。

一个“极限挑战”主题的网站上线了 公众号微信公众号：前端小茶馆