使用CSS3实现圆形进度条 一般我们见到的进度条通常都是矩形的，从左往右开始推进，直到 100%；但是很少有圆形的进度条，本篇文章稍微讲解下如何使用 CSS3 实现圆形进度条。若是只要实现一个圆环的话，我们都能写出来，用border和border-radius就能画出来：.demo { width: 200px; height: 200px; border: 20px solid green; box-sizing: border-box; border-radius: 50%; } 但是这样的圆环不能动啊，而且能产生进度条效果的一个重要的因素就是得从 0 开始变化，而不是一个完整的圆环在旋转，这是没有意义的。首先说下我实现的思路： 把整个圆环分成左右两部分； 左右两部分都有半个圆环在旋转，比如先让右边的半圆环，旋转到正好接住了左半部分，然后左边的半圆环开始旋转。 1. 画右半圆环 # 我们先来设计下右半部分吧，html 结构如下： 里面的.rightcircle是半个圆环，样式如下：.right { position: relative; width: 100px; height: 200px; overflow: hidden; } .rightcircle { width: 200px; height: 200px; border: 20px solid transparent; border-radius: 50%; position: absolute; box-sizing: border-box; top: 0; right: 0; border-top: 20px solid green; border-right: 20px solid green; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); /* 旋转45度 */ } 当我们把这些样式写完的时候，看到的是这个样子的，因为使用的是 div 的上半边界和右半边界，因此需要旋转一下，才能正好是我们看到的半圆环： 因为外层的 div 有一个overflow:hidden属性，我们先把这个半圆旋转到 div 的另一边隐藏了，然后再慢慢改变这个半圆环的角度，让它显示出来不就行了。稍微计算下就可以知道，-135deg正好能隐藏在外层 div 的左半部分，即：.rightcircle { width: 200px; height: 200px; border: 20px solid transparent; border-radius: 50%; box-sizing: border-box; position: absolute; top: 0; right: 0; border-top: 20px solid green; border-right: 20px solid green; transform: rotate(-135deg); /* 旋转45度时正好能显示半个圆，旋转-135度，正好能隐藏半个圆 */ } 20160226 更新这个-135deg 是怎么得出来的呢，我们来看下面的这张图：矩形的上边界和右边界正好是对应这上图圆形的上半部分和右半部分，旋转到左侧正好隐藏的话，那就是逆时针旋转-135deg 2. 为半圆添加动画 # 好了，半个圆已经隐藏住了，那么我们应该让它慢慢出来了，给.rightcircle添加一个动画：animation。/* 这里仅考虑webkit内核的情况，您可以写完整了 */ .rightcircle { -webkit-animation-name: circle_right; /* 动画名称 */ -webkit-animation-duration: 5s; /* 完成一个动画需要的时间 */ -webkit-animation-timing-function: linear; /* 动画播放的方式，linear是匀速变化 */ -webkit-animation-iteration-count: infinite; /* 动画播放的次数，infinite是无限次数 */ } @-webkit-keyframes circle_right { 0% { transform: rotate(-135deg); } 100% { transform: rotate(45deg); } } 那么左半部分就正好相反喽，这里我就不写了，你可以尝试着写一下。 3. 大功告成 # 好了，让我们把左半部分和右半部分拼接起来：.circle_process { position: relative; width: 199px; height: 200px; } .circle_process .wrapper { width: 100px; height: 200px; position: absolute; top: 0; overflow: hidden; } .circle_process .right { right: 0; } .circle_process .left { left: 0; } .circle_process .circle { width: 200px; height: 200px; border: 20px solid transparent; border-radius: 50%; box-sizing: border-box; position: absolute; top: 0; transform: rotate(-135deg); } .circle_process .rightcircle { border-top: 20px solid green; border-right: 20px solid green; right: 0; -webkit-animation: circle_right 5s linear infinite; } .circle_process .leftcircle { border-bottom: 20px solid green; border-left: 20px solid green; left: 0; -webkit-animation: circle_left 5s linear infinite; } @-webkit-keyframes circle_right { 0% { -webkit-transform: rotate(-135deg); } 50%, 100% { -webkit-transform: rotate(45deg); } } @-webkit-keyframes circle_left { 0%, 50% { -webkit-transform: rotate(-135deg); } 100% { -webkit-transform: rotate(45deg); } } 大功告成。 4. 额外功能 # 我们已经实现了一个圆形进度条，利用这个，我们可以实现一个小闹钟：function getTime() { var date = new Date(); var second = date.getSeconds(); var rightcircle = document.getElementById("rightcircle"); var leftcircle = document.getElementById("leftcircle"); var show = document.getElementById("show"); show.innerHTML = second; if (second

