natalie86的专栏

原创 自我学习之es6(7)

关于ES6的模块化，首先需要配置node环境。配置方法如下：1、在nodeJS官网https://nodejs.org/en/download/，windows下载Windows Installer (.msi)，下载完后，按照安装软件的步骤一步步安装2、打开cmd，输入node -v如果有弹出版本号证明安装成功3、安装淘宝镜像（安装这个的目的是需要安装其它的工具，而这些工具基本都是国外的，所以安...

原创 自我学习之es6(6)

es6的新特性里增加了类和类的继承，其实这个特性也是向后台语言借鉴过来的，先来看下es5的时候如何构造一个对象function Human(){ this.eyes=2; this.hands=2;}Human.prototype.singing=function(){ console.log('I can sing');}let a = new Human();c

原创 自我学习之es6(5)

es6新增了三个点的功能，三个点有展开（spread）和剩余（rest）这2个功能，先来看一下展开先来看个例子，创建一个函数function fn(a,b,c){ console.log(a,b,c);}fn(1,2,3);这个打印出来是1,2,3，再看如果建一个数组，参数传的是数组呢function fn(a,b,c){ console.log(a,b,c);}let

原创 自我学习之es6(4)

来看下es6的新特性变量的解构赋值是如何来方便打印出变量的先举个例子，看下之前es5是怎么做的，先申明一个对象let obj={ firstName:'Mike', lastName:'Hurley'}let f=obj.firstName, l=obj.lastName;console.log(`${f} ${l}`);我们用f和l两个变量去接收obj对象的两个属性

原创 自我学习之es6(3)

es6引入了模板字符串的概念，大大方便了字符串的拼接，先来举个例子，看一下之前用加号的字符串拼接let firstName = 'Flowke', lastName='Hurley';let string='My name is ' + firstName + ' ' + lastName + '!';console.log(string);这个是传统的写法，打印出来是My

原创 自我学习之es6(2)

es6拓展了函数的一些方法：  1：可以给函数一个默认的参数function fn(a,b=7){ console.log(a,b) }fn(1)这里调用fn函数的时候没有给 b传参数，但由于给形参设置过一个默认的值为7，所以最后打印出来a,b的值为1,72 ：申明一个箭头函数，它是匿名的,可以给这个匿名函数传参let a = (a,b,c=90)=

原创 自我学习之es6(1)

跟着网上的视频学习了下es6的一些新的语法，在这里做一个笔记记录下，也起到一个反思和加深记忆的作用。         我们之前用的js版本是ECMAScript5，目前最新的ECMAScript6是在2015年6月正式发布的。 先来回顾一下什么是JavasScript。JavaScript一种动态类型、弱类型、基于原型的客户端脚本语言，用来给HTML网页增加动态功能。动态：在运行

转载 location对象

原创 编程练习2

任务：某班的成绩出来了，现在老师要把班级的成绩打印出来。要求最后打印出1：显示打印的日期。 格式为类似“XXXX年XX月XX日 星期X” 的当前的时间。2：计算出该班级的平均分（保留整数）同学成绩数据如下："小明:87; 小花:81; 小红:97; 小天:76;小张:74;小小:94;小西:90;小伍:76;小迪:64;小曼:76"思路：1.通过Date 对象依

原创 数组排序sort()

