移动端 input 输入框弹出键盘时页面被吊打的解决方案

前言 IOS 的兼容永远是前端开发的一个伤心地,虽然是这样,但你也没有办法,毕竟果粉还不是一般的少,当 IOS 键盘遇到 fixed 的时候,你除了感到无助外,更多的是绝望。不过现在曙光就在眼前,只要你把这篇文章仔细阅读完。 说走就走的旅程 首先我们得知道一个事实,那就是在绝大部安卓机中,只要你按常理出牌(常用布局),一般情况下点击输入框弹出手机键盘都不会有什么问题。这里我们不妨假设一个常...

2017
10-24

Canvas 动画之来回运动的小圆

正如标题所说的,本文是要实现一个无限循环运动(直线运动)的小圆。通过本文你可以学到在 Canvas 中最基本的动画制作。这个动画有如下特点: 无限循环运动(上下来回运动) 随机速度 随机加速度 随机的圆大小 随机的圆初始位置 好了,废话不多说,我们真接来看代码,没有代码解决不了的问题: 超简单的HTML (index.html) <!DOCTYPE html> <html lang="en"> <head> <meta...

2017
10-23

JavaScript 关于元素滚动的多种场景

在这里文章虽然说是多种场景,其实说白也就是元素的内容滚动,只是对象不一样罢了(如:body 或者 div)。怎么实现元素滚动到其内容的指定位置?实现元素滚动到底部有什么应用场景?等这些问题一个个从脑中浮现。现在让我们来看看怎么实现。 首先我们最常用见或者最常用的就是浏览器默认的滚动元素 body,比如滚动到页面指定的位置,或者滚动到页面的底部,这太常见了。但是在本文中我们不用 body 来作为例...

2017
10-19

JavaScript 浅拷贝与深拷贝(对象合并)

在平时的开发中我们经常会用对对象进行合并,简单的合并,比如:用户参数也默认参数的合并。有时候需要更深层次的合并,如复杂对象的合并。而这些合并就会涉及到 JavaScript 中的浅拷贝和深拷贝。浅拷贝的思路和实现也非常的简单,深拷贝相对来说就复杂一些。 浅拷贝 方法一 看过来 // ES6 方法 浅拷贝 var a1 = { a: 1 }; var a2 = { b: 2 }; var a3 = { c: 3 }; var obj = Object.assign(a1, a2...

2017
10-16

Canvas 画圆

HTML 代码(index.html) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas 画圆 - 云库前端</title> <link rel="stylesheet" href="index.css"> <script src="index.js"></script> </head> <body> <canvas id="canvas"></canvas> <script> var ican...

2017
10-15

JavaScript HTML DOM Document 对象属性和方法

Document 对象属性 属性 描述 body 提供对 <body> 元素的直接访问。 对于定义了框架集的文档,该属性引用最外层的 <frameset>。 cookie 设置或返回与当前文档有关的所有 cookie。 domain 返回当前文档的域名。 lastModified 返回文档被最后修改的日期和时间。 referrer 返回载入当前文档的文档的 URL。 title 返回当前文档的标题。 URL 返回当前文档的 URL。 Docum...

2017
10-15

JavaScript HTML DOM Element 对象属性和方法

属性 / 方法 描述 套路 element.accessKey 设置或返回元素的快捷键。 element.attributes 返回元素属性的 NamedNodeMap。 element.childNodes 返回元素子节点的 NodeList。 element.className 设置或返回元素的 class 属性。 element.clientWidth 返回元素的可见宽度(包括padding)。 element.clientHeight 返回元素的可见高度(包括padding)。 element.offsetWidth 返回元素的宽度...

2017
10-14

Canvas 画箭头

这篇文章也比较简单,用 Canvas 来画个箭头,可以从简单的例子中学到或者巩固对 Canvas 的知识点。什么东西都不要觉得好像一眼就能看到明白了,自认为码一篇是没必要的,但我个人觉得看一篇别人的代码,不如自己码一篇代码印象更加深刻。作为敲码的人,万万不能眼高手低。 HTML 代码(index.html) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...

