移动端触摸数字转盘无限滚动实现思路

先看下效果,这个转盘的数字是从0-105,可以设置起始数字,那么之前的数字就变灰,不可选取,点击 加减号,会自动转动4个数字间隔,同时也可以手动触摸拖动,拖到终端105,自动回弹不可再拖动下去,同时选中的数字自动变黄···

好啦看下gif实现效果,或者点击查看,请滑动到第三屏

 

难点分析:

1、因为一个圆是360度,数字按照一定间隔排列比较合理的是18度排一个数字,那么一个圆形只能排列20个数字,其他数字如何生成?

2、如何判断当前选中并且加黄?

3、手指触摸拖动和圆盘转动的换算关系?

4、转动如何更加平滑有一定弹性

5、如何控制相应的数字显示隐藏来达到转盘数字一直增加或者减少的效果?

继续阅读移动端触摸数字转盘无限滚动实现思路

转载:程序员好日子什么时候到头,每一个程序员改看看

这样的问题让我不胜其烦。为子女未来前途操碎了心的长辈们,长辈们的朋友们,还有微信知乎上的朋友,像候鸟一样,在一年里的两个时间:春节期间和高考报志愿前夕,准时开问。我大概六月份回答过一位长辈的咨询,他说小陈,你说的好像很有道理的样子啊,应该发篇文章我好能转给我的朋友们。我说叔叔好啊,就写就写。结果开了个头,就因为懒的原因(主要是红包没到位),一直搁在今天。最近翻看 git repo 里面一票未完成的文章,这篇蹦了出来,伸长脖子一个劲儿地向我示意:poke me,poke me,所以,就有了大家看到的这篇文章。

文章有点长,可以直接跳到底部看结论 —— 但我知道,你们其实都有结论,就是心里不踏实,要找些定心丸 —— 那就还是看下去吧。

唐太宗说:以史为镜,可以知兴替。我们把视角拉到七十年前,看看历史上程序员这个群体是如何一步步壮大的。

社会和经济的变迁

虽然程序员的祖师娘是诗人拜伦的女儿 Ada,但第一个真正的程序员,是 Alan Turing。Alan Turing 不仅提出了图灵机,他还在最早的计算机上写过代码。如果说 1946 年 ENIAC 的诞生可算做通用计算机的元年,那么,当时程序员的数量可能只有不超过 10 个。

程序员这时还算不上一个职业 —— ENIAC 走出实验室后催生出来了一批计算机,这些计算机需要有人去使用,于是有了第一代「程序员」,他们大多是半路出家的数学家和科学家。
继续阅读转载:程序员好日子什么时候到头,每一个程序员改看看

如何让一个前端工程师从入门到放弃?

好啦 是开玩笑的,就是简单给各位新世纪前端同学介绍下 应该了解哪些内容才能成为一个真正的前端工程师,就是下面我要介绍的 js资源大全!

包管理器

管理着 JavaScript 库,并提供读取和打包它们的工具。

  • npm:npm 是 JavaScript 的包管理器。官网
  • Bower:一个 web 应用的包管理器。官网
  • component:能构建更好 web 应用的客户端包管理器。官网
  • spm:全新的静态包管理器。官网
  • jam:一个专注于浏览器端和兼容 RequireJS 的包管理器。官网
  • jspm:流畅的浏览器包管理器。官网
  • Ender:没有库文件的程序库。官网
  • volo:以项目模板、添加依赖项与自动化生成的方式创建前端项目。官网
  • Duo:一个整合 Component、Browserify 和 Go 官网的最佳思想,使开发者能快速方便地组织和编写前端代码的下一代包管理器。

继续阅读如何让一个前端工程师从入门到放弃?

比特币入门教程-转自阮一峰个人博客

原文地址:http://www.ruanyifeng.com/blog/2018/01/bitcoin-tutorial.html

比特币(bitcoin)诞生于2008年的一篇论文

