关于json对象的深拷贝
前两天写程序,有一个是对后台返回的json数据进行整理然后再使用,用到了关于json 的拷贝。我在我的一篇博客中提到过对数组的拷贝。分为深度拷贝,和浅拷贝。这里附上链接 其实对于数组的拷贝是比较简单的,大不了就自己循环一下,然后放到一个新数组中,或者是在我博客中提到的使用 ...[2019/1/7]
float浮动的一些基础常识
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content...[2019/1/7]
HTML5之多线程(Web Worker)
提到 HTML5 总是让人津津乐道,太多的特性和有趣的 API 让人耳目一新。但是很多童鞋还停留在语义化的阶段,忽视了 HTML5 的强劲之处。
这节我们来探讨一下多线程 Web-Worker。
一、明确 JavaScript 是单线程
JavaScript 语言的一大特点就是单线程,...[2019/1/7]
canvas中普通动效与粒子动效的实现代码示例
canvas用于在网页上绘制图像、动画,可以将其理解为画布,在这个画布上构建想要的效果。
canvas可以绘制动态效果,除了常用的规则动画之外,还可以采用粒子的概念来实现较复杂的动效,本文分别采用普通动效与粒子特效实现了一个简单的时钟。
普通时钟
普通动效即利用canvas的api,实...[2019/1/7]
浅谈pc和移动端的响应式的使用
身为一个前端攻城狮,是不是经常遇到各种各样的响应式问题?下面我们来说一下:
1.响应式跟自适应有什么区别?
有些人可能还不知道响应式跟自适应的区别,甚至认为他们是同一个东西,其实不是的.
自适应是最早出现的,后面才有了响应式。响应式布局等于流动网格布局,而自适应布局等于使用固定分割点来...[2019/1/7]
Axure rp8团队原型图开发
说道原型图大家都不陌生,Axure rp作为这类工具可以说在网页布局的设计给开发人员提供了很大便利,目前我只熟悉过这一种,不知道小伙伴们有没有其他好用的工具推荐给大家用一下吗。好了,废话不多说,今天给用过Axure rp的小伙伴介绍一下使用方式,及用处。
具体怎么安装的可以到百度找...[2019/1/4]
Hbuilder工具使用
现在用的版本是:HBuilder 9.1.19.201808300739
前段时间自动更新了下,也忘记了是更新后js代码不能正常代码提示,还是又发生了什么事情,导致了不能正常提示,也没时间去排查,卸载了,重新装的现在用的这个版本,不再更新先。
目前,安装了2个插件
...[2019/1/4]
【代码笔记】Web-JavaScript-JavaScript调试
一,效果图。
二,代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript 调试</title>
&l...[2019/1/4]
H5 file调用手机相机和图库(兼容安卓ios,亲测有效)
<input id="input" type="file"/>标签,iOS直接吊起相机拍照或是相册选择,但Android中只调起选择相册,没有调起相机拍照
解决办法:
只需要加上 accept="image/*" 就完美的兼容安卓和IOS了(accept表示打开的系统文件目录)...[2019/1/4]
rem布局简介rem布局简介
移动端常见布局:
1.流式布局
高度固定,宽度自适应
2.响应式布局
能够用一套代码适应不同尺寸屏幕
3.rem布局
宽高自适应,能实现整个页面像一张图片一样缩放且不失真的效果。
rem布局:
em:是一个相对单位,计算方法为用元素的带px属性值除以自身字体...[2019/1/4]
动画函数的绘制及自定义动画函数
制作动画效果离不开动画运动函数,而我们用得最多的无疑就是Tween.js。根据不同的数学公式原理,Tween.js划分出了不同的动画类型,每种动画类型里面都包含以下的缓动类型:
ease in 先慢后快
ease out 先块后慢
ease in out 先慢后快再慢
关于缓动函数,我们在 ...[2019/1/4]
前后端连载笔记
npm install @vue/cli
vue create client
前端处理: client------ > package.json------> " start" : "npm run s...[2019/1/4]
无序列表、有序列表、定义列表多样选择设置属性值
<!DOCTYPE html>
<html lang="en">
<head>
...[2019/1/4]
客户端相关行级元素、块级元素的学习客户端相关行级元素、块级元素的学习
行级元素:行内元素宽高自动设置(设置了宽高也不起作用),并排显示
<a>.................</a>:链接
<abbr>...... </abbr>:缩写
<b>.................</b>:...[2019/1/4]
基于jTopo的拓扑图设计工具库ujtopo - net-yuan
绘制拓扑图有很多开源的工具,知乎上也有人回答了这个问题:
https: www.zhihu.com/question/41026400/answer/118726253
ujtopo是基于jTopo作了一些封装,适用一些基本的场景
jTopo(Javascript Topology lib...[2019/1/2]
H5新标签(适合新手入门)
H5新标签
文档类型设定
document
HTML: sublime 输入 html:4s
XHTML: sublime 输入 html:xt
HTML5 sublime 输入 html:5 <!DOCTYPE html>
字符设定
<meta http-equiv=...[2019/1/2]
form表单提交注意事项
1、在一个form表单中,若只有一个input(不管type是什么),按回车键表单会自动提交,但是当表单中存在多个input时,按回车键不会执行任何操作,这是form表单的一个特性。
2、在一个表单中若存在一个input是submit,则按回车表单会提交;如果不想用提交按钮,可以用样式隐藏。
...[2019/1/2]
HTML5新增的几个容器模块
H5新增的几个容器块元素: 1、header:用户表示页面或某个区域的头部 2、nav:用于表示导航栏 3、aside:用于表示跟周围主题相关的附加信息 4、article:用于表示一个整体的一部分主题
5、section:表示右边的侧边栏 6、footer:用于表示页面或某个区域的脚注
现...[2019/1/2]
客户端第一天学习的相关知识客户端第一天学习的相关知识
什么是客户端?
客户端(Client)或称为用户端,是指与服务器相对应,为客户提供本地服务的程序。
第一天学习知识的总结
<!DOCTYPE>是什么意思?
<!DOCTYPE>位于HTML第一行,在<html>标签之前,用来告诉浏览器用什么文档标准,解析...[2019/1/2]
【代码笔记】Web-JavaScript-JavaScript正则表达式
一,效果图。
二,代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript 正则表达式</title>...[2018/12/29]
上传文件 点击选择文件 只展示图片类型上传文件 点击选择文件 只展示图片类型
accept="image/*" 弹框选择文件 只展示图片类型的
<input type="file" name="logourl" id="exampleInputFile" accept="image/*" cla ="form-control">
原始文件夹...[2018/12/29]
Fiddler分享
链接:https: pan.baidu.com 162YmGb7-aUZ6xDf8eRfgpw 密码:j6er
[2018/12/29]
详解webapp页面滚动卡顿的解决办法
手机浏览器在滚动当前页面(还可能是缩放页面)时,由于默认行为被阻止,导致页面被迫静止,导致用户使用体验差,感觉滚动页面有停顿感。
具体一点的解释:由于 touchstart 事件对象的 cancelable 属性为 true,也就是说它的默认行为可以被监听器通过 preventDefault(...[2018/12/29]
webapp字号大小跟随系统字号大小缩放的示例代码
最近做了一个webapp项目,混合式开发,外部原生,内部webview嵌套H5页面。前端方面采用了vue开发,适配采用的是flexible+rem做的适配。本来一切都很好,可是吧,领导说客户有的年纪大 ,看不清字体,希望网页字体可以跟随系统字号大小变化。当时心里真是...,然无奈只能想办法解决问题...[2018/12/29]
【代码笔记】Web-JavaScript-JavaScript 类型转换
一,效果图。
二,代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
&...[2018/12/27]
Git知多少!!!
第一次写博客,内心有点小激动呀!首先祝大家圣诞快乐~~啦啦啦~~好了,我要步入正题啦!今天是上班第二周,终于开始写需求啦!开森~~撒花~~
来这里第一个要学的就是git的操作啦!入职第一天发了一个大大的git操作流程文档,下面我就整理一下,为了我日后复习,大家可以一起学习。
一,理论的东西
首...[2018/12/26]
Vue -- webpack 项目自动打包压缩成zip文件
这段时间用 Vue2.0 开发项目,每次打包都会用到 npm run build 命令,但是每次部署时给后端发包都要手动zip压缩,这样一两次还行,但遇到项目板块测试和临时加急功能测试的时候,一天可能就要打包好多次,这就很烦了。所以索性在执行 npm run build命令时就打包成zip文件...[2018/12/26]
CSS水平居中的三种方法
CSS中经常会用到元素居中,那么今天我为大家分享几种水平居中的方法,下面代码都可以达到同样的居中效果,来不及解释了,快上马(码):
一、margin : 0 auto;
<head>
<meta charset="UTF-8">
<title...[2018/12/26]
【代码笔记】Web-Javascript-Javascript typeof
一,效果图。
二,代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript typeof, nul...[2018/12/25]
Adaptive PlaceholdersAdaptive Placeholders
https: wisdmlabs.com/blog/create-adaptive-placeholders-using-c
https: circleci.com/blog/adaptive-placeholder
https: tackoverflow.com/question 4...[2018/12/25]
HTML5 drag & drop 拖拽与拖放 - tracy-ling
关键词:
1. draggable:规定元素是否可拖动的,draggable=true可拖动
2. dataTransfer:拖拽对象用来传递的媒介,使用方式:event.dataTransfer
3. ondragstart:拖拽元素被拖拽时触发的事件,作用于...[2018/12/24]
移动端缩放设置
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"/>[2018/12/24]
【代码笔记】Web-Javascript-javascript break和continue语句【代码笔记】Web-Javascript-javascript break和continue语句
一,效果图。
二,代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>javascript bre...[2018/12/24]
Html5调用手机摄像头并实现人脸识别的实现
需求
混合App开发,原生壳子+webApp,在web部分调用原生摄像头功能并且在网页指定区域显示摄像头内容,同时可以手动拍照并进行人脸识别,将识别结果显示在网页上。
技术栈
vue、Html5、video标签、Android、IOS、百度AI
分析
1、使用navigat...[2018/12/24]
localStorage 设置过期时间的方法实现
localStorage除非人为手动清除,否则会一直存放在浏览器中,但是很多情况下我们可能需要localStorage有一个过期时间,比如我们将用户身份认证 token 保存在客户端,1周之内有效,超过一周则要重新登录,那么这种需求该怎么实现呢
要知道,localStorage本身并没有提供过...[2018/12/24]
CANVAS画布与SVG的区别CANVAS画布与SVG的区别
CANVAS是html5提供的新元素<canvas>,而svg存在的历史要比canvas久远,svg并不是html5专有的标签,最初svg是用xml技术(超文本扩展语言,可以自定义标签或属性)描述二维图形的语言。在H5中看似canvas与svg很像,但是,他们有巨大的差别。
CAN...[2018/12/21]
【代码笔记】Web-JavaScript-javaScript for循环【代码笔记】Web-JavaScript-javaScript for循环
一,效果图。
二,代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>javascript for...[2018/12/21]
将"a"标签当bunton使用
<a href="javascript:void(0);" style="color: red" onclick="del_product_information(''{{ data.product_id }}'')">删除</a>
[2018/12/21]
在线预览word
# eg
http: view.officeapps.live.com/op/view.aspx?src=<Document Location>
#demo
<a href="http: api.idocv.com/view/ur...[2018/12/21]
canvas 绘制双线技巧
楔子
最近一个项目,需要绘制双线的效果,双线效果表示的是轨道(类似铁轨之类的),如下图所示:
负责这块功能开发的小伙,姑且称之为L吧,最开始是通过数学计算的方式来实现这种双线,也就是在原来的路径的基础上,计算出两条路径。但是这个过程的计算算挺复杂,而是最终实现的效果很耗性能,性能损耗估计主要在于...[2018/12/21]
css选择器
1.标签选择器
代码示例
div{
..........样式
}
<div>.......</div> <div>.......</div>
这种选择器的影响范围大,一般情况下不会单独使用,会应用到层级选择器中。
...[2018/12/21]
Canvas globalCompositeOperation
在默认情况之下,如果在Canvas之中将某个物体(源)绘制在另一个物体(目标)之上,那么浏览器就会简单地把源特体的图像叠放在目标物体图像上面。
简单点讲,在Canvas中,把图像源和目标图像,通过Canvas中的 globalCompositeOperation 操作,可以得到不同的效果...[2018/12/20]
HTML5的postMessage的使用手册HTML5的postMessage的使用手册
我们在码代码的时候,经常会碰到以下跨域的情况:
1、页面内嵌套iframe,与iframe的消息传递
2、页面与多个页面之间的传递消息
针对这些令人头疼的跨域问题,html5特地推出新功能--postMe age(跨文档消息传输)。postMe age在使用时,需要传入2个参数,dat...[2018/12/20]
【代码笔记】Web-JavaScript-JavaScript switch语句
一,效果图。
二,代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>javascript switch语句</title&...[2018/12/20]
React-Native使用极光进行消息推送 - 归去来兮-不如去兮
推送作为APP几乎必备的功能,不论是什么产品都免不了需要消息推送功能,一般做RN开发的可能都是前端出身(比如我),关于android ios 都不是很懂??,所以使用第三方推送插件是比较好的解决方案
? 我选取了极光来集成推送服务的,按一些博客一步一步来的,React Native集成极光推送,...[2018/12/20]
外部容器出现塌陷现象(伪类after、before的使用)
伪类after、before的使用
::before 伪元素 :hover 伪类
#all::after{
display:table;
clear:both;
content:"";
}
#all::after:在all里面的最后添加一个虚拟的子元素after
a:...[2018/12/19]
解析Node.js通过axios实现网络请求
本次给大家分享一篇node.js通过axios实现网络请求的方法,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有不足之处,欢迎批评指正。
1、使用Npm 下载axios npm install --save axios
var update_url =...[2018/12/19]
示例Express中路由规则及获取请求参数示例Express中路由规则及获取请求参数
本次给大家分享一篇基于expre 中路由规则及获取请求参数的方法,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有不足之处,欢迎批评指正。
expre 中常见的路由规则
主要使用的路由规则是get和post两种,即
var expre = requ...[2018/12/18]
【读书笔记】Web-JavaScript-JavaScript 条件语句【读书笔记】Web-JavaScript-JavaScript 条件语句
一,效果图。
二,代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>javascript 条件语句</title>
...[2018/12/18]
H5_canvas与svg
Canvas
什么是canvas:
HTML5 的 canvas 元素是使用 JavaScript 在网页上绘制图像,canvas 元素本身是没有绘图能力的,所有的绘制工作必须在 JavaScript 内部完成。它会在网页中绘制一个画布,画布是一个矩形区域,你可以控制到画布的每一个像...[2018/12/17]