js中的内部属性与delete操作符 在讲解Configurable之前，我们首先来看一道面试题：a = 1; console.log( window.a ); // 1 console.log( delete window.a ); // true console.log( window.a ); // undefined var b = 2; console.log( window.b ); // 2 console.log( delete window.b ); // false console.log( window.b ); // 2 从上面的这道题可以看出两个的区别：在没有使用var声明变量时，使用delete关键词是可以进行删除的，再次获取时值就是undefined了；在使用var声明的变量，使用delete是不能删除的，再获取时值依然是2。 1. delete操作符 # 使用delete删除变量或属性时，删除成功返回true，否则返回false。如上面的例子中，delete无法删除变量a时，则返回false；而delete能成功删除变量b，则返回true。除了上述的两种情况，还有其他的各种常用变量也有能被delete删除的，也有不能被删除的。我们先不管delete这些变量时，为什么会产生这样的结果，这里只看他的返回值：删除delete数组中其中的一个元素：// 使用for~in是循环不到的，直接忽略到该元素 // 使用for()可以得到该元素，但是值是undefined var arr = [1, 2, 3, 4]; console.log( arr ); // [1, 2, 3, 4] console.log( delete arr[2] ); // true，删除成功 console.log( arr ); // [1, 2, undefined, 4] 删除function类型的变量：// chrome 不能删除；火狐可以删除 function func(){ } console.log( func ); console.log( delete func ); console.log( func ); 删除function.length，该length是获取形参的个数：function func1(a, b){ } console.log( func1.length ); // 2 console.log( delete func1.length ); // true，删除成功 console.log( func1.length ); // 0 删除常用变量：console.log( delete NaN ); // false，删除失败 console.log( delete undefined );// false console.log( delete Infinity ); // false console.log( delete null ); // true，删除成功 删除prototype，而不是删除prototype上的属性：function Person(){ } Person.prototype.name = "蚊子"; console.log( delete Person.prototype ); // false，无法删除 console.log( delete Object.prototype ); // false 删除数组和字符串的length时：var arr = [1, 2, 3, 4]; console.log( arr.length ); // 4 console.log( delete arr.length ); // false，删除失败 console.log( arr.length ); // 4 var str = 'abcdefg'; console.log( str.length ); // 7 console.log( delete str.length ); // false，删除失败 console.log( str.length ); // 7 删除obj中的属性时：var obj = {name:'wenzi', age:25}; console.log( obj.name ); // wenzi console.log( delete obj.name ); // true，删除成功 console.log( obj.name ); // undefined console.log( obj ); // { age:25 } 删除实例对象中的属性时，从以下的输出结果可以看出，使用delete删除属性时，删除的仅仅是实例对象本身的属性，而不能删除prototype上的属性，即使再删一次也是删除掉不的；若要删除prototype上的属性的属性或方法，只能是：delete Person.prototype.name：function Person(){ this.name = 'wenzi'; } Person.prototype.name = '蚊子'; var student = new Person(); console.log( student.name ); // wenzi console.log( delete student.name ); // true，删除成功 console.log( student.name ); // 蚊子 console.log( delete student.name ); // true console.log( student.name ); // 蚊子 console.log( delete Person.prototype.name );// true，删除成功 console.log( student.name ); // undefined 2. js的内部属性 # 在上面的例子中，有的变量或属性能够删除成功，而有的变量或属性则无法进行删除，那是什么决定这个变量或属性能不能被删除呢。ECMA-262第5版定义了JS对象属性中特征（用于JS引擎，外部无法直接访问）。ECMAScript中有两种属性：数据属性和访问器属性。 2.1 数据属性 # 数据属性指包含一个数据值的位置，可在该位置读取或写入值，该属性有4个供述其行为的特性： configurable:表示能否使用delete操作符删除从而重新定义，或能否修改为访问器属性。默认为true; Enumberable:表示是否可通过for-in循环返回属性。默认true; Writable:表示是否可修改属性的值。默认true; Value:包含该属性的数据值。读取/写入都是该值。默认为undefined；如上面实例对象Person中定义了name属性，其值为’wenzi’,对该值的修改都反正在这个位置 要修改对象属性的默认特征（默认都为true)，可调用Object.defineProperty()方法，它接收三个参数：属性所在对象，属性名和一个描述符对象（必须是：configurable、enumberable、writable和value，可设置一个或多个值）。如下：var person = {}; Object.defineProperty(person, 'name', { configurable: false, // 不可删除，且不能修改为访问器属性 writable: false, // 不可修改 value: 'wenzi' // name的值为wenzi }); console.log( person.name); // wenzi console.log( delete person.name ); // false，无法删除 person.name = 'lily'; console.log( person.name ); // wenzi 可以看出，delete及重置person.name的值都没有生效，这就是因为调用defineProperty函数修改了对象属性的特征；值得注意的是一旦将configurable设置为false，则无法再使用defineProperty将其修改为true（执行会报错：Uncaught TypeError: Cannot redefine property: name）; 2.2 访问器属性 # 它主要包括一对getter和setter函数，在读取访问器属性时，会调用getter返回有效值；写入访问器属性时，调用setter，写入新值；该属性有以下4个特征： [[Configurable]]:是否可通过delete操作符删除重新定义属性； [[Numberable]]:是否可通过for-in循环查找该属性； [[Get]]:读取属性时自动调用，默认：undefined; [[Set]]:写入属性时自动调用，默认：undefined; 访问器属性不能直接定义，必须使用defineProperty()来定义，如下：var person = { _age: 18 }; Object.defineProperty(person, 'isAdult', { Configurable : false, get: function () { if (this._age >= 18) { return true; } else { return false; } } }); console.log( person.isAdult ); // true 不过还是有一点需要额外注意一下，Object.defineProperty()方法设置属性时，不能同时声明访问器属性（set和get）和数据属性（writable或者value）。意思就是，某个属性设置了writable或者value属性，那么这个属性就不能声明get和set了，反之亦然。如若像下面的方式进行定义，访问器属性和数据属性同时存在：var o = {}; Object.defineProperty(o, 'name', { value: 'wenzi', set: function(name) { myName = name; }, get: function() { return myName; } }); 上面的代码看起来貌似是没有什么问题，但是真正执行时会报错，报错如下： Uncaught TypeError: Invalid property. A property cannot both have accessors and be writable or have a value 对于数据属性，可以取得：configurable,enumberable,writable和value；对于访问器属性，可以取得：configurable,enumberable,get和set。由此我们可知：一个变量或属性是否可以被删除，是由其内部属性Configurable进行控制的，若Configurable为true，则该变量或属性可以被删除，否则不能被删除。可是我们应该怎么获取这个Configurable值呢，总不能用delete试试能不能删除吧。有办法滴！！ 2.3 获取内部属性 # ES5为我们提供了Object.getOwnPropertyDescriptor(object, property)来获取内部属性。如：var person = {name:'wenzi'}; var desp = Object.getOwnPropertyDescriptor(person, 'name'); // person中的name属性 console.log( desp ); // {value: "wenzi", writable: true, enumerable: true, configurable: true} 通过Object.getOwnPropertyDescriptor(object, property)我们能够获取到4个内部属性，configurable控制着变量或属性是否可被删除。这个例子中，person.name的configurable是true，则说明是可以被删除的：console.log( person.name ); // wenzi console.log( delete person.name ); // true，删除成功 console.log( person.name ); // undefined 我们再回到最开始的那个面试题：a = 1; var desp = Object.getOwnPropertyDescriptor(window, 'a'); console.log( desp.configurable ); // true，可以删除 var b = 2; var desp = Object.getOwnPropertyDescriptor(window, 'b'); console.log( desp.configurable ); // false，不能删除 跟我们使用delete操作删除变量时产生的结果是一样的。 3. 总结 # 别看一个简简单单的delete操作，里面其实包含了很多的原理！

