xiaojiecong 发布的文章
-
移动端视频转序列图片播放
页面使用视频嵌入的问题： 1.微信支持视频内嵌播放,支持自动播放 2.IOS 10以下safari不支持视频内嵌及自动播放 3.IOS 10及以上safari支持视频内嵌及无音轨视频的自动播放 4.安卓下原生浏览器播放控制栏规范不统一，部分机型无法隐藏，内嵌播放及自动播放规范不统一 5.安卓和IOS的第三方浏览器会弹出小窗口播放视频，无法内嵌显示 解决方案 将视频转化成序列帧，用JS控制img的src进行切换，视觉上达到和播放视频一样的效果。这种方式也是有局限性的，视频不能太大，建议控制在5s以内，本次项目就是5s的视频导出的base64 js达到了3.5M，勉强可以用。所以3s视......
-
Fiddler调试总结
前言 Fiddler无疑是一个很强大的工具，日常工作中着实帮了不少忙，这里总结下它的用处。 请求重定向至本地文件 由于我们早期的一些老旧页面，没有托管在我们的Gitlab上，而是直接存放在FTP，所以修改就没那么方便。有时修改这些页面的js或者css，就用了Fiddler的这个线上调试功能，挺实用的。 打开你要调试的页面，如图左侧，你会看到有各种请求，然后右侧工具栏切换到AutoResponder选项。 选中你要调试的文件（一般是JS，CSS），然后拖拽到如图位置 找到 Find a file选项，选择你要用于线上调试的本地文件，然后点save保存，就可以在本地调试线上......
-
如何更好地对hexo博客管理
很久没搞点事情了，最近一时兴起用Hexo+Github搭建了个人博客。本文就不详细介绍这个搭建的过程了，主要写下如何对Hexo博客做版本控制与持续集成。 Hexo 安装好hexo之后，hexo init得到如下文件，这些就是博客最原始的源文件。 --- |--node_modules |--scaffolds |--source |--themes |--.gitignore |--_config.yml |--package.json source文件夹存放的是md文件，也就是平时我们用markdown语法写的文章。themes文件夹存放的是主题相关的文件，默认的hexo主......
-
基于NodeJs的自定义命令行图片压缩工具制作
前言 目前，我们小组用的fis已经集成了图片压缩这个功能，通过一行简单的命令，就可以完成对图片的批处理，非常方便。我这里把核心代码抽出来，做了一些修改和扩展，制作成一个独立的工具。 较小组使用的压缩工具，新增了压缩单个或多个文件功能，由于我经常给官网换版头，有时一次就是替换1张，或者2张图而已，所以感觉没必要把所有图片压缩一遍。另外还新增了图片等比缩放功能，这也是源自一次需求，虽然少见。有一次，需求方丢来了20张大概是4000*3000这种尺寸的图片，最大的达到了10M，就算压缩后仍然很大，所以有必要缩小一下图片尺寸。虽然PS可以做批处理缩放，大概就是新建一个“动作”，然后让它重复......
-
使用PhantomJS对网页截屏
PhantomJS 可以看做是一个没有UI界面的webkit浏览器，这个东西用途很广泛，可以用来做网络监控，网页截屏，自动化测试等等，这里抛砖引玉，做个简单的介绍，就主要介绍下它截图的这功能。 1.安装 到官网下载phantomjs.exe，然后复制文件所在路径D:\chrome download\phantomjs-2.1.1-windows\bin（这个是我的路径） ，在环境变量的系统变量中找到path，添加即可，这样就可以在任意地方执行CMD命令操作PhantomJS了。 2.使用 demo.js var page = require('webpage').create(......
-
写了一个Chrome扩展，方便查看NBA赛况
前言 最近写了个Chrome扩展，在这里和大家分享一下。 我们小组日常工作用的检查工具就是一个Chrome扩展程序，可以看看这篇文章，里面有一些介绍：chrome工具优化的学习小结...当然我写的这个比较简单，没那么多复杂的功能。这个其实和我们平常写web页面差不多，所以我们前端可以写，于是我也来试试这个东西~ 先来看看效果图： 默认展示当天的赛况 还有相邻两天的赛况 目录结构 ├── css │ ├── index.css │ ├── boostrap.min.css ├── img │ ├── icon-128.png │ ├── icon-48.png ......
-
快速搭建一个本地服务器
我们都知道，有些情况本地直接点开HTML文件是不行的，需要在服务器环境才能正常访问。我们可以通过搭建本地服务器进行访问，比如我们用的fis本身内置了这个，这次介绍node的一个小模块http-server,可以快速地搭建一个本地服务器。 安装 npm install http-server -g 使用 使用非常简单，进入当前目录，输入http-server 即可，还可以加上其他的一些参数，比如http-server -p 3000 -o,-p指定端口，-o启动服务后自动打开浏览器，更多参数，请查看文档 小结 这个是我平时有些时候会使用到的一个小东西，非常便捷。比如做个小d......
-
关于函数声明与函数表达式的一些理解
通常我们定义函数会用下面两种写法： 1、函数声明 function test(){ //... } 2、函数表达式 var test = function(){ //... }; 表面上看没什么区别，实际上解析器会在执行任何代码前先读取声明，而函数表达式要等到解析器执行到它所在的代码行才会真正被执行。下面举个例子： var test = function() { console.log(2) }; function test() { //这个是函数声明，将会被提升 console.log(1); } test() 结果是输出2，这个代码片段会被......
-
JavaScript逗号运算符知多少
前不久看到一道挺有意思的题目，这次就围绕这个来写点东西~ 首先来看下这个东西~ var a = (1,2,3); console.log(a) 答案是什么？为什么？答对了么？第一次看到这个，会以为是报错，因为一直没见过这种写法，而且实际项目中几乎也没人这样写吧，也看不出有啥实际用途。结果这个出乎意料输出了一个数字 3。心想这就奇怪了，于是多试了几个例子，比如 a = (1,2,3,"s",5,"4")，初步得到结论是：这种写法是合法的，而且总会返回最后一个操作数的值。 然后，网上查资料，得知了一个关键词 —— “逗号运算符”。 先来看个......
-
写个简单的基于jq的轮播图插件
感觉自己一向都挺依赖插件的，基础也比较差，很少自己尝试写点什么，于是这次就写了这个，逻辑比较简单，功能比较单一，还有待改进~ 查看demo>> 1、首先写个面向过程的程序，后面再逐步改写成面向对象程序 css .slide{width: 582px;height: 248px;position: relative;margin:20px auto 0;overflow: hidden;} .slide .banner{overflow: hidden;position: absolute;width: 582px;height: 248px;left: 0;} .s......
-
Weinre+Gulp+BrowserSync结合实现远程调试
weinre，大家可能都听过，是一个远程调试工具。继上次学习了gulp,这次突发奇想把它们结合起来做一些事情。虽然在Chrome下可以模拟移动端，但毕竟会有偏差。这次我想达到的目的是，在PC端开发移动端项目，然后可以在移动设备上实时看到效果，这是一种很棒的体验。 1、安装和启动weinre 全局安装weinre npm install weinre -g 我的node版本是v0.12.6,一开始安装报了个错。原因是npm安装的时候无法匹配到weinre插件所对应安装的版本。安装的时候指定它的版本为 2.0.0-pre-I0Z7U9OV 就可以了。如 npm install ......
-
记第一次使用gulp
最近接触了一下gulp，入门还是比较简单的，有兴趣的同学可以了解下~ gulp，和我们项目使用的FIS一样，是自动化构建工具的一种，帮助我们处理一些重复，繁琐的事情，比如压缩，合并，刷新页面等等，有利于提高我们的工作效率，也会避免一些由于我人工手动去做出现的错误。下面做个简单的介绍。 1、全局安装gulp(都懂的，先要安装node) npm install -g gulp 如果安装比较慢可以使用淘宝NPM镜像 ，如 npm install -g gulp --registry=https://registry.npm.taobao.org 2、创建配置文件package.js......
