linxner的博客

近期项目需求做一个透明背景的视频叠加摄像头的交互，于是去了解了一下透明背景视频的实现方法。1、webm视频格式首先想到的当然是先跟动画大哥交流能否制作出透明背景的视频，给出的答案是webm格式的视频是可以背景透明的，OK，拿到视频，放到项目中，chorme打开，完美播放，这也太简单了吧，但移动端是不会同意让你这么轻易就播放视频的，Safari，微信，都不支持...

该方案的主要问题是解决安卓播放时会自动全屏的问题，苹果的内联播放还是比较简单的。<video id="video" playsinline="true" webkit-playsinline="true" x-webkit-airplay="allow" airplay="allow" x5-video-playe...

前段时间突然想用nodejs自己写点简单的后台，比如说微信授权，或者记录一些简单的数据之类的。就想着自己搭一个服务器，原以为买来，把前端代码一上传就能访问我的网页了。该走的弯路果然是要走的。首先，我在阿里云买了个包月的服务器ECS，去你的控制台的实例中你会看到以下信息：然后，记住你的公网IP，之后登陆的时候就是用的它，先重置一下你的实例密码，这就是你连接远程服务器的密码。修改后...

最近想自己搭一个网站，但仅仅会前端还是有点做不到实际情况中的前后端交互，就自己瞎鼓捣了几个工具，来搭一个简单的网站。工具：        后端处理这种自己做的小网站用 Node是最好不过来（其他语言不会。。），选Express跟Koa都可以，这边我选的是Express，数据库当然也需要来一个，这边我选的是mongoDB：官网；安装的话可以看网上教程，前端可以选个框架，这边平常用的React...

写本文的目的是记录自己摸索webpack自动构建的过程，有时候我们需要开发一些比较简单的页面的时候，用框架的构建工具有点太 ‘小题大做’，同时也会增加不必要的内存，所以需要一套自己的构建工具，gulp更加强调开发规范，而webpack注重模块化。但在如今，webpack你无法拒绝。本文仅介绍开发环境中webpack的构建的某些用法。先看下项目目录：一、入口    入口推荐使用绝对路...