angular初探 AngularJS 诞生于 2009 年，由 Misko Hevery 等人创建，后为 Google 所收购。是一款优秀的前端 JS 框架，已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。跟着教程学习了几天，给我的感觉就是：不用自己再显式的用 js 给 DOM 元素绑定事件，只需添加一个 angular 特有的字段即可；像是使用后端语言那样对 DOM 进行操作，比如循环输出数组中的元素；自己写一个控制器，就能对页面进行操作。AngularJS 使用了不同的方法，它尝试去补足 HTML 本身在构建应用方面的缺陷。AngularJS 通过使用我们称为标识符(directives)的结构，让浏览器能够识别新的语法。例如： 使用双大括号语法进行数据绑定； 使用 DOM 控制结构来实现迭代或者隐藏 DOM 片段； 支持表单和表单的验证； 能将逻辑代码关联到相关的 DOM 元素上； 能将 HTML 分组成可重用的组件。 1. AngularJS 简介 # AngularJS 通过 ng-directives 扩展了 HTML。 ng-app 指令定义一个 AngularJS 应用程序。ng-app 指令标记了 AngularJS 脚本的作用域，在中添加 ng-app 属性即说明整个都是 AngularJS 脚本作用域。开发者也可以在局部使用 ng-app 指令，如，则 AngularJS 脚本仅在该 div 中运行。 ng-model 指令把元素值（比如输入域的值）绑定到应用程序。 ng-bind 指令把应用程序数据绑定到 HTML 视图。 1.1 一个简单的数据绑定 # 实时的实现输入框的值 angular 在上面的程序中，实现了在输入框中输入一个值，能马上在 p 标签中显式出来。ng-mdel指令把输入域的值绑定到应用程序变量 username，ng-bind指令把应用程序变量 username 绑定到某个段落（上面的 p 标签）的 innerHTML 上。如果去掉 html 标签上的ng-app，则功能失效 1.2 一个简单的循环输出 # 在我们使用后端语言模板的时候，通常会使用循环输出一些类似的数据。angular 也有这样的功能： angular name:{{ item.name }} age:{{ item.age }} 首先我们使用ng-init初始化一组数据 data，然后使用ng-repeat对 data 进行循环输出。ng-repeat放在哪个标签上，就是对这个标签进行循环，这里循环的是 li 标签；其中的每一项就是item，然后可以通过item.name，item.age输出 name 和 age 的值。当然，还可以不使用ng-init初始化数据，直接对数组进行循环： angular name:{{ item.name }} age:{{ item.age }} 1.3 AngularJS 过滤器 # 过滤器可以使用一个管道字符（|）添加到表达式和指令中。AngularJS 过滤器可用于转换数据： currency：格式化数字为货币格式； filter：从数组项中选择一个子集； lowercase：格式化字符串为小写； orderBy：根据某个表达式排列数组； uppercase：格式化字符串为大写 过滤器的简单使用： 大写：{{ 'wenzi'|uppercase }} 小写：{{ 'Country'|lowercase }} name:{{ item.name }} age:{{ item.age }} 1.4 控制器 # AngularJS 控制器 控制 AngularJS 应用程序的数据。ng-controller指令定义了应用程序控制器： angular {{ name }} {{ age }} {{ male }} var app = angular.module('myApp', []); // 定义Person控制器 app.controller('Person', function($scope){ $scope.name = 'wenzi'; $scope.age = 24; $scope.male = 'male'; }) angular 使用$scope对象来调用控制器，控制器的$scope 用来保存 angularJS model（模型）的对象。控制在作用域中创建了三个属性：name, age, male。控制器中还可以添加方法：app.controller("Person", function ($scope) { $scope.name = "wenzi"; $scope.age = 24; $scope.male = "male"; // 获取当前时间 $scope.getTime = function () { return new Date().getTime(); }; }); 1.5 HTTP # angular 中的$http是一个用于读取 web 服务器上数据的服务。$http.get(url)获取链接 url 中返回的数据： name:{{item.name}} age:{{item.age}} sex:{{item.sex}} var app = angular.module("myApp", []); // $http的用法跟$.ajax用法很相似 app.controller("getJson", function ($scope, $http) { $http.get("./interface.php").success(function (data) { $scope.result = data; }); }); 2. 为 DOM 添加属性 # angular 能通过ng-*为 DOM 添加属性，如： 指令值说明 ng-disabledboolean添加disabled属性 ng-showboolean显示HTML元素 ng-hideboolean隐藏HTML元素 ng-click定义angular点击事件 如下面的代码简单的介绍了这些指令的使用：点击 要隐藏的元素 现在我们来写个稍微有点复杂的程序： {{ count }} 点击+1 隐藏|显示 {{ count }} var app = angular.module("myApp", []); app.controller("toggleController", function ($scope) { $scope.myVar = false; $scope.toggle = function () { $scope.myVar = !$scope.myVar; }; }); 3. 一个 angular 应用 # 学了一些东西，让我们来写一个小的 web 应用，能记录输入框的剩余字数，能获取和删除输入框的内容【查看演示】： angular 我的笔记 保存 清除 剩余字数：100 var app = angular.module('myApp', []); app.controller('textController', function($scope){ $scope.message = ''; $scope.save = function(){ alert( $scope.message ); } $scope.left = function(){ return 100 - $scope.message.length; } $scope.reset = function(){ $scope.message = ''; } })

