ES6模块化改变前端的原生开发方式

2022-05-31
阅读 2 分钟
1k
ES6推出的模块化,使用方式有点类似 require.js,只需要引入一个入口文件即可,其他的js文件可以按功能创建及引入,export 导出方法属性,然后 import 引入使用,这个新特性可能在未来会引来原生开发的热潮,不需要三方框架(vue、react)即可自由使用模块化开发,而且目前浏览器市场快统一了,就连IE也放弃了自己的内核...

如何有效的删除数组中符合条件的值?

2022-04-29
阅读 1 分钟
1.3k
结果:[2, 4, 5, 6, 7, 8],与预想的:[5, 6, 7, 8]对比明显不是想要的数据,出现这个原因是为什么呢?下面我们来剖析下循环执行步骤和输出结果:

动态polyfill和import

2021-02-20
阅读 1 分钟
2.2k
以前都是通过 babel-polyfill 一把梭,不管能不能用到,都全量处理,这样虽然方便,但也会造成资源浪费,所以出来了一个动态 polyfill 概念,根据项目需要指定要 polyfill 的特性,而且会根据浏览器是否支持来决定要不要 polyfill,这样性能会更好,如何指定要 polyfill 的特性,直接到 polyfill.io 勾选生成即可

jquery全屏及退出全屏

2019-01-26
阅读 3 分钟
8.9k
涉及方法: requestFullScreen:请求全屏 exitFullscreen:退出全屏 cancelFullScreen:取消全屏 fullscreenchange:监听全屏变化 html {代码...} js {代码...} 也可通过fullscreenchange来监控全屏变化 {代码...} 写到最后,欢迎关注作者:[链接]

Generator初识