一个署名为中本聪的人,提出了革命性的构想:让我们创造一种不受政府或其他任何人控制的货币!这个想法堪称疯狂:一串数字,背后没有任何资产支持,也没有任何人负责,你把它当作钱付给对方,怎么会有人愿意接受?

但是,狂想居然变成了现实。随后的几年,在全世界无数爱好者的支持下,比特币网络运行起来了,越来越多的人和资本参与,星星之火,终成燎原。刚刚过去的2017年,比特币迎来了爆发式的增长,从年初的1000美元,最高涨到了2万美元,全世界都为之震动,上到政府,下到普通百姓都在关注。事实就是比特币已经并将继续改变世界。


继续阅读比特币入门教程-转自阮一峰个人博客

区块链入门教程–转自阮一峰博客

原文地址:http://www.ruanyifeng.com/blog/2017/12/blockchain-tutorial.html

区块链(blockchain)是眼下的大热门,新闻媒体大量报道,宣称它将创造未来。

可是,简单易懂的入门文章却很少。区块链到底是什么,有何特别之处,很少有解释。

下面,我就来尝试,写一篇最好懂的区块链教程。毕竟它也不是很难的东西,核心概念非常简单,几句话就能说清楚。我希望读完本文,你不仅可以理解区块链,还会明白什么是挖矿、为什么挖矿越来越难等问题。

继续阅读区块链入门教程–转自阮一峰博客

理解正则表达式—-环视

环视只进行子表达式匹配,不占有字符,匹配到的内容不保存到最终的匹配的结果,是零宽度的,它匹配的结果就是一个位置;环视的作用相当于对所在的位置加了一个附加条件,只有满足了这个条件,环视子表达式才能匹配成功。环视有顺序和逆序2种,顺序和逆序又分为肯定和否定,因此共加起来有四种;但是javascript中只支持顺序环视,因此我们这边来介绍顺序环视的匹配过程;

如下说明:

1.  (?=Expression):  

顺序肯定环视,含义是所在的位置右侧位置能够匹配到regexp.

2. (?!Expression)

顺序否定环视,含义是所在的位置右侧位置不能匹配到regexp

顺序肯定环视

先看如下图:

 

首先我们需要明白的是:^和$ 是匹配的开始和结束位置的;?= 是顺序肯定环视,它只匹配位置,不会占有字符,因此它是零宽度的。这个正则的含义是:

以字母或者数字组成的,并且第一个字符必须为小写字母开头;

匹配过程如下:

首先由元字符^取得控制权,需要以字母开头,接着控制权就交给 顺序肯定环视 (?=[a-z]); 它的含义是:要求它所在的位置的右侧是有a-z小写字母开头的才匹配成功,字符a12,第一个字符是a,因此匹配成功;我们都知道环视都是匹配的是一个位置,不占有字符的,是零宽度的,因此位置是0,把控制权交给[a-z0-9]+,它才是真正匹配字符的,因此正则[a-z0-9]+从位置0开始匹配字符串a12,且必须以小写字母开头,第一个字母是a匹配成功,接着继续从1位置匹配,是数字1,也满足,继续,数字2也满足,因此整个表达式匹配成功;最后一个$符合的含义是以字母或者数字结尾的;

顺序否定环视 

当顺序肯定环视匹配成功的话,顺序否定环视就匹配失败,当顺序肯定环视匹配失败的话,那么顺序否定环视就匹配成功;

我们先看如下图:

源字符串:aa<p>one</p>bb<div>two</div>cc 

正则:<(?!/?p\b)[^>]+>

正则的含义是:匹配除<p>之外的其余标签;

如下图:

匹配过程如下:

