“js相关”目录存档

鼠标无限移动 JS API Pointer Lock简介

2017年10月18日,星期三

用一句话说明Pointer Lock API的作用就是:Pointer Lock API可以让你的鼠标无限移动,脱离浏览器窗体的限制!

这对于一些需要鼠标控制的应用非常有用。举个例子:某3D VR女友的游戏,你鼠标向上移动,则你的视角就会往下……

阅读全文…

before(),after(),prepend(),append()等新DOM方法简介

2017年09月28日,星期四

接下来要介绍这些新增的DOM API方法,都比较新,其设计目的是可以像jQuery那样,使用非常简单的api,便利的操作dom元素。

这些api包括:before()after()replaceWith()append()prepend()……

阅读全文…

使用canvas实现和HTML5 video交互的弹幕效果

2017年09月10日,星期日

本文展示两个使用canvas实现弹幕效果的案例。其中一个效果是静态的弹幕数据固定的无限循环的效果,适合在个人博客或者运营页面,这种非视频场景使用;另外一个效果是动态的弹幕数据可变的和真实HTML5 <video>交互的弹幕效果,也就是真视频弹幕效果。

阅读全文…

iframe和HTML5 blob实现JS,CSS,HTML直接当前页预览

2017年08月24日,星期四

前端代码效果实时预览的需求实际上是非常常见的,传统做法是这样子的,会新建一个另外的独立页面,专门用来接收传入的前端代码,通过新开窗口或者嵌入iframe页面的方式达到最终效果,然而实际上,对于这个预览效果,如果代码是我们自己控制,而不是全权交给用户编辑的,是没有必要新建一个另外的预览页面,亦或者是在新窗口(新标签页)中浏览的。可以直接在当前页面构建一个文档上下文,实现更加方便快捷的预览。

阅读全文…

HTML5 file API加canvas实现图片前端JS压缩并上传

2017年07月30日,星期日

很多网站的图片上传功能都会对图片的大小进行限制,尤其是头像上传,限制5M或者2M以内是非常常见的。然后现在的数码设备拍摄功能都非常出众,一张原始图片超过2M几乎是标配,此时如果用户想把手机或相机中的某个得意图片上传作为自己的头像,就会遇到因为图片大小限制而不能上传的窘境,不得不对图片进行再处理,而这种体验其实非常不好的。如果可以在前端进行压缩,就不会有这种尺寸限制的问题,自然用户体验就可以大大提升,非常具有价值!

阅读全文…

HTML5 indexedDB前端本地存储数据库实例教程

2017年07月20日,星期四

HTML5 indexedDB和Web SQL Database都是本地数据库数据存储,Web SQL Database数据库要出来的更早,然并卵。从2010年11月18日W3C宣布舍弃Web SQL database草案开始,就已经注定Web SQL Database数据库是明日黄花。

未来一定是indexedDB的…

阅读全文…

借助Service Worker和cacheStorage缓存及离线开发

2017年07月12日,星期三

html5 manifest缓存技术投入产出比有些低,因此不温不火,本文所要介绍的基于Service Worker和cacheStorage缓存及离线开发,套路非常固定,无侵入,且语言纯正,直接复制粘贴就可以实现缓存和离线功能,纯前端,无需服务器配合。一个看上去很酷的功能只要复制粘贴就可以实现,绝对是成本极低的,小白中的小白也能上手。

阅读全文…

了解JS中的全局对象window.self和全局作用域self

2017年07月6日,星期四

在HTML5一些新特性出来之前,全局的self就是个没什么实用价值的半吊子。但是,随着HTML5一些新特性的到来,self开始慢慢登上正式的舞台…

阅读全文…

小tip:JS前端创建html或json文件并浏览器导出下载

2017年07月5日,星期三

我们使用JS创建了一个动态的JSON数据,希望可以保存为JSON文件到本机系统,传统做法可能需要复制粘贴,而实际上,我们可以直接使用JS直接创建对应的JSON文件并让浏览器下载,而且代码和原理都出乎意料的简单。

阅读全文…

我是如何实现electron的在线升级热更新功能的?

2017年06月27日,星期二

通常electron打包出来的文件都很大,有40~50M,如果每次改动升级都要下载个完整版本,实际上是很烦的。

实际上,只要主线程没有发生变化,我们是可以直接在线热更新我们的electron应用的。

阅读全文…