2017
10-13

ES6 let cost 基本命令

说明迟,那时快,ES6 说来就来,作为前端水军不得不默默地开始 ES6 的学习之旅,时不我待,该拥抱时就必需拥抱。那就让我们开始吧! 与之前的变量声明不同,到了ES6 分工就非常地明确了。不像之前的简单粗暴一个 var 走遍天下都不怕。如今 ES6 把 var 折成了两个一个是 let 一个是 cost。但是在程序中你依然可以同时使用这三个命令。那么它们之间有什么异同呢? 首先我们先来看看ES6 中的两个基本命令是如...

2017
10-12

JavaScipt 中函数声明与函数表达式的区别

在 JavaScript 中函数可以说是无处不在,没有了它,在 JavaScript 的世界里你就寸步难行,心有余而力不足。但在这篇文章里,我们不对函数作过多的分享,而是来看看 JavaScipt 中函数声明与函数表达式之间有什么区别。虽然这是一个很小的点,那是知道了有这么一回事,在以后的开发中你很有可能会快人一点。 要想知道它们之间的区别,我们只需要来看看两段代码就可以了: 函数声明 runDeclaration(); funct...

2017
10-11

本地存储 LocalStorage 封装

看完题目相信你应该知道这篇文章将会是什么样的内容了,对没错,直接贴出代码。下面就是把本地存储 LocalStorage 封装了下,在实践开发中不用第次都要重写一遍或者拷贝一份,要用本地存储时就直接引入 这个 localstorage.js 就可以了。这个文件代码真的不多: 看这里 /* * @Author: 朝夕熊 * @Date: 2017-10-10 21:44:14 * @Last Modified by: 朝夕熊 * @Last Modified time: 2017-10-10 22:32:42...

2017
10-10

移动端适配方案 flexible.js

前言 移动端适配一直以来都是前端开发中不可或缺的重要组成部分,如果没有了它,那么你做出来的页面极有可能会出现各种意外(写出来的页面与设计稿之间的差别)。所有我们得找到一种相对来说让人比较满意的解决方案,尽可能地让这种“意外”减到最少。没错今天的主角就是它“flexible.js” 。 flexible.js 之旅 flexible.js 的作用就是让你在不同的终端设备之间如鱼得水,如入无人之境。说得那么浮,一点感...

2017
10-09

H5 中关于 Mate 的基本配置项

做 H5 页面最重要的就是在各大浏览器及各大手机屏幕中做一些兼容设置或者单独设置。下面就是收集一些 H5 页面中的 Mate 配置项: 看这里 <!-- 设置 viewport --> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1" /> <!-- 启用360浏览器的极速模式(webkit) --> <meta name="renderer" content="webkit"> <!-- 避免I...

2017
10-09

Canvas save() 和 restore() 方法

最近因为要实现一些效果(合成图片),所以就接触到了 Canvas 这个HTML5 的新标签。于是二话不说就开始了Canvas 的学习之旅。虽然在项目中使用 Canvas 时没有用到  save() 和 restore() 方法,但是无意间看到了这两个方法。感觉还是的非常地有用,于是就在网上对它们俩进行了人肉搜索。 基本都是这么定义它们的使用的 save() 和 restore() 分别用来保存和恢复 Canvas 状态的。短短的一句话,虽然很明了,但...

2017
10-07

HTML5 Canvas 教程

HTML5 中的 Canvas 可以通过 JavaScript 脚本来绘制一些图形。Canvas 的默认大小为300像素×150像素(宽×高,像素的单位是px),所有主流浏览器的新版本都支持 Canvas 。 Canvas 基础 下面是 Canvas 的基本用法。 基本套路 HTML <canvas id="tutorial" width="150" height="150">你的浏览器过旧,请升级浏览器或者安装其它现代浏览器!</canvas> <canvas> 标签只有两个属性(width ...

2017
09-28

AngularJS 多个控制器共享服务

多个控制器共享同一个服务(Service),就是一个控制器操作的数据会影响到其它控制器中的数据。 下面直接贴出代码: HTML 代码 index.html <!DOCTYPE html> <html lang="en" ng-app="yk"> <head> <meta charset="UTF-8"> <title>AngularJS 多个控制器共享服务</title> <link rel="stylesheet" href="http://yunkus.com/demo/lib/css/bootstrap...

2017
09-27

Element.scrollIntoView() 用法

Element.scrollIntoView() 可以让元素滚动到可窗口可视区域。类似于我们平时用到的锚文本功能。 语法 看这里 element.scrollIntoView(); element.scrollIntoView(alignToTop); // Boolean parameter element.scrollIntoView(scrollIntoViewOptions); // Object parameter 参数 alignToTop alignToTop 为可选的布尔值类型 如果 alignToTop 为 true 或者不传,窗口会尽量滚动自身顶部与元素顶部对...

2017
09-26

iscroll 让移动 WEB 页面滚动如丝般顺滑

前言 iscroll 是一个有关于移动端滑动的解决方案,但它又不仅仅只是滑动,还有一些其它的非常好用的功能,比如:图片放大,视觉差效果。 关于 iscroll 也没什么好说的,直接点开 demo 链接,你就可以感受到如丝般顺滑原来就这么简单。 iscroll 示例 http://yunkus.com/demo/iscroll/demos/2d-scroll/index.html http://yunkus.com/demo/iscroll/demos/barebone/index.html http://yunkus.com/demo/iscr...

2017
09-24

AngularJS $timeout $interval 定时器用法

前言 原生的 JavaScript 已经给我们提示了setTimeout 和 setInterval 了,为什么 Angular 还给我们这两个东西($timeout $interval)呢?。因为在AngularJS 中如果你使用原生的setTimeout 和 setInterval 的话,在计时器里更改的值是不是自动更新到页面中的,而$timeout 和 $interval 就可以做到,也就是说 AngularJS 为我们把原生 JavaScript 的 setTimeout 和 setInterval 做了封装。 看这里 <!DOC...

2017
09-23

AngularJS ng-repeat 遍历完成(repeatFinish)

AngularJS 中的 ng-repeat 相信你已经再熟悉不过了,在这里也没有什么好说的,本文主要是想分享下 ng-repeat 完成的判断。这个判断也很常用,比如页面中的轮播图就很有可能会用到这个判断。所以我们现在就开始吧! 看这里 <!DOCTYPE html> <html lang="en" ng-app="yk"> <head> <meta charset="UTF-8"> <title>AngularJS $repeatFinish</title> <...

2017
09-23

AngularJS $cacheFactory 缓存用法

前言 缓存有很多种,比如本地缓存、会话、以及本文将要介绍的 $cacheFactory ,它们能给我们带来不少好处,比如数据的临时存储,下面就来分享分享这个好东西。 看这里 <!DOCTYPE html> <html lang="en" ng-app="yk"> <head> <meta charset="UTF-8"> <title>AngularJS $cacheFactory 缓存</title> <script src="http://yunkus.com/demo/lib/js/...

2017
09-23

移动端禁止页面滚动最佳实践

在移动端禁止页面滚动非常的有用,比如在手机端弹出一个弹窗,并带有遮罩,此时你肯定不想让页面可以滚动,毕竟这个遮罩看起来就是这种感觉。下面我们分享一段很实用的代码。代码非常的精简,但恰到好处。 看这里 function preventDefaultHandler(e){ e.preventDefault(); }; document.addEventListener('touchstart', preventDefaultHandler,false);//阻止默认滑动事件(绑定 touchstart) docum...

2017
09-20

Cordova APP 使用友盟 U-WEB 事件跟踪统计分析功能

前言 这是一篇没有什么技术含量的文章,只是在 Cordova 构建的 APP 中调用友盟 WEB 版的事件跟踪统计功能。如果是把友盟统计(https://www.umeng.com/)用到网页中,那么这篇文章就没有什么值得看的了。因为如果是放到网站中,那么就你直接把相关代码放到页面上就完事了。 友盟事件跟踪之旅 首先官方是有提供 Cordova 的 SKD 资源包。但在这里不用  SKD 资源包,而是尝试使用友盟的 U-WEB(网站统计)...

2017
09-18

移动端非常实用的插件和库

前言 本文主要分享下移动端比较常用的一些插件及库。包括 JS 库和 CSS 库。有了这些插件及库,你也可以轻松做一个移动项目,即使是我们生活中常用的 APP 中的一些效果。 JavaScript 库 有了下面这两个 JavaScript 库,就可以让你的 APP 页面有了质的飞越,效果棒棒不要不要的。 Swiper 官网地址:http://www.swiper.com.cn/ 这个插件可以实现一些导航滑动效果,页面切换效果,甚至是H5 的视觉差效果...

2017
09-17

JavaScript 判断对象是否为空

前言 在 JavaScript 的世界我们会遇到很多种意想不到的情况,更不用说如何判断对象是否为空这样的常用技巧了。本文不会长,几段代码就结束了,所以相信你应该可以在两分钟内看完。 怎么判断一个对象是否为空呢?套路也不多,就几种。我就把它们罗列出来,希望你喜欢: 空对象之旅 方法一:JSON.stringify() JSON.stringify(),用于把一个对象解析成字符串,返回值为JSON 文本的字符串。 看这里 var ...

2017
09-14

AngularJS 实现省市区三级联动功能

省市区三级联动功能无处不在,所以本文就来分享下如何用 AngularJS 实现省市区的三级联动功能。AngularJS  实现这个功能极其的简单,主要还是得看数据结构,如果数据结果合理,基本都不用写 JS 代码。不信,我们走着瞧! 省市区三级联之旅 因为是基于 AngularJS,所以直接把代码贴出来。 看这里 <!DOCTYPE html> <html lang="en" ng-app="yk"> <head> <meta charset="UTF-8"&...

2017
09-12

AngularJS ng-options 指令套路大全

前言 下拉框无处不在,我们不能小看它,因为它的功能还是很实在的。下面就把 AngularJS 中的 ng-options 指令整理成文。以备不时之需。 ng-options 指令 ng-options 指令说强大也不强大,但它可以帮助我们实现一些常用的功能,比如:下拉联动选择。ng-options 根据其处理的数据大致可以分为三大类,下面我们将逐个记录。 数组型下拉框 看这里 <!DOCTYPE html> <html lang="en" ng-app="yk...

2017
09-11

FLEX 布局中的兼容性写法汇总

前言 随着浏览器的发展 FLEX 布局已经慢慢地走进了前端世界,虽然这样,但 FLEX 在实际的使用当中我们还得考虑下它的兼容性问题。即使现在已经是移动端横行霸道的时代,并且老版本的 IE 也已经慢慢退出历史的舞台,但浏览器之间也还是坚持着自己的一套方案。所以在这里有必要,也应该为给自己整理下 FLEX 布局当中的一些兼容性写法。虽然有很多编辑器也已经很智能,自带自动补全功能。 FLEX 兼容性之旅 ...

2017
09-10

AngularJs 数据表格化(完美展示)

前言 AngularJs 的强大之处不必多说,在平时的开发中我们经常会用来表格来展示相关数据,并且可以新增、删除、修改数据,你甚至还可以按不同的关键字对数据进行排序。这个功能都是极常见的。所以在这里我们在必要用专门一篇文章来分享它。 AngularJS 数据表格化之旅 HTML 代码 <!DOCTYPE html> <html lang="en" ng-app="yk"> <head> <meta charset="UTF-8"> <title>...

2017
09-10