首先由”<” 取得控制权,从位置0开始匹配,第一个位置和第二个位置都是字符a,因此匹配失败~ 接着从位置2匹配,匹配到<, 匹配成功了,现在控制权就交给(?!/?p\b);?!是顺序否定环视,只匹配一个位置,不匹配字符,这个先不用管,首先是 /? 取得控制权,它的含义是:可匹配/,或者不匹配/, 接着往下匹配的是p字符,匹配失败,进行回溯,不匹配,那么控制权就到一位了p字符,p匹配p,匹配成功,控制权就交给\b; \b的含义是匹配单词的边界符,\b就匹配到了 > ,结果就是匹配成功,子表达式匹配就完成了;/?p\b 就匹配成功了;所以(?!/?p\b) 这个就匹配失败了;从而使表达式匹配失败;我们继续往下匹配,从b字符开始,和上面一样匹配失败,当位置是从14开始的时候 < 字符匹配到”<”,匹配成功,把控制权又交给了(?!/?p\b), 还是/?取得控制权,和上面匹配的逻辑一样,最后?p\b匹配失败了,但是(?!/?p\b) 就匹配成功了,因此这一次表达式匹配成功;如下代码匹配:

var str = “aa<p>one</p>bb<div>two</div>cc”;

// 匹配的结果为div,位置从14开始 19结束

console.log(str.match(/<(?!\/?p\b)[^>]+>/)[0]);

JavaScript 2018: 你需要和不需要深入的 – The New Stack

原文出处
JavaScript 2018: Things You Need To Know, and a Few You Can Skip – The New Stack

JavaScript 现今已发展成熟 — 我们也不再是在页面上做一些小小的互动元素了,而是使用 JavaScript 构建整个大型应用。 当然,这也使得其比过去更为复杂, 在这个变化万千的 JavaScript 生态系统中,我们也已难以知道整个系统到底有多大。
Ethan Brown,以软件工程师为职业的同时,还是 两本 JavaScript 书籍 的作者,均由 O’Reilly 出版。 Ethan Brown 花了大量的时间剖析 JavaScript,尝试着弄清楚这里面都有什么,以及一个现代 JavaScript 开发者该如何去开始迎合这些东西。
在2018里,对于聪明的开发者们可以去熟悉的东西, Brown 给出了他对 JavaScript 生态系统中各个方面最前沿,至少也是很有用的预测。有两点需要说明的是: 首先,他基于所有 JavaScript于 标准的这些变化中,指出了一些好的可以去了解的,尽管里面所罗列的一些东西可能不是你所关注的。对这些有一些大体上的了解能够让你在遇到困难难以抉择时,产生联系,知道去找谁,知道该去了解什么样的技术。
他还强调到,他所做的这些选择完全根据他个人的想法以及经验,这当然可能和你的完全不一样。Brown 说到: “这些只是我的个人想法,我们都各有各的想法,而且这其中我也会有疏漏。”
先从需要关注的点开始
WebAssembly: WebAssembly 属于 JavaScript 的一个子集, 它提供了一个针对其他语言的编译器。 如果你想将你的 C++ 代码编译成 JavaScript, WebAssembly 就是你需要了解的 — 它允许几乎任何语言运行于浏览器或者 Node 之中,而且也有了一些比较有意思的应用了。 Brown 说到:“我感觉这个技术会火,会变得非常重要。我也肯定会细心留意,并且在 2018 花些时间去更好的学习它。 ”
函数式编程: “并不是什么新的东西,也已经被 JavaScript 社区的大多数所应用, 但我觉的 2018 才是函数式编程真正达到具有质量和规模的一年”,Brown 说到。对其常见的批评都是更难去学习,更难去理解,Brown 继续说到,但这也是看待问题的角度不同:让所有人都开始使用函数式编程,在这种强制性的编程风格下所显现出的迷惑、副作用以及混乱,我们看来也是非常奇怪的。
Brown 的建议:“如果你想尝试真正严格的函数式编程,你可以看看 Elm 或者 ClojureScript, 不过,你也可以一句话从今天开始 ‘好的,我所有的代码都要变成纯函数式的了’。”
不可变性 (Immutability): 可以和函数式编程搭配在一起。 Brown 说到,“然而大部分人,第一次尝试不可变数据结构时,都会想:‘Wow, 这不太高效啊,你对所有的东西都创建了副本,所占用的内存不是很必要啊’”。但需要记住的是,Brown 继续到,你只是复制了变化的那一部分 — 其他的结构依然保持不变。 同时,在 JavaScript 中进行严格比较速度快而且开销低,大部分切换到不可变数据结构的人都表示性能提升了。
更好的是,不可变性为一些试验行为提供了天然的保护网 — 你在知道你无法修改任何已有东西,仅是创建了修改部分的副本的情况下,你会更愿意去试验那些不熟悉的东西。这对入门开发者来说也非常好。
单向数据绑定: 这是前端同学关心的东西,由 Elm 提出,被 Facebook 应用于 Flux, 进而还有 Redux, 以及现在的 AngularVue”, Brown 说到。大家都越来越发觉这是个好东西, 在 2018 年也是时候去了解它了。
单向数据绑定让你更方便地管理应用中的状态 。 当你第一次尝试的时候你会想,天啊,又要写那么多代码,有点大材小用的样子了。对于一些小型应用来说,确实是大材小用了,但一旦你的应用达到了一定的规模,将会影响你对整个应用的控制而不仅仅是你所负责的部分。因为当你在使用单向数据绑定时,你需要考虑到应用的每一层数据的流转。
计算属性名/字面属性值简写: “可以说这是 ECMAScript 6 (ES6) 的黑马级特性。但我目前并没有看到大家经常用到,我觉得会有很多地方可以用到。 他其实是一个小小的语法糖,能够让你动态的构建属性名称,对象初始化或简写对象属性值。”,Brown 说到。 “我感觉像是每周都用这个特性玩出了新花样。同时和函数式编程搭配在一起也是挺不错的, 如果你之前没见过一定要去了解一下 — 我更希望看到社区中越来越多人去使用这个特性。”