javascript如何添加前置0 JavaScript 中的数字是没有前置 0 的，因此需要我们自己进行操作来添加前置 0，而且还得转换成字符串。假如生成一个是一共是 4 位的有前置 0 的数据，通常我们能想到的方法是这样子的：function addPreZero(num) { if (num < 10) { return '000' + num; } if (num < 100) { return '00' + num; } if (num < 1000) { return '0' + num; } return num; } 这种方式的思路比较简单，根据当前数据的位数来补充相应个数的前置 0；不过这样的算法写起来比较麻烦，如果需要的前置 0 非常多的话，那么得写很多的if...else。还是基于这种思路，我们可以先算出这个数字有多少位，然后直接补上相应的 0 就行了：function addPreZero(num) { var t = (num + '').length, s = ''; for (var i = 0; i < 4 - t; i++) { s += '0'; } return s + num; } 这种方式的实现，是根据当前 num 的位数，来计算出所有的前置 0，然后再拼接上 num。在这个基础上，我们还可以这样考虑：比如需要一共是 10 位的有前置 0 的数据，那么首先不管当前数字是多少位的，都先补上 9 个前置 0，然后再截取这个字符串最后的 10 位，那么获取到的就是需要的数据：function addPreZero(num) { return ('000000000' + num).slice(-10); } 2022 年 6 月更新：在 ECMAScript 2017 中，字符串中新增了padStart和padEnd 两个方法，用来给字符串添加前置字符串和后置字符串。const num = 123; num.toString().padStart(10, '0'); // '0000000123' 第 1 个参数表示目标字符串的长度，若设定的长度小于当前字符串的长度，则原样返回；否则，就用第 2 个参数里的字符串进行重复填充，直到满足设定长度。实现想要的结果很多的方法，我们应该尽可能的想出更多的方法，一方面能够拓展我们的思维，另一方面也能让我们选择出更好的方式。