我们知道单纯用sort()函数有时是无法准确达到排序效果的，所以我们需要写个排序的函数再结合sort()方法function sortNum(a,b) { return a - b; //升序，如降序，把“a - b”该成“b - a”} var myarr = new Array("80","16","50","6","100","1"); document.write(mya

原创 返回/设置时间方法

get/setTime() 返回/设置时间，单位毫秒数。如果将目前日期对象的时间推迟1小时，代码如下:var mydate=new Date(); document.write("当前时间："+mydate+""); mydate.setTime(mydate.getTime() + 60 * 60 * 1000); document.write("推迟一小时时间：" +

原创 编程练习

要达到的结果：使用JS完成一个简单的计算器功能。实现2个输入框中输入整数后，点击第三个输入框能给出2个整数的加减乘除。提示：用JS取值的方法：var = document.getElementById(“id”）.value；            赋值的方法：document.getElementById(“id”）.value = 1；思路：1.创建构建运算函数count(

原创 二位数组练习

题目：在一个大学的编程选修课班里，我们得到了一组参加该班级的学生数据，分别是姓名、性别、年龄和年级，接下来呢，我们要利用JavaScript的知识挑出其中所有是大一 的女生的的名字哦。

转载 关于自增和自减

a++ ： 把（a++）作为一个整体表达式，a 的值虽然自增1，但是整个表达式的值是取 a自增 之前 的值；++a : 也把（++a）作为一个整体表达式，a 的值也自增1，但是整个表达式的值是取 a 自增 之后 的值。看实例:m=a++ 相当于 m=a,a=a+1m=++a 相当于 a=a+1,m=a 这种自加运算和自减运算,都相当于两步骤总结: a++ 是先把

转载 CSS3自定义@font-face

@font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中，随着@font-face模块的出现，我们在Web的开发中使用字体不怕只能使用Web安全字体，你们当中或许有许多人会不自然的问，这样的东西IE能支持吗？当我告诉大家@font-face这个功能早在IE4就支持了你肯定会感到惊讶。我的Blog就使用了许多这样的自定义Web字体，比如说首页的Logo，Tags以及

转载 解决ios下的微信页面背景音乐无法自动播放问题

前言在做各种HTML5场景页面的时候，插入背景音乐是一个很普遍的需求。我们都知道，iOS下的safari是无法自动播放音乐的，以至一直以来形成了一种认知，iOS是无法自动播放媒体资源的。直到微信火爆起来，发现iOS的微信里面打开的页面却可以实现自动播放。这种情况颠覆了之前的认知。但是，但是。。。最近的项目，又发现了一个头疼的问题。部分的iOS微信，打开有自动播放背景音乐的页面没有声音！最头

转载 window.location.hash 属性使用说明

location是javascript里边管理地址栏的内置对象，比如location.href就管理页面的url，用location.href=url就可以直接将页面重定向url。而location.hash则可以用来获取或设置页面的标签值。比如http://domain/#admin的location.hash="#admin"。利用这个属性值可以做一个非常有意义的事情。 很多人都喜欢收

转载 正则中需要转义的特殊字符小结

正则表达式中的特殊字符，就是一些有特殊含义的字符，如“*.txt”中的*，简单的说就是表示任何字符串的意思如果要查找文件名中有＊的文件，则需要对＊进行转义，即在其前加一个\。ls \*.txt。正则表达式有以下特殊字符。需要转义 特别字符说明$匹配输入字符串的结尾位置。如果设置了 RegExp 对象的 Multiline 

转载 最全的常用正则表达式大全——包括校验数字、字符、一些特殊的需求等等

很多不太懂正则的朋友，在遇到需要用正则校验数据时，往往是在网上去找很久，结果找来的还是不很符合要求。所以我最近把开发中常用的一些正则表达式整理了一下，在这里分享一下。给自己留个底，也给朋友们做个参考。一、校验数字的表达式 1 数字：^[0-9]*$ 2 n位的数字：^\d{n}$ 3 至少n位的数字：^\d{n,}$ 4 m-n位的数字：^\d{m,n}$ 5 零和非零开头的数

转载 手机版专题页面的注意事项

手机本身有局限，会让我们做手机网页的时候唯唯诺诺，但手机的功能确实越来越强，可以预见在不久的未来，手机可以全部实现目前PC中的功能。网络环境也会越来越好，加载速度的加快也有利于设计师发挥更大的空间。 　　响应式设计是否适合于专题设计　　如今越来越多的移动设备出现在我们身边，作为设计师对网站专题的设计进入到一个新阶段，需要考虑更多的用户访问环境，输入设备，分辨率等不同因素。响应式网页是目

转载 多层嵌套的CSS 3D动画技术详解

IE9及其以下版本完全不支持CSS 3D transforms技术，Opera 12也不支持。具体支持信息请查看caniuse.com。CSS动画是当前一种非常火爆的技术，我说的并不是一些简单的颜色变换或长短属性变换，我说的是3D变换技术；纯CSS实现的翻滚旋转立方体就是最典型的例子。网上能找到很多关于CSS动画的代码，但对于一个程序员来说，真正理解其为什么会动起来的原理是非常重要的。下面

转载 Javascript中递归造成的堆栈溢出及解决方案

关于堆栈的溢出问题，在Javascript日常开发中很常见，Google了下，相关问题还是比较多的。本文旨在描述如何解决此类问题。 首先看一个实例(当然你可以使用更容易的方式实现，这里我们仅探讨递归)：function isEven (num) {    if (num === 0) {        return true;    }    if (n

转载 10个最常见的 HTML5 面试题及答案

这是选择了10个 HTML5 面试问题并给出了答案。这是 Web 开发人员最常见的面试问题，相信你掌握了这些重要的面试问题后一定会觉得你的理解提高了。一起来看看吧。1、新的 HTML5 文档类型和字符集是？HTML5 文档类型很简单： HTML5 使用 UTF-8 编码示例： 2、HTML5 中如何嵌入音频？HTML5 支持 MP3、Wa

转载 十个JavaScript中易犯的小错误，你中了几枪？

在今天，JavaScript已经成为了网页编辑的核心。尤其是过去的几年，互联网见-证了在SPA开发、图形处理、交互等方面大量JS库的出现。如果初次打交道，很多人会觉得js很简单。确实，对于很多有经验的工程师，或者甚至是初学者而言，实现基本的js功能几乎毫无障碍。但是JS的真实功能却比很多人想象的要更加多样、复杂。JavaScript的许多细节规定会让你的网页出现很多意想不到的bug，搞懂这

转载 10款超炫的开源jquery的源码预览效果

1.Flat Surface Shader – 超炫的 3D 模拟照明效果       Flat Surface Shader 是一个超炫的 3D 模拟照明效果，可以配置使用基于 Canvas 的 2D 上下文或者基于 SVG 多边形数组绘制三角形。它还采用原生的 Float32Arrays 存储数字数据，进行高度优化的计算。可以调整颜色参数预览效果，而且可以导出图像。

转载 好的JavaScript开发人员关键看哪里

遥想当年还年少的时候，我的兴趣爱好就跨越了各种不相关的领域。我喜欢数学，如同我深爱历史那样。我的目标是成为像文艺复兴时期多才多艺的伟人那样——在多个领域都有出色表现。这是一个艰巨的任务——突然之间我发现自己正面临着“样样皆通，样样稀松”的危险。 　　我开始考虑钻研某些领域，这样至少我还可以成为一个“精通某些领域”的人。那么我该怎么做，才能既专注于某个领域，同时又能学到软件开发所需的大量知识

转载 node.js在前端这个行业中所占的比例

在软件开发领域，前端工程师曾经是一个比较纠结的职业。在Web技术真正发展起来之前的相当长一段时间里，由于技术门槛很低，前端工程师行业一直是鱼龙混杂的状态。其中很多号称是Web开发者的人实际上并没有什么专业的前端技能，有些工作就是被当做简单的力气活由美术设计师顺便做做而已。当时很多人甚至并不认为有朝一日会有这么一群人用HTML、CSS和JavaScript这三门技术谋生——他们想，这怎么可能呢——这

转载 带37种3D动画特效的跨浏览器CSS3动画框架

AllAnimation.css是一款带37种3D动画特效的跨浏览器CSS3动画框架。它可以轻松的制作出各种CSS3 3D动画效果，可以在移动手机上使用。并且使用极其简单，使用时只需要添加相应的class即可。查看演示   下载插件　　使用方法　　使用AllAnimation.css时要引入all-animation.css文件。        

转载 简单的JavaScript组件化实现

作为一名前端菜鸟，最近看react例子，根据理解自己也简单实现了一下组件的继承和事件机制。代码在这里原始的组件写法(function($) { $.pluginName = function(element, options) { var defaults = { title: '', content: '

转载 逐渐深入地理解Ajax

Ajax的基本原理是：XMLHttpRequest对象(简称XHR对象)，XHR为向服务器发送请求和解析服务器响应提供了流畅的接口。能够以异步方式从服务器获得更多信息。意味着用户不必刷新页面也能取得新数据，然后通过DOM将数据插入到页面中。XMLHttpRequest对象方法如下：about()：停止当前的请求；open(“method”,”URL”,[asyncFlag]

转载 CSS3学习笔记--media query 响应式布局

语法：@media screen and (min-width: 320px) and (max-width : 479px) media属性后面跟着的是一个 screen 的媒体类型（上面说过的十种媒体类型之一）。然后用 and 关键字来连接条件（其他关键字还有 not， only，看字面大家能理解，就不多说。），然后括号里就是一个媒体查询语句，稍微懂点css的同学都能看懂，这个

转载 适配各种移动设备的mediaquery

/* Desktops and laptops ----------- */ @media only screen and (min-width : 1224px) { /* Styles */ } /* Large screens ----------- */ @media only screen and (min-width

转载 HTML5全局属性和事件

摘要：　　全局属性和事件能够应用到所有标签元素上，在HTML4中有许多全局属性，比如id，class等。HTML5中又新增了一些特殊功能的全局属性和事件。属性：　　HTML5属性能够赋给标签元素含义和语境，下面的全局属性可用于任何 HTML5 元素。属性描述contenteditable规定

转载 CSS阴影效果(Box-shadow)用法趣味讲解

使用Box-shadow属性表现阴影效果是现代浏览器中是一个非常有用的技巧，通过它我们可以做出很多非常酷的东西。让我们来一步一步的了解box-shadow属性的基本用法，然后进一步了解::before和::after伪元素的用法。基本用法box-shadow:2px 2px 5px #000;box-shadow:0px

转载 DIV+CSS两种盒子模型（W3C盒子与IE盒子）

在辨析两种盒子模型之前，先简单说明一下什么叫盒子模型。原理：先说说我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也就是能装东西的一种箱子，也具有这些属性，所以叫它盒子模式。特点：

转载 JS运动之多物体框架--多个div变宽

如果只为div添加一个定时器的话，在多个div变宽的时候会发生问题，但是如果为每个div添加一个定时器，那么就可以实现多个物体变宽。注意：在多物体运动的情况下，所有东西不能共用。offset**会跟border冲突导致不能得到想要的结果，在这里可以用getStyle（）函数代替。function getStyle(obj, name){        if(ob

转载 JavaScript动态增删改表格数据

div { border: 1px solid #0094ff; text-align: center; width: 420px; margin: 5px auto; }        #divNumEdit { float: right; width: 90px; border: 0px; margin: 0; }        table { border-collapse:

转载 JavaScript 开发的45个经典技巧

JavaScript是一个绝冠全球的编程语言，可用于Web开发、移动应用开发（PhoneGap、Appcelerator）、服务器端开发（Node.js和Wakanda）等等。JavaScript还是很多新手踏入编程世界的第一个语言。既可以用来显示浏览器中的简单提示框，也可以通过nodebot或nodruino来控制机器人。能够编写结构清晰、性能高效的JavaScript代码的开发人员，现如今已成

转载 CSS生日快乐：CSS之父Håkon Wium Lie访谈录

20年前的今天（10月10日），Opera CTO Håkon Wium Lie发布了Cascading HTML style sheets – a proposal。假如Paul McCartney是一名Web开发者，并在今天写下《Sergeant Pepper's Lonely Hearts Club Band》，那他一定会这样写：It was twenty years a

转载 flexbox大全

flexbox大全：http://www.w3cplus.com/blog/tags/157.html?from=timeline&isappinstalled=0