前端
HY_358116732
这个作者很懒,什么都没留下…
展开
-
js数组复制给另一个空数组,改变其中一个,另一个数组也会改变
场景:在vue中,我在data定义了变量,接收到了后台的数据,数组类型我把它传递给了子组件,但是我并不想直接改变这个数据于是我定义了一个空的数组,把当前数据赋值给了它。但是,我们都知道,数组所指向的是内存地址,直接赋值会使它们指向同一地址。(深拷贝和浅拷贝)那么问题就来了,当我改变其中一个数组的值,另一个数组也会随之发生变化。其实解决办法最简单粗暴的办法就是循环数据数组,然...转载 2020-04-30 10:48:08 · 3045 阅读 · 0 评论 -
h5<canvas>的用法
基本知识 context:一直觉得这个翻译成“上下文”真够蛋疼的,context是一个封装了很多绘图功能的对象,获取这个对象的方法是 var context =canvas.getContext("2d"); 也许这个2d勾起了大家的无限遐想,但是很遗憾的告诉你html5还只是个少女,不提供3d服务。 canvas元素绘制图像的时候有两种方法,分别...转载 2018-04-16 19:40:43 · 756 阅读 · 0 评论 -
Particles.js基于Canvas画布创建粒子原子颗粒效果
Particles.js是一款基于HTML5 Canvas画布的轻量级粒子动画插件,可以设置粒子的形状、旋转、分布、颜色等属性,还可以动态添加粒子,效果非常炫酷,能和鼠标互动吸附或者是躲避鼠标指针。使用方法1、该粒子动画库插件使用方法非常简单,首先要在页面中引入particles.js文件。<script src="js/particles.js"></script>2、在...转载 2018-04-23 18:10:55 · 1157 阅读 · 1 评论 -
JS中的call()方法和apply()方法用法总结
最近又遇到了JacvaScript中的call()方法和apply()方法,而在某些时候这两个方法还确实是十分重要的,那么就让我总结这两个方法的使用和区别吧。1. 每个函数都包含两个非继承而来的方法:call()方法和apply()方法。2. 相同点:这两个方法的作用是一样的。都是在特定的作用域中调用函数,等于设置函数体内this对象的值,以扩充函数赖以运行的作用域。一般来说,this总是指向调用...转载 2018-04-25 12:02:14 · 156 阅读 · 0 评论 -
用css去掉a标签点击时的默认背景色
我们在写移动端html页面时,经常用a标签写成按钮,但是点击用a标签写成的按钮时,有默认的背景色,如果我们不想要这个默认背景色怎么办?以下提供几种方法供大家参考:取消a标签在移动端点击时的蓝色:-webkit-tap-highlight-color: rgba(255, 255, 255, 0);-webkit-user-select: none;-moz-user-focus: none;-mo...原创 2018-05-03 17:00:23 · 5384 阅读 · 0 评论 -
CSS制作的32种图形效果[梯形|三角|椭圆|平行四边形|菱形|四分之一圆|旗帜]
前面在《纯CSS制作的图形效果》一文中介绍了十六种CSS画各种不同图形的方法。今天花了点时间将这方面的制作成一份清单,方便大家急用时有地方可查。别的不多说了,直接看代码。为了节省时间,下面图形都采用的一个标签,可以是块元素也可以是行内元素,不过行内元素需要加上“display:block;”,唯一不同的是,在此用了不同的类名来区别,相关类名我放在了标题的后面,以便大家对应查看。1、正方形(squa...转载 2018-04-28 08:42:10 · 363 阅读 · 0 评论 -
clipboard.js 介绍
这是著名开源项目 clipboard.js 的 README.md,我把它翻译成中文。发出来,方便自己和他人阅读。项目地址:https://github.com/zenorocha/clipboard.js现代化的“复制到剪切板”插件。不包含 Flash。gzip 压缩后仅 3kb。为什么使用它复制文字到剪切板不应该很难去实现。它不需要配置几十个步骤或者加载几百 KB 的文件。最重要的是,它不应该...转载 2018-04-28 09:31:12 · 675 阅读 · 0 评论 -
微信小程序蓝牙通讯蓝牙模块demo
开发微信小程序蓝牙的项目,第一次搞,遇到2个坑:1.安卓和苹果获取的硬件服务UUID顺序不同2.目前用的这一版 “启用低功耗蓝牙设备特征值变化时的 notify 功能”在安卓和苹果的测试机上都返回启动失败,其实是已经启动成功,在我同事安卓手机上返回的正常。index.wxml[html] view plain copy<!--index.wxml--> <view class=...转载 2018-05-20 22:01:35 · 2575 阅读 · 2 评论 -
微信小程序--蓝牙连接开发总结
微信小程序--蓝牙连接开发大致流程: * 1、 开启蓝牙适配 * 2、 获取蓝牙适配器状态,判断设备蓝牙是否可用。 * 3、 判断蓝牙适配器可用时开启扫描蓝牙设备和开启获取已连接的蓝牙设备 * 4、 如果开启扫描蓝牙设备失败5s后自动再次开启扫描 * 5、 开启扫描蓝牙设备成功后开启监听已扫描的设备 * 6、 如果已扫描到的新设备含FeiZhi名(个人产品需要)的设备则开始连接...转载 2018-05-20 22:12:53 · 6685 阅读 · 0 评论 -
自定义浏览器滚动条的样式
前段时间,到网上找素材时,看到了一个很个性的滚动条式,打开Chrome的调试工具看了一下,发现不是用JavaScript来模拟实现的,觉得有必要折腾一下。于是在各大浏览器中对比了一下,发现只用Chrome适用,也就是说这个用的是Chrome的私有CSS属性。便百之谷之后,发现原来不仅仅只用Chrome,其它的浏览器在不同程度上支持自定义滚动条样式的。下面是我不断测试的结果,若有错误或不全,请在评论...转载 2018-05-08 09:32:39 · 257 阅读 · 0 评论 -
微信小程序尺寸单位rpx和样式使用详解
微信小程序尺寸单位rpx和样式使用详解1.尺寸单位rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。建议: 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。2.样式导入使...转载 2018-05-15 22:19:07 · 12066 阅读 · 1 评论 -
js运算符单竖杠“|”的用法和作用及js数据处理
js运算符单竖杠“|”的作用很多朋友都对双竖杠“||”,了如指掌,因为这个经常用到。但是大家知道单竖杠吗?今天有个网友QQ问我,我的 javascript实用技巧,js小知识 , 这篇文章里面,js整数的操作运用了单竖杠,问我单竖杠是啥意思?我看了一下之前的那篇文章,只写了用法,但是并没有解释。好吧,我现在就给大家简单的介绍一下:之前文章,在js整数操作的时候,相当于去除小数点,par...转载 2018-07-26 09:40:41 · 1492 阅读 · 0 评论 -
前端脚手架讲解
前端必不可少的脚手架关于打包东西的了解程度渐渐地也现已成为衡量前端开发工程师水平的一个重要目标。记住在校招面试的时分就有问各种打包东西的问题,如关于 Gulp、Grunt、Webpack 的了解程度,各种打包东西的特色及优缺点等。而当我们逐步融入到一个特定的团队中,一般都有现成的脚手架提供给我们运用,而关于脚手架自身的重视程度也会渐渐下降。那是否就意味着,不需求把握脚手架的相关常识了呢?其...转载 2018-08-17 15:30:24 · 818 阅读 · 0 评论 -
搭建VUE和Element UI 框架
1、webpack 全局安装 1 npm install -g webpack 2、淘宝镜像cnpm安装 1 npm install -g cnpm --registry=https://registry.npm.taobao.org 3、vue脚手架全局安装 -- 用于生成vue模板 1 ...转载 2018-08-28 10:34:24 · 1040 阅读 · 0 评论 -
入门Webpack
写在前面的话阅读本文之前,先看下面这个webpack的配置文件,如果每一项你都懂,那本文能带给你的收获也许就比较有限,你可以快速浏览或直接跳过;如果你和十天前的我一样,对很多选项存在着疑惑,那花一段时间慢慢阅读本文,你的疑惑一定一个一个都会消失;如果你以前没怎么接触过Webpack,而你又你对webpack感兴趣,那么动手跟着本文中那个贯穿始终的例子写一次,写完以后你会发现你已明明白白的走进...转载 2018-08-29 11:51:53 · 145 阅读 · 0 评论 -
js实现页面滑动到最底部触发内容加载
首先要清楚3个定义: 1、文档高度: 这是整个页面的高度 2、可视窗口高度: 这是你看到的浏览器可视屏幕高度 3、滚动条滚动高度: 滚动条下滑过的高度所以, 当 文档高度 == 可视窗口高度 + 滚动条高度 时,滚动条正好到底.以下三个方法分别获取上面3个高度值scroll-event.js//文档高度function getDocumentTop() { ...转载 2019-03-20 10:38:08 · 971 阅读 · 0 评论 -
CommonJS、AMD、CMD的区别
在JavaScript发展初期就是为了实现简单的页面交互逻辑,寥寥数语即可;如今CPU、浏览器性能得到了极大的提升,很多页面逻辑迁移到了客户端(表单验证等),随着web2.0时代的到来,Ajax技术得到广泛应用,jQuery等前端库层出不穷,前端代码日益膨胀这时候JavaScript作为嵌入式的脚本语言的定位动摇了,JavaScript却没有为组织代码提供任何明显帮助,甚至没有类的概念,更不用...转载 2019-05-13 16:19:58 · 179 阅读 · 0 评论 -
iframe 自适应高度(在父页面和在子页面调用的两个方法)
方法一:在和iframe同一个页面中调用$("#iframeId").load(function () { var mainheight = $(this).contents().find("body").height() + 30; $(this).height(mainheight);});方法二:在iframe引用的子页面中调用$(window.parent.docume原创 2018-01-10 11:45:16 · 419 阅读 · 0 评论 -
JS 页面加载触发事件 document.ready和window.onload的区别
document.ready和onload的区别——JavaScript文档加载完成事件页面加载完成有两种事件:一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件);二是onload,指示页面包含图片等文件在内的所有元素都加载完成。 1、Dom Ready使用jq时一般都是这么开始写脚本的:$(function(){转载 2017-12-29 10:59:38 · 604 阅读 · 0 评论 -
Nodejs mysql的增、删、改、查操作
Nodejs连接mysql的增、删、改、查操作(转载 自:http://blog.sina.com.cn/s/blog_5a6efa330102vctw.html)一、准备nodejs的教程,大多以操作mongodb为示例。但是mongodb有一些局限性,具体官网上有说。我打算用MySQL,因为多少还有点使用经验。先以研究为主。node-mysql,是目前最火的node下的mysql驱转载 2017-10-31 16:14:33 · 637 阅读 · 0 评论 -
window.location.hash 使用说明
本文给大家详细汇总了关于window.location.hash的知识点,属性以及用法等等,非常的实用,并附上了例子,有需要的小伙伴可以参考下。 location是javascript里边管理地址栏的内置对象,比如location.href就管理页面的url,用location.href=url就可以直接将页面重定向url。而location.hash则可以用来获取或设置页面的标签转载 2017-10-31 16:27:23 · 621 阅读 · 0 评论 -
Window.open()方法参数详解
1, 最基本的弹出窗口代码 window.open('page.html');2, 经过设置后的弹出窗口 window.open('page.html', 'newwindow', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no, locat转载 2017-11-01 10:33:23 · 1828 阅读 · 0 评论 -
krpano HTML5全景漫游
目前有个插件叫krpano HTML5 Viewer可以实现全景展示,官网都是英文,而且网上资料也比较少些,需要看看官网实例、文档。下载地址:http://www.krpano.com/引用一下别人的博客:http://my.oschina.net/u/591525/blog/158572Krpano功能介绍 Krpano viewer的主程序所使用的XML文件十分简洁转载 2017-11-01 15:29:04 · 1624 阅读 · 0 评论 -
给Krpano小白们的最最最入门级教程(二)
漫游场景的title搞定以后让我们回过头来了解一下tour.xml中其他的内容(图13)。图13skin_settings是默认皮肤的各项参数,修改这些参数你可以对皮肤中所显示的内容进行调整,但是并不能更换掉系统默认的皮肤。在这一段之前有一个注释,它的内容是“设置皮肤项:必应地图?陀螺仪(重力控制)?缩略图控制?提示?”显然,为了方便对系统默认皮肤的控制,K转载 2017-11-01 15:51:38 · 4366 阅读 · 1 评论 -
写给Krpano小白们的最最最入门级教程(一)
本教程案例使用krpano 1.16.9制作,与最新版本有一定区别,但不影响学习和使用。教程的第一部分主要是教大家如何使用Krpano并对标题做简单修改。这篇文章不是教你如何拍摄、拼接全景照片,如果你仅仅是全景爱好者,那我想得图云提供的后台完全能够满足你,因此,对全景漫游有商业需求,一定要给客户提供HTML5网页格式文件或者SWF文件的朋友,这篇文章能够引导你一步步的制作出第一个属转载 2017-11-01 15:53:53 · 21711 阅读 · 1 评论 -
前端大牛们都学过哪些?
前几天看到这样的问题:最近在看bootstrap,发现除了大一的时候看过的html+css,和一些js,JQuery之外,几乎没学什么关于前端的东西。偶尔了解过一些html5。想知道如果作为一个团队的前端负责人还需要学习哪些东西?发现bootstrap与.less有关,除了这个还有哪些是需要学习的?其实,一步一步地来。CSS不能编程?用Less、Sass、Stylus、甚至转载 2017-11-02 09:55:52 · 725 阅读 · 0 评论 -
8大前端安全问题
当我们说“前端安全问题”的时候,我们在说什么“安全”是个很大的话题,各种安全问题的类型也是种类繁多。如果我们把安全问题按照所发生的区域来进行分类的话,那么所有发生在后端服务器、应用、服务当中的安全问题就是“后端安全问题”,所有发生在浏览器、单页面应用、Web页面当中的安全问题则算是“前端安全问题”。比如说,SQL注入漏洞发生在后端应用中,是后端安全问题,跨站脚本攻击(XSS)则是前端安全问转载 2017-11-02 09:57:53 · 851 阅读 · 0 评论 -
Flex 布局教程:语法篇
网页布局(layout)是 CSS 的一个重点应用。布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这转载 2017-11-02 10:51:50 · 349 阅读 · 0 评论 -
Flex 布局教程:实例篇
作者: 阮一峰你会看到,不管是什么布局,Flex往往都可以几行命令搞定。我只列出代码,详细的语法解释请查阅《Flex布局教程:语法篇》。我的主要参考资料是Landon Schropp的文章和Solved by Flexbox。一、骰子的布局骰子的一面,最多可以放置9个点。下面,就来看看Flex如何实现,从1个点到9个点的布局。你可以到转载 2017-11-02 11:20:42 · 333 阅读 · 0 评论 -
Git 使用规范流程
作者: 阮一峰团队开发中,遵循一个合理、清晰的Git使用流程,是非常重要的。否则,每个人都提交一堆杂乱无章的commit,项目很快就会变得难以协调和维护。下面是ThoughtBot 的Git使用规范流程。我从中学到了很多,推荐你也这样使用Git。第一步:新建分支首先,每次开发新功能,都应该新建一个单独的分支(这方面可以参考《Git分支管理策略转载 2017-11-02 11:59:19 · 291 阅读 · 0 评论 -
CSS 框架 Bulma 教程
作者: 阮一峰网页样式需要大量时间开发,最省事的方法就是使用 CSS 框架。Bootstrap 是最著名的 CSS 框架,但是今天我想推荐另一个更轻量化、更易用的框架----Bulma。有了它,即使完全不懂 CSS,也可以轻而易举做出美观的网页。我要感谢 100offer 对我提供赞助。100offer 是国内第一流的人力资源网站,本文结尾有他们的简介,转载 2017-11-02 14:08:31 · 2445 阅读 · 0 评论 -
js之事件冒泡和事件捕获详细介绍
(1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。 IE 5.5: div -> body -> document IE 6.0: div -> body -> html -> document Mozilla 1.0: div -> body -> html -> document -> window(2)捕转载 2017-11-02 16:07:54 · 249 阅读 · 0 评论 -
JSONP跨域请求
Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术。Ajax 允许在不干扰 Web 应用程序的显示和行为的情况下在后台进行数据检索。使用 XMLHttpRequest 函数获取数据,它是一种 API,允许客户端 JavaScript 通过 HTTP 连接到远程服务器。Ajax 也是许多 mas转载 2017-11-03 14:16:09 · 245 阅读 · 0 评论 -
js对手机软键盘的监听
js还没有办法对手机软键盘直接进行监听的,但是可以有其他角度来判断软键盘是否弹起。比如输入框是否获取焦点等。focusin和focusout支持冒泡,对应focus和blur, 使用focusin和focusout的原因是focusin和focusout可以冒泡,focus和blur不会冒泡,这样就可以使用事件代理,处理多个输入框存在的情况。12转载 2017-12-13 16:12:46 · 2984 阅读 · 2 评论 -
了解CSS/CSS3原生变量var
这个重要的 CSS 新功能,所有主要浏览器已经都支持了。本文全面介绍如何使用它,你会发现原生 CSS 从此变得异常强大。一、变量的声明声明变量的时候,变量名前面要加两根连词线(--)。body { --foo: #7F583F; --bar: #F7EFD2;}上面代码中,body选择器里面声明了两个变量:--foo和--bar。它转载 2017-12-06 13:42:43 · 1189 阅读 · 0 评论 -
首屏,白屏时间如何计算??
做移动web页面,受移动网络网速和终端性能影响,我们经常要关注首屏内容展示时间(以下简称首屏时间)这个指标,它衡量着我们的页面是否能在用户耐心消磨完之前展示出来,很大程度影响着用户的使用满意度。怎么获取首屏时间呢?我们经常要先问自己:页面是怎么加载数据?A:加载完静态资源后通过ajax请求去后台获取数据,数据回来后渲染内容 在每个点打上一个时间戳,首转载 2017-12-29 10:44:26 · 2550 阅读 · 0 评论 -
前端数据可视化插件(四)关系图
现在来分享9款关系图插件arborjsurl:http://arborjs.org/halfviz/#/a-new-hopegithub:https://github.com/samizdatco/arborbrowser:IE6+,chrome,firefoxresume:基于jQuery的图谱可视化库,对于高版本的浏览器这个库使用了HTML的canvas元素转载 2017-10-18 16:45:35 · 3728 阅读 · 0 评论