ngtwewy

当浏览器碰到 script 脚本的时候: 没有 defer 或 async,浏览器会立即加载并执行指定的脚本,“立即”指的是在渲染该 script 标签之下的文档元素之前,也就是说不等待后续载入的文档元素,读到就加载并执行。 有 async,加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行(异步)。 有 defer,加载后续文档元素的过程将和 script.js 的加载并行进行(异步),但是 script.js 的执行要在所有元素解析完成之后,DOMContentLoaded 事件触发之前完成。 然后从实用角度来说呢,首先把所有

2018-10-12    JavaScript    315
ngtwewy

2018年7月25日,Mislav Marohnić在推文中宣布GitHub前端已经彻底删除jQuery依赖,并全部依赖原生API。 可见的未来,很多jQuery插件会被ES5+重写,下面介绍一下原生javascript插件的写法: 插件需要满足的条件 一个可复用的插件需要满足以下条件: 插件自身的作用域与用户当前的作用域相互独立,也就是插件内部的私有变量不能影响使用者的环境变量; 插件需具备默认设置参数; 插件除了具备已实现的基本功能外,需提供部分API,使用者可以通过该API修改插件功能的默认参数,从而实现用户自定义插件效果; 插件需提供监听入口,及针对指定元素进行监听,

2018-09-21    JavaScript    358
ngtwewy

假设需要访问的外网JSON数据接口URL为:http://xxx.com/api/test 取得的JSON数据格式为: {"id":"1","content":"this iscontent"} 按照JSONP技术要求进行改造(需要服务端配合): 1、上面的访问URL改为: "http://xxx.com/api/test?callback=?" (即增加一个自定义参数 jsoncallback ) 2、getJSON方法调用方式: $.getJSON("http://xxx.com/api/test?callback=?", function(jsonObject)

2018-06-06    JavaScript    294
ngtwewy

Audio对象的属性 属性 描述 audio.volume (读/写) 音量 audio.src (读/写) 歌曲地址 audio.currentTime (读/写) 歌曲当前已播放时长 audio.duration (读) 歌曲的总长度 audio.paused (读) 布尔类型 是否处于暂停状态 audio.ended (读) 布尔类型 歌曲是否已经播放完毕 Audio对象的方法 方法 描述 audio.play() 让歌曲开

2018-06-03    JavaScript    341
ngtwewy

大多数情况下,我们都是判断页面滚动到底部,如下: window.addEventListener('scroll', this.handleScroll); // 处理滚动到底部的事件 handleScroll(arg) {     var clientHeight  = document.documentElement.clientHeight;  // 客户区大小     var scrollHeight  = document.documentElement.scrollHeight;  // 没用滚动条的情况下,元素内容的总高度     var scrollTop

2018-05-28    JavaScript    2911
ngtwewy

// 时间转换 几分钟 几小时 几天 tools.formatTime = function (timespan) { var dateTime = new Date(timespan); var year = dateTime.getFullYear(); var month = dateTime.getMonth() + 1; var day = dateTime.getDate(); var hour = dateTime.getHours(); var minute = dateTime.getMinutes(); var second

2018-05-27    JavaScript    346
ngtwewy

物体与观察者的距离远近在静态时通过物体的大小来体现。当物体运动时,通过远近物体不同的运动速度来体现,从而形成层次感。近处的物体运动快,远处的物体运动慢。 手机演示地址://javascript.net.cn/test/446/#/ 代码: html,body{height: 100%;} .viewport{width: 100%; height: 100%; overflow: hidden; position: relative; } .sence{ width: 2500px; height: 100%; background:url(../asset

2018-05-04    JavaScript    295
ngtwewy

只关注了2d方面的,对现在项目有意义的概念。 UI坐标系 UI坐标就是Android和iOS等应用开发的时候使用的二维坐标系。它的原点是在左上角的。 我看pixi.js的坐标原点在左上角, OpenGL坐标 OpenGL坐标是种三维坐标。由于Cocos2d-x底层采用OpenGL渲染,因此的默认坐标就是OpenGL坐标,只不过只采用两维(x和y轴)。如果不考虑z轴,OpenGL坐标的原点在左下角。 世界坐标系 世界坐标系是系统的绝对坐标系,在没有建立用户坐标系之前画面上所有点的坐标都是以该坐标系的原点来确定各自的位置的。 世界坐标和模型坐标,Cocos2d-JS的坐标也

2018-05-03    JavaScript    682
ngtwewy

