
JavaScript
文章平均质量分 77
ccessl
爱生活,爱猫咪
展开
-
jquery和javascript屏蔽右键菜单及阻止事件冒泡
jquery屏蔽右键菜单javascript屏蔽右键菜单 jQuery 阻止事件冒泡jQuery 阻止默认行为javascript 阻止事件冒泡javascript阻止默认行为原创 2017-07-19 21:37:58 · 4564 阅读 · 0 评论 -
zrender zlevel层叠控制和Group使用笔记
在使用zrender的过程中发现的,如果想要设置不同层次的元素,可以通过设置zlevel。如果不设置的话默认zlevel为0。设置zlevel为-1,则它会在zlevel0的下面一层,设置的整数越大,则它会在越上层的位置。每一个不同的zlevel将产生一个独立的canvas,相同zlevel的组件或图标将在同一个canvas上渲染。zlevel越高越靠顶层,canvas对象增多会消耗更多的内存原创 2018-01-09 17:06:14 · 5463 阅读 · 1 评论 -
Three.js 3D 动画场景搭建
最近看了一篇文章,用three.js写了一个很有趣的游戏场景,看了之后发现又想好好学一下three.js。文章:https://tympanus.net/codrops/2016/04/26/the-aviator-animating-basic-3d-scene-threejs/?utm_source=tuicool 对整个流程介绍的很是详细。拜读了这篇文章之后,决定也用t...原创 2018-01-19 14:41:16 · 2836 阅读 · 1 评论 -
three.js 渲染器更改背景色的几种方法
有两种渲染器 :var renderer=new THREE.CanvasRenderer(); 几何级别的渲染,兼容性更好var renderer=new THREE.WebGLRenderer(); 像素级的渲染,渲染效果更好默认的渲染背景色为黑色可以通过以下方式改变背景色: renderer.setClearColor('rgb(135,206,250)',1.0);原创 2017-05-23 16:31:31 · 22402 阅读 · 3 评论 -
用CSS遮罩实现过渡效果
英文原文:Transition Effect with CSS Masks今天我们展示如何用CSS遮罩创建一个有趣又简单但吸引人的过渡效果。与裁剪一样,遮罩是另外一种定义可见性和元素组合的方式。在下面的教程中,我们将向你展示如何应用新属性实现现代转换效果。我们将使用steps()和位于图片之上的PNG实现一个有趣的过渡效果。steps()是一个timing function,允许我们将动画或者过渡...翻译 2018-03-04 20:50:20 · 4703 阅读 · 0 评论 -
Select2的使用 联动筛选框的一个例子
本文使用的select2版本为select2 4.0.2 数据库中的表格信息如下,month字段包含了年、月信息。使用select2插件作为筛选框,以年度和月份信息筛选表格数据。年度和月份这两个筛选框作为联动的筛选框。HTML 筛选框部分 <span class="c_lable" >年度</span> <select id="se...原创 2018-05-14 20:28:33 · 3892 阅读 · 0 评论 -
bootstrap-table使用 带条件查询翻页及数据更新的问题。
bootstrap-table很容易上手,方便易用。自己在使用bootstrap-table时查询的参数如下:{ limit: params.limit, //页面大小 offset: params.offset, //页码 order: params.order, //排位命令(desc,asc) month:month ...原创 2018-05-15 20:47:47 · 16584 阅读 · 1 评论 -
JavaScript this绑定规则
每个函数的this是在调用时被绑定的,完全取决于函数的调用位置。1 默认绑定function foo(){ console.log(this); //输出:Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …} console.log(this.a); //输出:2}var...原创 2018-06-20 15:25:30 · 397 阅读 · 0 评论 -
前端解决跨域问题的8种方案
1.同源策略如下:URL说明是否允许通信http://www.a.com/a.jshttp://www.a.com/b.js同一域名下允许http://www.a.com/lab/a.jshttp://www.a.com/script/b.js同一域名下不同文件夹允许http://www.a.com:8000/a.jshttp://www.a.com/b.js同一域名,不同端口不允许http://...转载 2018-07-09 11:24:10 · 340 阅读 · 0 评论 -
分页组件
分页组件是web开发中常见的组件,请完成pagination函数,在id为jsPagination的DOM元素中完成分页的显示部分,需求如下1、最多连续显示5页,居中高亮显示current页(如demo1所示)2、total为0时,隐藏整个元素(如demo2所示)3、如果total<=5,则显示全部页数,隐藏“首页”和“末页”元素(如demo3所示)4、当current居中不足5页,向后(前...原创 2018-07-09 20:47:12 · 716 阅读 · 0 评论 -
JavaScript 用typeof来判断是否是对象的弊端
题目:使用 typeof bar === "object" 来确定 bar 是否是对象的潜在陷阱是什么?如何避免这个陷阱? 1:使用typeof 首先看下面的代码:var carr=[];var cobj={};function cfun(){ console.log('cc');}console.log(typeof carr=='object'); ...原创 2018-07-24 11:25:39 · 3247 阅读 · 0 评论 -
异步与延迟加载JavaScript的方法
默认情况JavaScript是同步加载的,也就是JavaScript的加载是阻塞的,后面的元素要等待JavaScript加载完毕后才能进行再加载,有多种无阻赛下载JavaScript的方法。(1)defer Defer属性指明本元素所含的脚本不会修改DOM,因此代码能安全地延迟执行。该属性只有IE4 +和Firefox 3.5+的浏览器支持。带有defer属性的<script>元素是在...原创 2018-07-07 11:29:44 · 668 阅读 · 0 评论 -
用html+css+js实现一个无限级树形控件
题目描述:用html+css+js实现一个无限级树形控件,功能如下:1.利用html、css展示一个树形菜单2.点击箭头图标展开子项3.点击父节点勾选图标能全选或全取消,点击叶节点勾选图标可以选中或取消 思路:以上是一道题的题目描述,但是树形结构是如何给出的题目并没有说明,所以每个人都有不同的想法。(自己百度了一顿也没有百度到 (⊙⊙) )想法:1、假如给...原创 2018-07-30 15:06:44 · 23516 阅读 · 4 评论 -
高性能滚动scroll(防抖和节流)
滚动优化的由来滚动优化其实也不仅仅指滚动(scroll 事件),还包括了例如 resize 这类会频繁触发的事件。var i = 0;window.addEventListener('scroll',function(){ console.log(i++);},false);在绑定 scroll 、resize 这类事件时,当它发生时,它被触发的频次非常高,间...转载 2018-08-11 16:56:13 · 15172 阅读 · 2 评论 -
轻量级的Canvas类库zrender使用笔记 :简单自定义图件开发
ECharts,一个纯 Javascript 的图表库,底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。当然我们自己可能有些需求,通过修改ECharts或者highcharts的option不能实现,比如说宽度不一致的柱状图图件。可以直接使用Canvas类库zrender开发图件,或者使用snap.svg.js开源项目开发图件。这里写...原创 2017-12-20 16:32:19 · 23278 阅读 · 2 评论 -
Canvas 类库ZRender开发的接水果的小游戏
最近使用了轻量级的 Canvas 类库 ZRender开发了一些自定义图件,所以想试试用zrender开发小游戏怎么样,自己也没什么经验,所以写着玩吧,可能有些逻辑部分写的不是很好。。这个小游戏很简单,内容为用篮子接水果,接到苹果10分,橘子5分,菠萝15分,草莓30分,通过键盘的左右按键控制篮子左右移动,最后得分为累计接到的水果得分。 一:首先我们需要一些水果的小图标...原创 2018-01-11 20:34:23 · 3669 阅读 · 2 评论 -
javascript深入理解js闭包
什么是闭包,使用闭包的注意点1)由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。解决方法是,在退出函数之前,将不使用的局部变量全部删除。2)闭包会在父函数外部,改变父函数内部变量的值。所以,如果你把父函数当作对象(object)使用,把闭包当作它的公用方法(Public Method),把内部变量当作它的私有属性(private value),这时一定要小心,不要随便转载 2017-08-21 11:04:47 · 297 阅读 · 0 评论 -
javascript canvas生成分形图练习
html5 javascript canvas生成分形图简单的分形图,类似于二叉树一颗数有两个对称分支,然后每个分支又可以继续生长。用一个数组记录每一层的信息,然后一层一层迭代,每迭代一次树枝就增加一层。可以控制迭代次数,初始树枝长度 ,长度比例等。原创 2017-08-27 20:07:32 · 1839 阅读 · 0 评论 -
html5 canvas气泡动画
html5 canvas气泡动画,自己写了一个简单的demo,用canvas实现一个气泡的动画,点击画布的时候增加气泡。当气泡碰撞到画布边缘的时候会反弹回来,能同时改变颜色,与用户交互。画布的宽度为w,高度为y,球的半径为为r每个新生成的气泡有2个随机值,一个表示x轴方向的移动比例movex,一个表示y轴方向的移动比例movey。当气泡移动到左上角、左下角、右下角、右上角的时候movex,movey反向当气泡移动到左边缘和右边缘的时候,movex反向当气泡移动到上边缘和下边缘的时候,movey反向原创 2017-08-30 21:12:13 · 1914 阅读 · 2 评论 -
js 数据结构中邻接矩阵的图的直观表示
做题做到了这样一道题,设用邻接矩阵A表示图G的存储结构,G的顶点为V0,V1,V2,V3,V4,V5,V6,则关于图G的说法正确的是这道题比较简单,基本思路是:不对称矩阵是有向图有向图才会有入度和出度 学习JS做练习,刚好使用对象这一块内容,用JavaScript,canvas,prototype将数据结构中邻接矩阵的图做一个直观表示。 /** * Create...原创 2017-09-04 21:37:02 · 1938 阅读 · 4 评论 -
JavaScript canvas实现俄罗斯方块
JavaScript canvas实现俄罗斯方块。简洁逻辑清晰的代码,代码量少。要记录这些模型有很多种办法,可以用记录其相对位置,记录每一个方块的x,y坐标等。自己想了一种思路来记录这7种模型,很简洁,在写左移,右移,旋转功能的时候也方便使用。下面这个数组记录了这些模型。原创 2017-09-12 10:20:33 · 3244 阅读 · 1 评论 -
JavaScript 使用对象及ES6中的class
上面的代码用C#等语言来写也很类似,那么我们再来看看JavaScript,Javascript中的每个函数都可以用于创建对象,返回的对象既是该类的实例,也是Object类的实例。这种写法跟传统的面向对象语言 C++ 、 Java、c#等差异很大。以前接触的是这类面向对象语言,所以自己刚开始学习Javascript的时候是一脸懵逼的。一段时间后才搞清楚它的套路。原创 2017-10-08 10:56:02 · 304 阅读 · 0 评论 -
对任意长度字符串,删除其中的任意的N(N>=0)个字符
搜狗2018校招搜狗汪仔机器人在参加一站到底节目录制时,被问到一个问题:“对任意长度字符串,删除其中的任意的N(N>=0)个字符呢?”请使用Javascript编码扩展String的delete方法帮助汪仔解决这个问题。HTML+CSS+JavaScript实现以下功能:当用户点击页面里所有a标签时,如果其链接里包含数字,则点击该链接时提示用户“改链接存在风险,是否继续点击?”用户只有点击确认才打开该链接。原创 2017-10-10 15:27:44 · 536 阅读 · 0 评论 -
JavaScript中forEach、for-in、for-of循环的比较
JavaScript中传统for循环、forEach、for-in、for-of循环的比较 遍历数组和对象可以模拟内置的forEach方法for-in会循环遍历自身可枚举属性,和继承的可枚举属性。for-of循环默认调用 Iterator 接口,原生具备 Iterator 接口的数据结构:Array、Map、Set、String、TypedArray、arguments 对象、NodeList 对象原创 2017-10-05 15:47:04 · 754 阅读 · 0 评论 -
JavaScript css3模拟简单的视频弹幕功能
JavaScript css3模拟简单的视频弹幕功能这个移动就用了CSS3 的transition 属性。position设置为absolute,那么就用的transition过度left属性,实现弹幕的移动。当然要注意设置其父元素的样式 overflow:hidden; 这样当字体飞出去的时候,就会隐藏飞出去的部分。原创 2017-10-11 20:04:54 · 2553 阅读 · 0 评论 -
photo-sphere-viewer.js使用时图片拉伸的问题
photo-sphere-viewer.js使用时图片拉伸的问题,SphereGeometry是用来在三维空间内创建一个球体对象,天空部分和地面部分图片拉伸严重变形。在前端处理用canvas将图片上部和下部按比例补上了一部分灰色,显示全景图的时候天空和地面部分就补上了一部分。原创 2017-11-09 15:47:18 · 2661 阅读 · 2 评论 -
JavaScript 通过字符串获取function
JavaScript 通过字符串获取functionwindow[string] 的方式获取到window对象的方法和属性。原创 2017-11-12 21:05:17 · 1171 阅读 · 0 评论 -
Java jxl在excel模板中动态加入数据,及前端下载excel的例子
Java jxl在excel模板中动态加入数据,及前端下载excel的例子前端通过点击一个下载按钮,根据前端显示的数据,下载Excel文件到本地。前端通过ajax的post请求,传递json字符串到后台。后台接收到json字符串,并拷贝一个模板Excel文件,假设命名为test1.xls。后台解析json,通过jxl,Java可以很方便的操作微软的Excel文档。将数据填入指定位置。原创 2017-11-26 19:40:22 · 1964 阅读 · 0 评论 -
jgGrid扩展 显示查询用时
jgGrid扩展 显示查询用时,想要在jgGrid每次查询和翻页的时候可以在pager的位置显示查询用时,查询时间。原创 2017-11-27 20:28:38 · 591 阅读 · 0 评论 -
JavaScript实现继承的几种方式
1.原型链基本思想:利用原型让一个引用类型继承另外一个引用类型的属性和方法。构造函数,原型,实例之间的关系:每个构造函数都有一个原型对象,原型对象包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针。原型链实现继承例子:function SuperType() { this.property = true;}SuperType.prototype.get...转载 2018-08-07 11:37:14 · 189 阅读 · 0 评论