不需要担心的东西:

如 Brown 所说,至少现在,某些领域的知识可以选择跳过。
面向对象编程: “我本人并不太喜欢在 JavaScript 中使用经典的面向对象编程。我认为会有更好的模型,更好的方式去实现代码复用。所以在 JavaScript 领域中,你也会涉及到面向对象编程的知识但不必为此而感到烦恼。 ”
Generators: “这是 JavaScript 中一个比较酷的特性, 一些地方肯定会有它的使用案例,但我认为其主要的特性已经被 async/await 所替代。 我们很兴奋的在 Koa.js 中使用 Generator ,这样我们就可以用着同步的语义进行异步编程, 但现在有了 async 和 await 而且更好用。 所以除非你觉得在一些奇怪的使用案例中使用生成器比较合理的话也不用在意太多”, Brown 说到。
Symbol: “另外一个好的特性,对 JavaScript 语言的一个补充,但首先:我并没有看到大家再用他;其次,每次我尝试去使用 Symbol,除了在框架使用和序列化上出现问题外无其他收获。”,Brown 说到。总的说来,对于 JavaScript 这门语言,他并不认为 Symbol 是个合适的设计。 他的建议:保持观望的态度。

网络音频 Web Audio API介绍,h5能做的比你想象的更多

Web Audio在现代浏览器能很好的工作了!正确的发挥它的作用能够使你的网站增色不少,甚至会让人感到惊艳哦!下面就开始为大家简单翻译一下这篇转自国外的文章把!

  • Getting Started

    Let’s do some terminology. All audio operations in Web Audio API are handled inside an audio context. Each basic audio operation is performed with audio nodesthat are chained together, forming an audio routing graph. Before playing any sound, you’ll need to create this audio context. It is very similar to how we would create a context to draw inside with the <canvas> element. Here’s how we create an audio context:

    大概意思就是代码的开始你要new出来一个对象,实例化一个音频对象,英文却要巴拉巴拉一堆我真受不了啊!

    var context = new (window.AudioContext || window.webkitAudioContext)();

    Safari requires a webkit prefix to support AudioContext, so you should use that line instead of new AudioContext();
    继续阅读网络音频 Web Audio API介绍,h5能做的比你想象的更多