- 博客(34)
- 收藏
- 关注
RSS订阅原创 前端如何制作出透明背景视频
近期项目需求做一个透明背景的视频叠加摄像头的交互，于是去了解了一下透明背景视频的实现方法。1、webm视频格式首先想到的当然是先跟动画大哥交流能否制作出透明背景的视频，给出的答案是webm格式的视频是可以背景透明的，OK，拿到视频，放到项目中，chorme打开，完美播放，这也太简单了吧，但移动端是不会同意让你这么轻易就播放视频的，Safari，微信，都不支持...
2020-05-14 17:55:20
11264
3
原创 移动端video视频内联播放兼容方案
该方案的主要问题是解决安卓播放时会自动全屏的问题，苹果的内联播放还是比较简单的。<video id="video" playsinline="true" webkit-playsinline="true" x-webkit-airplay="allow" airplay="allow" x5-video-playe...
2020-04-01 17:28:06
2816
原创 新手入门级搭建服务器
前段时间突然想用nodejs自己写点简单的后台，比如说微信授权，或者记录一些简单的数据之类的。就想着自己搭一个服务器，原以为买来，把前端代码一上传就能访问我的网页了。该走的弯路果然是要走的。首先，我在阿里云买了个包月的服务器ECS，去你的控制台的实例中你会看到以下信息：然后，记住你的公网IP，之后登陆的时候就是用的它，先重置一下你的实例密码，这就是你连接远程服务器的密码。修改后...
2019-12-06 17:10:13
4940
原创 移动端关于视频跳转的currentTime兼容问题
视频交互类的项目难免会遇到视频跳转位置的问题，我这大致分为两类：一、手动跳转：就是说在用户主动做了某一操作后视频跳转到某一个时间点。二、自动跳转：当视频到达某一时间节点自动跳转到另一时间节点。第一类其实只要控制时间节点能对上就基本没问题，也就是video.currentTime = 1 //单位：秒但实际上，android却表现怪异，视频总是会跳到你想要的视频时间点的附近1-...
2019-09-24 18:10:25
20606
8
原创 解决移动端输入法键盘隐藏时页面拉不下来问题。
只需要监听input的blur事件，具体代码如下：onBlur() { document.body.scrollTop = 0}
2019-09-16 16:02:14
2874
原创 字符串的一些用法总结
1. 两个用于访问字符串中特定字符 charAt() 和 charCodeAt() 两者都只有一个参数，不同的是前者返回字符，后者返回字符的字符编码。 var stringValue = "hello world";console.log(stringValue.charAt(1)); //"e"var stringValue = "hello world"; console...
2019-02-15 16:16:15
2143
原创 移动端关于video标签视频全屏播放的兼容适配问题
之前做一个项目，需要在两个大屏之间加一屏的视频，效果类似三屏竖方向的翻页，只是中间是一个视频，本以为如此简单三两下搞定。没想到。。。原因在于，IOS与Android对video标签的支持不同，在IOS运行的好好的，放到Android中就各种问题。一般video标签长这样： <video id="start_video" class="start_v...
2019-02-15 10:23:39
8978
1
原创 JS基础篇，持续更新。。。
一、基础知识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'},...
2019-02-13 23:14:55
969
原创 webpack构建技巧之生产篇
本文接前篇 webpack构建技巧之开发篇，但可独立使用。项目目录：一、入口入口与开发篇相同function resolve(dir) { return path.join(__dirname, '..', dir) //返回的是项目目录下的文件夹} module.exports = { entry: resolve('src/main.js')}二、出口...
2019-01-22 14:40:17
1102
原创 webpack构建技巧之开发篇
写本文的目的是记录自己摸索webpack自动构建的过程，有时候我们需要开发一些比较简单的页面的时候，用框架的构建工具有点太 ‘小题大做’，同时也会增加不必要的内存，所以需要一套自己的构建工具，gulp更加强调开发规范，而webpack注重模块化。但在如今，webpack你无法拒绝。本文仅介绍开发环境中webpack的构建的某些用法。先看下项目目录：一、入口 入口推荐使用绝对路...
2019-01-21 18:22:21
874
原创 css精灵图写序列帧动画
最近写一个H5要求序列帧动画比较多，但是却仅仅是作为装饰，而不对其进行操作，为了减小内存以及更好的性能选择了css动画+css精灵图的方式。1.找工具制作css精灵图。 听说Win系统的css sprite很好用，可惜mac系统不行，所以先安利大家一个插件：gulp.spritesmith，用gulp作为构建工具，可以获得css样式文件，css generator也行，但个...
2019-01-14 12:28:27
3950
1
原创 教你搭一个简单的前后端交互小网站
最近想自己搭一个网站，但仅仅会前端还是有点做不到实际情况中的前后端交互，就自己瞎鼓捣了几个工具，来搭一个简单的网站。工具： 后端处理这种自己做的小网站用 Node是最好不过来（其他语言不会。。），选Express跟Koa都可以，这边我选的是Express，数据库当然也需要来一个，这边我选的是mongoDB：官网；安装的话可以看网上教程，前端可以选个框架，这边平常用的React...
2018-10-25 11:37:13
15601
6
原创 iOS与微信端播放音乐问题
iOS不支持auido标签自动播放autoplay属性，我们需要所以我们需要在js中给audio标签‘手 动’播放：<audio src='xxx.mp3' autoPlay loop preload="auto" muted id="audio"><audio>//原生jsdocument.getElementById('audio').play();do...
2018-10-24 17:00:18
1478
1
原创 移动端阻止长按文字出现选中效果
移动端有时候会需要长按保存图片，但当页面中有文字时，长按会出现选中文字时的框，用户会感觉很奇怪。禁止目标文字被选中//在需要禁止选中的文字所在位置加上以下css样式.txt { -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-...
2018-10-09 15:39:38
5577
原创 移动端转屏事件
移动端H5经常遇到转屏后布局变乱，为避免遇到这种情况通常会提醒用户使用哪种方式的屏幕更好，或者禁止屏幕转动。为此需要监听屏幕的转动事件//监听窗口转动事件window.addEventListener('orientationchange',function(){ //如果为竖屏 if (window.orientation === 0 || window.orient...
2018-10-09 15:34:50
1173
原创 pointer-events的作用
pointer-events：auto | none | visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all默认值：auto，auto：与pointer-events属性未指定时的表现效果相同。在svg内容上与visiblepainted值相同none：元素永远不会...
2018-09-12 10:09:06
3774
原创 移动端取消元素添加点击事件时背景高亮
通用方法：在你添加了点击事件的元素的样式中加入以下样式，-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
2018-09-11 15:06:19
1256
原创 阻止input输入文字时页面视图放大
在页面head中加入 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> 限制页面最大最小缩放为1。
2018-09-11 14:59:47
1650
原创 阻止浏览器中下拉显示出网址
加入这段代码就可以了。 document.body.addEventListener('touchmove', function (e) { e.preventDefault(); //阻止默认的处理方式(阻止下拉滑动的效果) }, { passive: false }); //passive 参数不能省略，用来...
2018-09-11 14:54:53
1927
原创 定位与BFC原理
一、定位1、标准文档流 在HTML文档中，如无任何其他额外规定，元素默认按标准文档流排列，行内元素会一个接一个同行排列，直到排满本行后自动换行；块级元素每一个规定占一整行；每个元素会按其在文档中的位置按顺序排列，此为标准文档流。2、浮动（float） 脱离标准文档流的一种方式，元素会脱离标准文档流，并尽可能的往浮动方向偏移，直到遇到包含它的元素边框或者其他浮动元素的边框...
2018-07-02 15:22:09
1618
转载 网站性能优化
相信互联网已经越来越成为人们生活中不可或缺的一部分。Ajax，flex等等富客户端的应用使得人们越加“幸福”地体验着许多原先只能在C/S实 现的功 能。比如Google机会已经把最基本的office应用都搬到了互联网上。当然便利的同时毫无疑问的也使页面的速度越来越慢。自己是做前端开发的，在性能方面，根据Yahoo的调查，后台只占5%，而前端高达95%之多，其中有88%的东西是可以优化的。以上是一张...
2018-06-29 14:58:43
1138
原创 闭包的理解
在JavaScript中，根据作用域链规则，函数内部可以很容易的获取全局变量，函数内部的局部作用域中的变量只有子函数才可以读取，要从外部获取内部变量却不是很简单。闭包就是用来解决这个问题的，既然子函数可以读取局部作用域变量，那就把子函数当做函数返回值，返回给父函数不就能够从外部获得局部变量。这就是闭包，将函数内部与外部连接起来。一、理解闭包 先看一个简单的闭包。var name =...
2018-06-27 14:13:32
977
原创 关于this的指向问题
this的指向一共四种：1.普通函数中的this指向全局对象window；2.方法中this指向调用方法的对象；3.构造函数中指向构造函数的实例；4.call，apply中指向指定的上下文。接下来详细介绍一下一、普通函数中的this指向全局对象window// 打印console.log(this) //Window// 声明函数中const fuc = function () { ...
2018-06-26 17:10:52
1056
原创 vue组件之间的通信
实际开发一般都是用vue-cli中，本文就以vue-cli中的情境来描述。一、父组件传递数据给子组件父传子用props来实现，假设以下情境：我们需要在灰色的父组件中操作改变白色的子组件的数字加减，并且可以在子组件中清空数字。我们就需要将父组件的操作的值传递给子组件。父组件代码如下：<template> <div class="parent"> <...
2018-06-26 13:20:23
1002
转载 css基础的一些总结
一、CSS 选择符： 1.id选择器(# myid) 2.类选择器(.myclassname) ；3.标签选择器(div, h1, p) ；4.相邻选择器(h1 + p) ；5.子选择器(ul > li) ；6.后代选择器(li a) ；7.通配符选择器( * ) ；8.属性选择器(a[rel = “external”]) ；9.伪类选择器(a: hover, li:nth-child)；1...
2018-06-21 16:07:10
1005
转载 Cookie与Web Storage的区别
1.谈谈Cookie的认识 （1）总数的限制：每个特定的域名下最多生成20个cookie （2）尺寸的限制：每个cookie长度不能超过4KB，否则会被截掉。cookie的最大大约为4096字节，为了兼容性，一般不能超过4095字节。 IE 提供了一种存储可以持久化用户数据，叫做userData，每个数据最多128K，每个域名下最多1M。这个持久化数据放在缓存中，如果缓存没有清理，那么会一直存在。...
2018-06-21 15:16:31
1182
原创 数组的一些用法总结
先是简单介绍一些数组的方法：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(' ...
2018-06-20 13:01:25
1322
原创 ajax的promise封装
ajax是一个比较常用的异步操作，在Vue中或者其他框架的实例中如果使用$.ajax({})需要在success函数后面bind（this）或者var that=this，而且每次都要写各个重复的参数或者代码，不想叙述了，直接上代码吧，很方便用向外暴露一个方法：export function getData(url,back) { return new Promise((resolve, rej...
2018-06-12 16:02:24
1323
原创 关于ES6的块级作用域
在ES5中是没有块级作用域的，只有全局作用域与局部作用域（函数作用域）；怎么理解没有块级作用域呢？看接下来的例子：for (var i = 0; i < 5; i++) { { console.log(i) //输出0,1，2，3，4 } } console.log(i) //输出5 用var声明变量，变量i会被泄露为全局变量，...
2018-05-04 14:37:11
1300
原创 原生Ajax请求创建过程
Ajax创建过程：//1.创建XMLHttpRequest对象 function createXHR() { var xhr = null; //考虑浏览器兼容 if (XMLHttpRequest) { xhr = new XMLHttpRequest(); } else { xhr = n...
2018-04-20 11:15:05
1140
原创 关于js面向对象的公有属性与私有属性的设置方法
先来看一段代码：function Public(name, age) { this.name = name this.age = age}Public.prototype = ({ who: function () { console.log(this.name) }, old: function () { cons...
2018-04-16 17:29:13
2512
2
原创 关于鼠标经过盒子显示消失问题
在页面中我们经常要用到当鼠标经过某一元素是，其他元素显示或者消失，有比较多的方法，但是有些细节需要注意。现在需要当鼠标经过绿色盒子时，红色盒子显示出来。代码如下：<div id="box"> 鼠标经过 <div id="box1">显示</div></div>效果如下：方法一：css中的hover（仅限于红色盒子为绿色盒子子元素时）...
2018-04-16 16:01:29
2799
原创 消除inline-block产生的间隙
在水平对齐方法中display inline-block是一种很方便的方法，但是使用时会有一点小瑕疵。当子元素标签与标签之间存在空格：<div class="box"> <div class="box1">盒子一</div> <div class="box2">盒子二</div><
2018-04-16 15:03:42
1102
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人