jquery如何禁止外层滚动条的滚动 通常情况下，当内部滚动条滚动到两端时，再接着滚动时外层的滚动条就会跟着滚动；可是有时我们希望用户只能滚动当前区域，而不触发外层（window）的滚动条，离开当前区域后，才能滚动外层的滚动条。因为用户可能一不小心滚动的幅度过大了，导致当前区域离开可视区域。在jquery中，滚动事件是scroll，而这个事件是不能阻止冒泡和阻止默认事件的。假如我们设定要禁止window的滚动条，我采取的策略是：当鼠标进入到当前区域后，则window的滚动条的高度始终是鼠标进入前的高度，如下的代码：.main{ overflow: auto; width: 400px; height: 400px; border: 1px solid #aaa; } .main p{ height: 800px; } $(function () { var scrollTop = -1; // 鼠标进入到区域后，则存储当前window滚动条的高度 $('#main').hover(function(){ scrollTop = $(window).scrollTop(); }, function(){ scrollTop = -1; }); // 鼠标进入到区域后，则强制window滚动条的高度 $(window).scroll(function(){ scrollTop!==-1 && $(this).scrollTop(scrollTop); }) }) 从上面的代码可以看到，我并没有阻止window滚动条的事件，而是用户每次滚动时，都会重新进行赋值。当然，或许还有更好的方法，欢迎大家提供，谢谢！