2019-01-22
阅读 3 分钟
1.3k
一、简介 Generator函数是ES6引入的新型函数,用于异步编程,跟Promise对象联合使用的话会极大降低异步编程的编写难度和阅读难度。 与普通函数的区别: function关键字与函数名之间有一个星号; 函数体内部使用yield语句,定义不同的内部状态(yield在英语里的意思就是“产出”)。 二、简单示例 1、yield和return {代码.....

放大镜效果

2017-06-23
阅读 3 分钟
3.4k
效果: HTML: {代码...} CSS: {代码...} JS: {代码...} 调用: {代码...} 原图: 由于原图是竖着的,所以代码里有了针对竖图的处理。。。

带省略的分页

2017-06-15
阅读 6 分钟
4k
这个ajax分页是基本jquery来实现的,足以满足正常需求。。。 效果: HTML: {代码...} CSS: {代码...} JS: {代码...} 调用: {代码...}

简单的图片轮播

2017-05-28
阅读 6 分钟
2.5k
效果: 功能:1、左右箭头切换2、状态控制点切换3、鼠标悬念4、自动轮播 HTML: {代码...} CSS: {代码...} JS: {代码...}

leaflet绘制区域(仿高德地图效果)

2017-05-27
阅读 3 分钟
11k
leaflet官网:[链接] 效果: 脚本: {代码...} 写到最后,欢迎关注作者:[链接]

抽红包

2017-05-21
阅读 8 分钟
2.7k
效果(网络问题上传不了gif动态图片) CSS {代码...} HTML {代码...} JS {代码...}

canvas中心旋转、中心缩放

2017-05-17
阅读 2 分钟
22.4k
一、中心旋转效果: 代码: {代码...} 二、中心缩放效果: 代码: {代码...} 写到最后,欢迎关注作者:[链接]

高德地图计算两点间的角度、当前坐标

2017-03-10
阅读 1 分钟
9.3k
1、计算角度前首先要把经纬度坐标转换成地图容器坐标 {代码...} 调用 {代码...} 方法是固定的,可以延伸到其他地图上用。。。 2、根据百分比计算当前坐标 {代码...}

css3 实现大转盘

2017-03-06
阅读 9 分钟
9k
效果 完整代码 {代码...} 随心写写,希望有帮助~~

css3 translate 完美诠释表头固定

2017-02-24
阅读 7 分钟
7.2k
感觉是不是很和谐,而且代码也少,不足的是IE9以下不支持transform属性,但现在也没多少要考滤IE9以下的兼容了吧,做前端老兼顾低版本的浏览器难免会让自己束手束脚。。。。

SVG做圆环进度

2017-02-22
阅读 4 分钟
8.7k
我们要实现的效果: 是不是有点感觉。。。哈哈 动态效果是用css3来实现的,,至于进度则是用js控制stroke-dasharray属性实现的。。 代码如下: 首先看下HTML结构 {代码...} 滤镜效果 {代码...} 对于svg不熟悉的,先看下SVG基本教程[链接] 接下来看下CSS样式 {代码...} 最后就JS脚本了,代码不多,也很简单,就是设置stro...

threejs 绘制地球、飞机、轨迹

2017-02-21
阅读 19 分钟
33.9k
threejs官网:[链接]首先我们来看下要实现的效果这个缩小后的图片,下面我们来看下近距离的动态效果。。效果比较简陋,需要后期再处理。。。下面进入主题,代码篇。。HTML部分: {代码...} JS部分(globe.js)1、实现地球地球贴图(可以在网上下载) {代码...} 2、添加球面光源(这里使用的是半球光) {代码...} 3、添加星点 {...

自定义播放条及数据更新

2017-02-04
阅读 6 分钟
2k
2017年,第一天上班写文章,过年在家没条件,农村的娃不容易啊。。 以上过滤掉吧,先看下本文要实现的效果 这只是播放效果,至于为什么没有把数据更新效果弄出来,主要是不想,,哈哈 熟练JS的玩家们看到这样就会想到setInterval吧,,没错这个就是用setInterval来实现的,, 下面看下HTML结构吧 {代码...} 代码没有贴全...

微信video全屏问题

2017-01-19
阅读 1 分钟
8.6k
做微信扫码打开链接播放视频的同志们注意了,使用video播放会全屏,这是一个很另人苦恼的事,,心理对张小龙xxx,但又有什么用呢,下面来介绍下解决方案

长按二维码

2017-01-06
阅读 1 分钟
1.4k
此效果就是使用setInterval来实现的,在按下和抬起的时候判断。。。 {代码...} 啦 啦 啦 ~ 就是这么短。。

scroll优化之防抖与节流

2016-12-02
阅读 2 分钟
21.7k
这个优化方案是参照 【前端性能】高性能滚动 scroll 及页面渲染优化 在这里简单的把两个方式写出来,以便快速了解。。 第一种:防抖(也就是滚动结束才执行) 演示: 闭包: {代码...} 直接写: {代码...} 第二个是节流(Throttling)滚动的过程中间隔执行,例如滚动加载图片效果,不可能等到滚动结束才执行加载函数数吧...

前端命名规范

2016-12-02
阅读 1 分钟
8.1k
以下是本人使用的命名规范,仅用参照 class命名: {代码...} id命名: {代码...} 纯JS使用: {代码...} name命名: {代码...} html文件命名: {代码...} css文件命名: {代码...} js文件命名: {代码...} js语法命名: {代码...} image文件命名: {代码...} 文件夹命名(参考window目录命名规范): {代码...} 写到最后,...

js省去一份代码

2016-11-28
阅读 1 分钟
1.2k
为什么标题如此命名?答:实然间的自我 所谓省去一份代码,简言之就是代码优化,这里讲的就是把初次执行和后续执行结合起来以减少代码量。。 如像这种页面加元素加载完成就要执行并且窗口大小改变也要执行就可以省略一个copy步骤,减少代码。。示例: {代码...} 还有就是请求和连续请求,伪造实时刷新 {代码...} 等等还...

ajax jsonp跨域

2016-11-28
阅读 2 分钟
2.1k
JSONP是一种非正式传输协议,该协议的一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。

canvas事件

2016-11-26
阅读 3 分钟
5.3k
对于canvas本人用的不多,还不是很熟悉,只能处理一些简单的应用,后面会继承深造。另外对于canvas事件,如果你要实现所有图形都有自己的事件,可以偿试遍历绘制,下面演示一下canvas事件。

canvas画虚线圆

2016-11-23
阅读 2 分钟
7.6k
本文要实现的图形 一个简单的占比统计。。 实现的方案是html js合成 首先是简单的HTML布局 {代码...} 然后通过js来实现我们的最终效果,相应的操作都有注释。 {代码...} 感觉关注~~~~ 啦啦啦

简单的文件树

2016-11-16
阅读 13 分钟
1.5k
要实现的效果 都是在同级目录下的文件,需要服务器环境 布局 {代码...} JS脚本 {代码...} PHP数据: {代码...} 文采不好,就不在这里详细介绍了,但是代码是全给了,想测试的话,直接把代码考过去就行了。。。

自定义事件

2016-11-08
阅读 1 分钟
2k
公司日常开发的项目很少有能使用到自定义事件的,已有的事件就够用了,但作为一个前端人员,学习这个还是有必要了解和学习一下,可能在以后会使用到。。

佛祖注释

2016-11-03
阅读 1 分钟
3.7k
佛曰:写字楼里写字间,写字间里程序员;程序人员写程序,又拿程序换酒钱。酒醒只在网上坐,酒醉还来网下眠;酒醒酒醉日复日,网上网下年复年。但愿老死电脑间,不愿鞠躬老板前;奔驰宝马贵者趣,公交自行程序员。别人笑我太疯癫,我笑自己命太贱;不见满街漂亮妹,哪个归得程序员?

IE9+使用drag拖动更爽

2016-10-31
阅读 6 分钟
4k
在没有drag事件的时候,做元素拖拽使用的都是mouse事件,但mouse在处理过程中可能有这样或那样的问题,主要还是感觉不流畅,如果小伙伴们不在考虑低版本IE(<IE9)的话,可以偿试一下drag,会有意想不到的收获。。