本文接前篇 webpack构建技巧之开发篇，但可独立使用。项目目录：一、入口入口与开发篇相同function resolve(dir) { return path.join(__dirname, '..', dir) //返回的是项目目录下的文件夹} module.exports = { entry: resolve('src/main.js')}二、出口...

之前做一个项目，需要在两个大屏之间加一屏的视频，效果类似三屏竖方向的翻页，只是中间是一个视频，本以为如此简单三两下搞定。没想到。。。原因在于，IOS与Android对video标签的支持不同，在IOS运行的好好的，放到Android中就各种问题。一般video标签长这样： <video id="start_video" class="start_v...

1. 两个用于访问字符串中特定字符 charAt() 和 charCodeAt() 两者都只有一个参数，不同的是前者返回字符，后者返回字符的字符编码。 var stringValue = "hello world";console.log(stringValue.charAt(1)); //"e"var stringValue = "hello world"; console...

一、基础知识1. 数据类型js 中的数据类型包含两部分：1）基本数据类型（String、Number、Boolean、Null、Undefined、Symbol）2）复杂数据类型（Object）2. typeof 的作用用于判断是否是某个数据类型：var a = 'a', b = 1, c = [1, 2, 3], d = {a: 'a'},...

只需要监听input的blur事件，具体代码如下：onBlur() { document.body.scrollTop = 0}

视频交互类的项目难免会遇到视频跳转位置的问题，我这大致分为两类：一、手动跳转：就是说在用户主动做了某一操作后视频跳转到某一个时间点。二、自动跳转：当视频到达某一时间节点自动跳转到另一时间节点。第一类其实只要控制时间节点能对上就基本没问题，也就是video.currentTime = 1 //单位：秒但实际上，android却表现怪异，视频总是会跳到你想要的视频时间点的附近1-...

iOS不支持auido标签自动播放autoplay属性，我们需要所以我们需要在js中给audio标签‘手 动’播放：&lt;audio src='xxx.mp3' autoPlay loop preload="auto" muted id="audio"&gt;&lt;audio&gt;//原生jsdocument.getElementById('audio').play();do...

移动端H5经常遇到转屏后布局变乱，为避免遇到这种情况通常会提醒用户使用哪种方式的屏幕更好，或者禁止屏幕转动。为此需要监听屏幕的转动事件//监听窗口转动事件window.addEventListener('orientationchange',function(){ //如果为竖屏 if (window.orientation === 0 || window.orient...

加入这段代码就可以了。 document.body.addEventListener('touchmove', function (e) { e.preventDefault(); //阻止默认的处理方式(阻止下拉滑动的效果) }, { passive: false }); //passive 参数不能省略，用来...

先来看一段代码：function Public(name, age) { this.name = name this.age = age}Public.prototype = ({ who: function () { console.log(this.name) }, old: function () { cons...

Ajax创建过程：//1.创建XMLHttpRequest对象 function createXHR() { var xhr = null; //考虑浏览器兼容 if (XMLHttpRequest) { xhr = new XMLHttpRequest(); } else { xhr = n...

在ES5中是没有块级作用域的，只有全局作用域与局部作用域（函数作用域）；怎么理解没有块级作用域呢？看接下来的例子：for (var i = 0; i &lt; 5; i++) { { console.log(i) //输出0,1，2，3，4 } } console.log(i) //输出5 用var声明变量，变量i会被泄露为全局变量，...

ajax是一个比较常用的异步操作，在Vue中或者其他框架的实例中如果使用$.ajax({})需要在success函数后面bind（this）或者var that=this，而且每次都要写各个重复的参数或者代码，不想叙述了，直接上代码吧，很方便用向外暴露一个方法：export function getData(url,back) { return new Promise((resolve, rej...

1.谈谈Cookie的认识 （1）总数的限制：每个特定的域名下最多生成20个cookie （2）尺寸的限制：每个cookie长度不能超过4KB，否则会被截掉。cookie的最大大约为4096字节，为了兼容性，一般不能超过4095字节。 IE 提供了一种存储可以持久化用户数据，叫做userData，每个数据最多128K，每个域名下最多1M。这个持久化数据放在缓存中，如果缓存没有清理，那么会一直存在。...

相信互联网已经越来越成为人们生活中不可或缺的一部分。Ajax，flex等等富客户端的应用使得人们越加“幸福”地体验着许多原先只能在C/S实 现的功 能。比如Google机会已经把最基本的office应用都搬到了互联网上。当然便利的同时毫无疑问的也使页面的速度越来越慢。自己是做前端开发的，在性能方面，根据Yahoo的调查，后台只占5%，而前端高达95%之多，其中有88%的东西是可以优化的。以上是一张...

this的指向一共四种：1.普通函数中的this指向全局对象window；2.方法中this指向调用方法的对象；3.构造函数中指向构造函数的实例；4.call，apply中指向指定的上下文。接下来详细介绍一下一、普通函数中的this指向全局对象window// 打印console.log(this) //Window// 声明函数中const fuc = function () {   ...

先是简单介绍一些数组的方法：1、Array.length：返回数组的长度；var arr = [4, 2, 6, 7, 3, 1, 5]arr.length // 72、Array.join()：数组每个元素用括号里面的符号连接起来并返回一个字符串；arr.join() // "4,2,6,7,3,1,5"arr.join('=') // "4=2=6=7=3=1=5"arr.join(' ...

       在JavaScript中，根据作用域链规则，函数内部可以很容易的获取全局变量，函数内部的局部作用域中的变量只有子函数才可以读取，要从外部获取内部变量却不是很简单。闭包就是用来解决这个问题的，既然子函数可以读取局部作用域变量，那就把子函数当做函数返回值，返回给父函数不就能够从外部获得局部变量。这就是闭包，将函数内部与外部连接起来。一、理解闭包 先看一个简单的闭包。var name =...

在页面中我们经常要用到当鼠标经过某一元素是，其他元素显示或者消失，有比较多的方法，但是有些细节需要注意。现在需要当鼠标经过绿色盒子时，红色盒子显示出来。代码如下：&lt;div id="box"&gt; 鼠标经过 &lt;div id="box1"&gt;显示&lt;/div&gt;&lt;/div&gt;效果如下：方法一：css中的hover（仅限于红色盒子为绿色盒子子元素时）...