方法一,提示蒙层提醒用户保持竖屏体验,这种方法体验太差 方法二,强制横屏显示,对屏幕 resize 事件进行监听,当判断为竖屏时将整个根容器进行逆时针 CSS3 旋转 90 度即可,代码如下所示。 这种方法可以解决绝大多数问题了。 // 利用 CSS3 旋转 对根容器逆时针旋转 90 度 var detectOrient = function() {   var width = document.documentElement.clientWidth,       height =  document.documentElement.clientHeight,    

2018-05-03    JavaScript    360
ngtwewy

效果: 算法: 代码: .stage{width: 100%; overflow: hidden; position: relative; } .sence{width: 1024px; height: 350px; background:url(../assets/images/background.jpg); position: relative;} .sprite{width: 20px;height: 50px; background: #f4f74a; position: absolute;} // 初始化精灵 var sprite = do

2018-04-27    JavaScript    387
ngtwewy

类似《返校》和《无尽梦魇》的那种。 基本算法: 主要是解决精灵匀速直线运动的问题。 效果: 代码: .stage{width: 100%; overflow: hidden; position: relative; } .sence{width: 1024px; height: 350px; background:url(../assets/images/background.jpg)} .sprite{width: 20px;height: 50px; background: #f4f74a; position: absolute;} va

2018-04-26    JavaScript    316
ngtwewy

.stage{width: 100%; overflow: hidden;position: relative;} .content{width: 2826px; height: 1842px; /* transition: margin-left 0.2s 0s; */ } .content img{display: block; width: 100%;height: 100%;} .roles, .roleOne{width: 60px; height: 60px; position: fixed; lef

2018-04-26    JavaScript    542
ngtwewy

event.clientX、event.clientY 鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性 event.pageX、event.pageY 类似于event.clientX、event.clientY,但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性,但得到了广泛支持。IE事件中没有这2个属性。 event.offsetX、event.offsetY 鼠标相对于事件源元素(srcElement)的X,Y坐标,只有IE事件有这2个属性,标准事件没有对应的属性。 event.sc

2018-04-17    JavaScript    367
ngtwewy

打开图像按钮,只有图像信息和高级两个table选项卡,版本不同,显示略有差异,我的实现是有两种方法都可以添加上传功能, 第一种方法使用CKEDITOR自身代码功能 “预览”中有一大堆鸟语,看得很不爽。可以使用1或2来进行清除。 1:可以打开ckeditor/plugins/image/dialogs/image.js文件,搜索“b.config.image_previewText”就能找到这段鸟语了,(b.config.image_previewText||'')单引号中的内容全删了,注意别删多了。 2:打开cke

2018-03-05    JavaScript    301
ngtwewy

方案一,上传图片和剪裁的参数,然后服务器端进行剪裁//获取头像 //1、input[type=file]有change的状态以后。 //2、读取文件给img src赋值并初始化cropper.js avatarInputChange:function(event){ this.avatar = event.target.files[0]; var oFReader = new FileReader(), rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|

2018-01-03    JavaScript    385
ngtwewy

1.node.js 的express服务器报 413 payload too largeexpress 4.0后版本var bodyParser = require('body-parser');app.use(bodyParser.json({limit: '50mb'}));app.use(bodyParser.urlencoded({limit: '50mb', extended: true}));https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Status/4132. 按说axios里会

2018-01-03    JavaScript    496
ngtwewy

FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据。其中File对象可以是来自用户在一个元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的 DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后返回结果.对于图像类型的文件,Blob对象的type属性都是以"Image/"开头的,利用这个特性可以判断用户选择的文件是否是图像类型的。FileReader接口:主要用来把文件读入内存,并且读取文件中的数据,

2018-01-02    JavaScript    373
ngtwewy

在浏览器中,我们一旦把节点添加到document.body(或者其他节点)中,页面就会更新并反映出这个变化,对于少量的更新,一条条循环插入也会运行很好,也是我们常用的方法。但是,如果当我们要向document中添加大量数据时(比如1w条),如果像上面的代码一样,逐条添加节点,这个过程就可能会十分缓慢。 documentFragment 被所有主流浏览器支持。所以,没有理由不用。DocumentFragments 是DOM节点。它们不是主DOM树的一部分。通常的用例是创建文档片段,将元素附加到文档片段,然后将文档片段附加到DOM树。在DOM树中,文档片段被其所有的子元素所代替。因为文

2017-12-29    JavaScript    306
随机推荐
新媒体工作者的日常
RESTful就是个骗局 (蛤蛤)
DDOS 专题
Koa.js 中间件 koa-session
ffmpeg 下载加密的切片视频 m3u8
在PDO中使用事务
站着编程两年后我身体上的变化
体块透视
Apache 虚拟主机中设置 PHP 环境变量,open_basedir 相关
Base64