\n\n

Slide In On Scroll

\n\n

Consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem\n dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora\n in aspernatur pariaturlores sunt esse magni, ut, dignissimos.

Lorem ipsum cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut\n asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt\n esse magni, ut, dignissimos.

Adipisicing elit. Tempore tempora rerum..

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui\n libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas\n laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.

\n\n

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, deserunt facilis et iste corrupti omnis tenetur\n est. Iste ut est dicta dolor itaque adipisci, dolorum minima, veritatis earum provident error molestias. Ratione magni\n illo sint vel velit ut excepturi consectetur suscipit, earum modi accusamus voluptatem nostrum, praesentium numquam,\n reiciendis voluptas sit id quisquam. Consequatur in quis reprehenderit modi perspiciatis necessitatibus saepe, quidem,\n suscipit iure natus dignissimos ipsam, eligendi deleniti accusantium, rerum quibusdam fugit perferendis et optio recusandae\n sed ratione. Culpa, dolorum reprehenderit harum ab voluptas fuga, nisi eligendi natus maiores illum quas quos et aperiam\n aut doloremque optio maxime fugiat doloribus. Eum dolorum expedita quam, nesciunt

\n\n

at provident praesentium atque quas rerum optio dignissimos repudiandae ullam illum quibusdam. Vel ad error quibusdam,\n illo ex totam placeat. Quos excepturi fuga, molestiae ea quisquam minus, ratione dicta consectetur officia omnis, doloribus\n voluptatibus? Veniam ipsum veritatis architecto, provident quas consequatur doloremque quam quidem earum expedita,\n ad delectus voluptatum, omnis praesentium nostrum qui aspernatur ea eaque adipisci et cumque ab? Ea voluptatum dolore\n itaque odio. Eius minima distinctio harum, officia ab nihil exercitationem. Tempora rem nemo nam temporibus molestias\n facilis minus ipsam quam doloribus consequatur debitis nesciunt tempore officiis aperiam quisquam, molestiae voluptates\n cum, fuga culpa. Distinctio accusamus quibusdam, tempore perspiciatis dolorum optio facere consequatur quidem ullam\n beatae architecto, ipsam sequi officiis dignissimos amet impedit natus necessitatibus tenetur repellendus dolor rem!\n Dicta dolorem, iure, facilis illo ex nihil ipsa amet officia, optio temporibus eum autem odit repellendus nisi. Possimus\n modi, corrupti error debitis doloribus dicta libero earum, sequi porro ut excepturi nostrum ea voluptatem nihil culpa?\n Ullam expedita eligendi obcaecati reiciendis velit provident omnis quas qui in corrupti est dolore facere ad hic, animi\n soluta assumenda consequuntur reprehenderit! Voluptate dolor nihil veniam laborum voluptas nisi pariatur sed optio\n accusantium quam consectetur, corrupti, sequi et consequuntur, excepturi doloremque. Tempore quis velit corporis neque\n fugit non sequi eaque rem hic. Facere, inventore, aspernatur. Accusantium modi atque, asperiores qui nobis soluta cumque\n suscipit excepturi possimus doloremque odit saepe perferendis temporibus molestiae nostrum voluptatum quis id sint\n quidem nesciunt culpa. Rerum labore dolor beatae blanditiis praesentium explicabo velit optio esse aperiam similique,\n voluptatem cum, maiores ipsa tempore. Reiciendis sed culpa atque inventore, nam ullam enim expedita consectetur id\n velit iusto alias vitae explicabo nemo neque odio reprehenderit soluta sint eaque. Aperiam, qui ut tenetur, voluptate\n doloremque officiis dicta quaerat voluptatem rerum natus magni. Eum amet autem dolor ullam.

\n\n

laborum neque repudiandae quam, cumque, voluptate veritatis itaque, placeat veniam ad nisi. Expedita, laborum reprehenderit\n ratione soluta velit natus, odit mollitia. Corporis rerum minima fugiat in nostrum. Assumenda natus cupiditate hic\n quidem ex, quas, amet ipsum esse dolore facilis beatae maxime qui inventore, iste? Maiores dignissimos dolore culpa\n debitis voluptatem harum, excepturi enim reiciendis, tempora ab ipsam illum aspernatur quasi qui porro saepe iure sunt\n eligendi tenetur quaerat ducimus quas sequi omnis aperiam suscipit! Molestiae obcaecati officiis quo, ratione eveniet,\n provident pariatur. Veniam quasi expedita distinctio, itaque molestiae sequi, dolorum nisi repellendus quia facilis\n iusto dignissimos nam? Tenetur fugit quos autem nihil, perspiciatis expedita enim tempore, alias ab maiores quis necessitatibus\n distinctio molestias eum, quidem. Delectus impedit quidem laborum, fugit vel neque quo, ipsam, quasi aspernatur quas\n odio nihil? Veniam amet reiciendis blanditiis quis reprehenderit repudiandae neque, ab ducimus, odit excepturi voluptate\n saepe ipsam. Voluptatem eum error voluptas porro officiis, amet! Molestias, fugit, ut! Tempore non magnam, amet, facere\n ducimus accusantium eos veritatis neque.

\n\n

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores adipisci quibusdam repudiandae dolor vero\n placeat esse sit! Quibusdam saepe aperiam explicabo placeat optio, consequuntur nihil voluptatibus expedita quia vero\n perferendis, deserunt et incidunt eveniet temporibus doloremque possimus facilis. Possimus labore, officia dolore!\n Eaque ratione saepe, alias harum laboriosam deserunt laudantium blanditiis eum explicabo placeat reiciendis labore\n iste sint. Consectetur expedita dignissimos, non quos distinctio, eos rerum facilis eligendi. Asperiores laudantium,\n rerum ratione consequatur, culpa consectetur possimus atque ab tempore illum non dolor nesciunt. Neque, rerum. A vel\n non incidunt, quod doloremque dignissimos necessitatibus aliquid laboriosam architecto at cupiditate commodi expedita\n in, quae blanditiis. Deserunt labore sequi, repellat laboriosam est, doloremque culpa reiciendis tempore excepturi.\n Enim nostrum fugit itaque vel corporis ullam sed tenetur ipsa qui rem quam error sint, libero. Laboriosam rem, ratione.\n Autem blanditiis laborum neque repudiandae quam, cumque, voluptate veritatis itaque, placeat veniam ad nisi. Expedita,\n laborum reprehenderit ratione soluta velit natus, odit mollitia. Corporis rerum minima fugiat in nostrum. Assumenda\n natus cupiditate hic quidem ex, quas, amet ipsum esse dolore facilis beatae maxime qui inventore, iste? Maiores dignissimos\n dolore culpa debitis voluptatem harum, excepturi enim reiciendis, tempora ab ipsam illum aspernatur quasi qui porro\n saepe iure sunt eligendi tenetur quaerat ducimus quas sequi omnis aperiam suscipit! Molestiae obcaecati officiis quo,\n ratione eveniet, provident pariatur. Veniam quasi expedita distinctio, itaque molestiae sequi, dolorum nisi repellendus\n quia facilis iusto dignissimos nam? Tenetur fugit quos autem nihil, perspiciatis expedita enim tempore, alias ab maiores\n quis necessitatibus distinctio molestias eum, quidem. Delectus impedit quidem laborum, fugit vel neque quo, ipsam,\n quasi aspernatur quas odio nihil? Veniam amet reiciendis blanditiis quis reprehenderit repudiandae neque, ab ducimus,\n odit excepturi voluptate saepe ipsam. Voluptatem eum error voluptas porro officiis, amet! Molestias, fugit, ut! Tempore\n non magnam, amet, facere ducimus accusantium eos veritatis neque.

\n\n \n\n\n" }, { "path": "13 - 图片随屏幕滚动而滑入滑出的效果/index.js", "content": "let imgs=Array.from(document.querySelectorAll(\"img\"));//转换为真正的数组\n // imgs.forEach(item=>item.addEventListener(\"scroll\",handle));\n window.addEventListener(\"scroll\",throttle(handle,100));\n // 节流函数（定时器实现方式）\n function throttle(func,wait){\n let timeflag;\n return function(){\n let content=this;\n let args=arguments;\n if(!timeflag){\n timeflag=setTimeout(function(){\n timeflag=null;\n func.apply(content,args)\n },wait);\n }\n }\n\n }\n // 事件处理函数，每2秒执行一次，停止后也会执行一次。（无首有尾）\n // 判断图片位置的函数，遍历每一个图片，判断每一个图片是否出现在视图中，来决定是否加类。\n function handle(){\n imgs.forEach(img=>{\n let imgHalfBoolean=(window.scrollY+window.innerHeight)>img.offsetTop+img.height/2;//图片划过一半的判断条件\n let imgFullBoolean=window.scrollY 值的复制：是给另外一个变量创建了一个存储空间，二者彼此独立，修改数据互不影响。 \n由此可见，基本类型，按值操作，新建的变量会将值复制给新的变量，各自的改变不会互相影响。\n\n#### 通过引用操作（浅拷贝）\n\n对象`Object`类型是按引用操作的，如果它不是基本类型中的一个，那么它就是对象，这里如果我们细究的话，JavaScript中每一个东西都可以当做对象，甚至是基本的类型（不包括`null`和`undefined`），但我们尽量不要钻这个牛角尖。\n\n一些JavaScript中的对象：\n\n`Object`\n\n`Function`\n\n`Array`\n\n`Set`\n\n`Map`\n\n那对于数组来说，情况是否一样呢？延续上面的思路,下面我们来看看数组。 \n```JS\nconst players = ['Wes', 'Sarah', 'Ryan', 'Poppy'];\nconst team = players;\nconsole.log(players, team); // [\"Wes\", \"Sarah\", \"Ryan\", \"Poppy\"] [\"Wes\", \"Sarah\", \"Ryan\", \"Poppy\"]\nteam[3] = 'Lux';\nconsole.log(players, team); // [\"Wes\", \"Sarah\", \"Ryan\", \"Lux\"] [\"Wes\", \"Sarah\", \"Ryan\", \"Lux\"]\n```\n> 结果显示原数组 plaryers 也被修改了。为什么会这样？因为 team 只是这个数组的引用，并不是它的复制。team 和 players 这两个变量指向的是同一个数组，也即是仅仅浅拷贝了指针，这个变量存储的指向原来数组存储空间的方向，两个变量指向的内容是一样的，这样修改其中一个另一个也会跟着改变。 \n\n\n#### 数组复制的解决方法（数组深拷贝）：\n- 方法一 Array.prototype.slice() \n\n由于运行 slice ，原数组不会被修改。所以如果修改这两个数组中任意一个，另一个都不会受到影响。\n```JS\nconst players = ['Wes', 'Sarah', 'Ryan', 'Poppy'];\nconst team2 = players.slice();\nteam2[3] = 'Lux2';\nconsole.log(players, team2); // [\"Wes\", \"Sarah\", \"Ryan\", \"Poppy\"] [\"Wes\", \"Sarah\", \"Ryan\", \"Lux2\"]\n```\n- 方法二 Array.prototype.concat()\n\nconcat() 方法是用来合并数组的，它也不会更改原有的数组，而是返回一个新数组，所以可以将 players 数组与一个空数组合并，得到的结果就符合预期了。\n```JS\nconst players = ['Wes', 'Sarah', 'Ryan', 'Poppy'];\nconst team3 = [].concat(players); //或者写成 team3 = players.concat();\nteam3[3] = 'Lux3';\nconsole.log(players, team3); // [\"Wes\", \"Sarah\", \"Ryan\", \"Poppy\"] [\"Wes\", \"Sarah\", \"Ryan\", \"Lux3\"]\n```\n- 方法三 ES6 扩展运算符\n\n扩展语法可以像扩展参数列表一样来扩展数组，效果与上述方法类似，但比较简洁。\n```JS\nconst players = ['Wes', 'Sarah', 'Ryan', 'Poppy'];\nconst team4 = [...players]; //扩展运算符这里实际上是“打散操作”\nteam4[3] = 'Lux4';\nconsole.log(players, team4); //[\"Wes\", \"Sarah\", \"Ryan\", \"Poppy\"] [\"Wes\", \"Sarah\", \"Ryan\", \"Lux4\"]\n```\n- 方法四 Array.from()\nArray.from() 方法从一个类似数组或可迭代对象中创建一个新的数组实例。 \n```JS\nconst players = ['Wes', 'Sarah', 'Ryan', 'Poppy'];\nconst team5 = Array.from(players);\nteam4[3] = 'Lux5';\nconsole.log(players, team4); //[\"Wes\", \"Sarah\", \"Ryan\", \"Poppy\"] [\"Wes\", \"Sarah\", \"Ryan\", \"Lux5\"]\n```\n#### object对象的复制方法（对象深拷贝）\n\n对于 Object 数据，我们用一个 person 对象来试试。\n\n先声明对象：\n```JS\nconst person = {\n name: 'Web sun',\n age: 25\n };\n ```\n然后思考一下如何可以取得它的复制，试试想当然的做法：\n```JS\nconst captain = person;\ncaptain.number = 99;\nconsole.log(person, captain);\n// Object {name: \"Web sun\", age: 25, number: 99} \n// Object {name: \"Web sun\", age: 25, number: 99}\n```\n这样好像行不通，person 的值也被更改了，那该如何才能真正复制呢,来达到两个变量之间互不影响？\n\n- 方法一 ES6的Object.assign()\n`Object.assign(target, ...sources)`用于对象的合并，将源对象中的所有可枚举属性，复制到目标对象中，并返回合并后的目标对象。后来的源对象的属性值，将会覆盖它之前的对象的属性。 \n```JS\nvar obj={\n name:'sun',\n height:'180cm'\n }\n var copyobj=Object.assign({},obj);\n copyobj.name='zhao';\n console.log(obj); //{name: \"sun\", height: \"180cm\"}\n console.log(copyobj); //{name: \"zhao\", height: \"180cm\"}\n```\n- 方法二 ES6的扩展运算符\n用于取出参数对象的所有可遍历属性，拷贝到当前属性中。 \n```JS\nvar obj={\n name:'sun',\n height:180cm\n }\n var copyobj={...obj};\n copyobj.name='zhao';\n console.log(obj); //{name: \"sun\", height: \"180cm\"}\n console.log(copyobj); //{name: \"zhao\", height: \"180cm\"}\n```\n#### 注意：上述对数组深拷贝的方法仅仅适用第一层级的值是基本数据类型的情况。若第一层级的值为对象或者数组等引用类型时，则上述方法失效。对象中若仍嵌套有对象，同样失效。\n## 拷贝所有层级\n##### 1.不仅拷贝第一层级，还能拷贝数组或对象所有层级的各项值。 \n##### 2.不是单独针对数组或对象，而是能够通用与数组、对象和其他复杂的JSON形式的对象。\n- 方法一 `JSON.parse(JSON.stringify(xxx))`\n```JS\nvar array=[{number:1},{number:2},{number:3}];\nvar copyArray=JSON.parse(JSON.stringify(array));\ncopyArray[0].number=100;\nconsole.log(array);//[{number:1},{number:2},{number:3}];\nconsole.log(copyArray); //[{number:100},{number:2},{number:3}];\n```\n> 序列化：将一个JavaScript值（数组或对象）转换为一个JSON字符串；JSON.stringify() \n反序列化：将一个JSON字符串转换为对象；JSON.parse()\n- 方法二深拷贝递归函数\n```JS\nfunction deepcopy(obj){\n if(typeof obj == 'object') { //说明参数是一个对象类型，但是数组也是对象，需要具体判断是不是数组类型。\n var result = obj.constructor==Array ? [] : {};\n for(let i in obj){ //遍历obj的每一项\n result[i]=typeof obj[i]==\"object\" ? deepcopy(obj[i]) : obj[i];\n }\n }else{\n var result = obj;\n }\n return result;\n}\n```\n" }, { "path": "14 - JavaScript 引用和值拷贝/index-FINISHED.html", "content": "\n\n\n\n \n JS Reference VS Copy\n\n\n\n\n \n\n\n\n\n" }, { "path": "14 - JavaScript 引用和值拷贝/index-START.html", "content": "\n\n\n \n JS Reference VS Copy\n\n\n\n \n\n\n\n" }, { "path": "15 - LocalStorage/README.md", "content": "\n## 效果图\n![](https://github.com/SUNNERCMS/30daysJavascript/blob/master/15%20-%20LocalStorage/GIF.gif)\n\n第十五天主要是练习`LocalStorage`（本地存储）以及事件委托的使用，使用场景是一个简单的`todo list`的应用，实现基本的添加`item`，切换完成状态，将所有`todo`项存储在`localstorage`中，保证刷新浏览器后数据不丢失。\n\n## 主要思路\n\n* 提前预定义好所有用到的变量；\n\n```Javascript\n// 添加item的按钮\nconst addItems = document.querySelector('.add-items'); \n// todolist列表\nconst itemsList = document.querySelector('.plates'); \n// 本地缓存的所有todoitem\nconst items = JSON.parse(localStorage.getItem('items')) || []; \n```\n* 为`addItems`按钮添加事件函数，添加一个新的`todo item`并存储到本地缓存；\n* 监听`checkbox`的点击事件，切换是否完成的状态，并更新本地存储，保证刷新本页面是数据不会丢失；\n* 分别设置两个监听器，监听`addItems`的`submit`事件，和`itemsList`的点击事件；\n\n## 添加item事件\n* 添加item的主要代码如下\n\n```Javascript\nfunction addItem(e) {\n // 阻止默认事件的触发，防止在提交后页面自己刷新\n e.preventDefault(); \n const text = this.querySelector('[name=item]').value;\n const item = {\n // ES6的简写形式 => text: text;\n text, \n done: false\n };\n items.push(item);\n localStorage.setItem('items', JSON.stringify(items));\n populateList(items, itemsList);\n // 添加完数据后，重置输入框 \n this.reset(); \n}\naddItems.addEventListener('submit', addItem);\n```\n* 监听`addItems`的`submit`事件，当用户点击`enter`或者点击右侧的`submit`按钮的时候触发；\n* `text,`是ES6的缩写形式，即代表`text: text；`\n*`localStorage`的常用API：\n\t* `localStorage.setItem(‘key’,value); ->` 设置本地缓存，以`key-value`的形式\n\t* `localStorage.getItem(‘key’); ->` 根据参数key取得本地缓存中对应的值\n\t* `localStorage.clear(); ->` 清空本地的缓存\n\t* `localStorage.removeItem(‘key’); ->` 删除key所对应的那一条本地缓存\n* `localStorage`中只能存储字符串，所以我们经常会用到： `JSON.stringify(object)`将一个对象转换为字符串，再使用`JSON.parse(objSting)`将一个对象字符串转换为对象\n* `this.reset();`代表将表单重置，清空表单中的值，在我们进行了一次submit之后，如果不重置表单的话，表单中的值将不会消失，这将大大影响用户体验\n\n## 切换完成状态事件\n\n```Javascript\nfunction toggleDone(e) {\n // if(!e.target.nodeName.match('INPUT')) return;\n \n // 跳过所有的input，只处理label\n if (!e.target.matches('input')) return; \n const node = e.target;\n const index = node.dataset.index;\n items[index].done = !items[index].done;\n localStorage.setItem('items', JSON.stringify(items));\n populateList(items, itemsList);\n}\nitemsList.addEventListener('click', toggleDone);\n```\n* 此处使用到了事件委托，所谓事件委托，我是这么理解的：\n\t* 假设我们队一个input列表进行了事件监听，但我们如法保证，此列表在接下来的状态下是否进行了更新，刷新等改变原来节点的操作，如果有这样的操作出现，那么我们之前的事件监听器就无法再起到监听的作用；\n\t* 但我们可以对input列表的父元素进行事件监听，让它们的父元素处于监听状态，当我们所点击的元素是其子元素的话，就告诉它的子元素，执行相应的事件；\n\t* 相当于委托父元素帮我们监听所有子元素，这样无论子元素列表进行怎么样的更新，改变，只要父元素节点不发生改变就可以持续起到监听的作用。\n\t* 通过`e.target.matches('input')`可以判断所点击的元素是不是input元素，`e.target`返回所点击的宿主元素。\n* 通过获取到所点击的列表的序号，更改其`done`属性，更新后进行存储，就可以实现完成状态的事件。\n\n## 列表显示函数\n\n```Javascript\n // 设置默认值，防止传参数出错的时候crash\nfunction populateList(populates = [], place { \n place.innerHTML = populates.map((populate, index) => {\n //之所以用‘’空字符是因为如果用null的话，会出现在html中\n return `\n

\n \n ${(populate.text)}\n

\n `; \n // join()之后一定要加''，表示空字符，否则会加入逗号，造成错误 \n }).join(''); \n}\n```\n* 将所有的列表项转化为`li`传入页面的`html`中\n* 将此函数抽象出来，以方便以后实现同样类似的操作，将一个数组中的元素动态添加到页面的一个节点中\n\n## 清除缓存\n\n```Javascript\n // 在关闭浏览器时或者刷新页面时清除缓存\n window.onbeforeunload = function (e) {\n localStorage.removeItem('items');\n e.returnValue=true; //弹出提示框阻止onunload事件的运行\n };\n```\n> onbeforeunload 事件在即将离开当前页面（刷新或关闭）时触发。该事件可用于弹出对话框，提示用户是继续浏览页面还是离开当前页面。\n注意：当该事件返回的字符串（事前设置好的event.returnValue的值）不为null或者undefined时，弹出确认窗口让用户自行选择是否关闭当前页面。（换句话说就是使用event.returnValue可以阻止onunload卸载页面，因为它会出现一个提示窗口，让用户自己判断是否离开当前页）一些浏览器将该事件返回的字符串显示在弹出窗上。从Firefox 4、 Chrome 51、Opera 38 和Safari 9.1开始，通用确认信息代替事件返回的字符串。\n\n* 有些时候，我们仅仅是为了练习`localStorage`的使用，并不想在浏览器中留下过多的缓存，那么这个方法就派上了用场。\n* 当页面重新刷新或者关闭之前，执行`localStorage.removeItem('items’);`清除页面的缓存。\n* **慎用**，尤其在生产环境中。\n\n## 整体代码架构\n\n```Javascript\nconst addItems = document.querySelector('.add-items');\nconst itemsList = document.querySelector('.plates');\nconst items = JSON.parse(localStorage.getItem('items')) || [];\n\nfunction addItem(e) {\n e.preventDefault();\n const text = this.querySelector('[name=item]').value;\n const item = {\n text, // ES6的简写形式 => text = text;\n done: false\n };\n items.push(item);\n localStorage.setItem('items', JSON.stringify(items));\n populateList(items, itemsList);\n this.reset(); // 添加完数据后，重置输入框 \n}\n\nfunction populateList(populates = [], place) { // 设置默认值，防止传参数出错的时候crash\n place.innerHTML = populates.map((populate, index) => {\n return `\n

\n \n ${(populate.text)}\n

\n `; //之所以用‘’空字符是因为如果用null的话，会出现在html中\n }).join(''); // join()之后一定要加''，表示空字符，否则会加入逗号，造成错误 \n}\n\nfunction toggleDone(e) {\n // if(!e.target.nodeName.match('INPUT')) return;\n if (!e.target.matches('input')) return; // 跳过所有的input，只处理label\n const node = e.target;\n const index = node.dataset.index;\n items[index].done = !items[index].done;\n localStorage.setItem('items', JSON.stringify(items));\n populateList(items, itemsList);\n}\n\naddItems.addEventListener('submit', addItem);\nitemsList.addEventListener('click', toggleDone);\n\npopulateList(items, itemsList);\n```\n* 在页面加载的时候，先获取本地缓存的`items`，若存在就传给变量`items`，若第一次登录或者无`item`，初始化为空数组；\n* 在页面加载的时候先加载页面的所有`todolist`，执行一遍`populateList(items, itemsList);`函数即可。\n\n\n\n" }, { "path": "15 - LocalStorage/demo.html", "content": "\n\n\n \n \n \n Document\n\n\n

LOCAL TAPAS

Loading Tapasss...

\n \n

\n \n\n" }, { "path": "15 - LocalStorage/index.html", "content": "\n\n\n\n \n LocalStorage\n \n\n\n\n \n\n \n\n

LOCAL TAPAS

Loading Tapasss...

\n \n

\n\n \n\n\n" }, { "path": "15 - LocalStorage/style.css", "content": "html {\n box-sizing: border-box;\n background:url('http://wes.io/hx9M/oh-la-la.jpg') center no-repeat;\n background-size:cover;\n min-height:100vh;\n display:flex;\n justify-content: center;\n align-items: center;\n text-align: center;\n font-family: Futura,\"Trebuchet MS\",Arial,sans-serif\n }\n *, *:before, *:after {box-sizing: inherit; }\n\n svg {\n fill:white;\n background: rgba(0,0,0,0.1);\n padding: 20px;\n border-radius: 50%;\n width:200px;\n margin-bottom: 50px;\n }\n\n .wrapper {\n padding: 20px;\n max-width: 350px;\n background: rgba(255,255,255,0.95);\n box-shadow: 0 0 0 10px rgba(0,0,0,0.1);\n }\n\n h2 {\n text-align: center;\n margin: 0;\n font-weight: 200;\n }\n\n .plates {\n margin: 0;\n padding: 0;\n text-align: left;\n list-style: none;\n }\n\n .plates li {\n border-bottom: 1px solid rgba(0,0,0,0.2);\n padding: 10px 0;\n font-weight: 100;\n display: flex;\n }\n\n .plates label {\n flex:1;\n cursor: pointer;\n\n }\n\n .plates input {\n display: none;\n }\n\n .plates input + label:before {\n content: '⬜️';\n margin-right: 10px;\n }\n\n .plates input:checked + label:before {\n content: '☑';\n }\n\n .add-items {\n margin-top: 20px;\n }\n\n .add-items input {\n padding:10px;\n outline:0;\n border:1px solid rgba(0,0,0,0.1);\n }" }, { "path": "16 - 移动鼠标让字体呈现彩虹效果/README.md", "content": "# Day16 - 鼠标移动让文字出现🌈效果中文指南\n\n## 效果图\n![](https://github.com/SUNNERCMS/30daysJavascript/blob/master/16%20-%20%E7%A7%BB%E5%8A%A8%E9%BC%A0%E6%A0%87%E8%AE%A9%E5%AD%97%E4%BD%93%E5%91%88%E7%8E%B0%E5%BD%A9%E8%99%B9%E6%95%88%E6%9E%9C/show.PNG)\n\n鼠标移动时，元素的字体阴影随着鼠标移动的方向发生改变，达到字体阴影随着鼠标一起走的效果。\n## 基础知识\n#### text-shadow\n `text-shadow: h-shadow v-shadow blur color; `\n`none`：无阴影\n``①：第1个长度值用来设置对象的阴影水平偏移值。可以为负值\n``②：第2个长度值用来设置对象的阴影垂直偏移值。可以为负值\n``③：如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值\n``：设置对象的阴影的颜色。\n\n#### 解构赋值\n> [参考文档](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)\n\n解构赋值（destructuring assignment）语法是一个Javascript表达式，它使得从数组或者对象中提取数据赋值给不同的变量成为可能。\n\n```js\nlet a, b, rest;\n\n/* array 解构赋值 */\n[a, b] = [1, 2];\nconsole.log(a); // 1\nconsole.log(b); // 2\n\n[a, b, ...rest] = [1, 2, 3, 4, 5];\nconsole.log(a); // 1\nconsole.log(b); // 2\nconsole.log(rest); // [3, 4, 5]\n\n/* object 解构赋值:这里的小括号不能掉 */\n({a, b} = {a:1, b:2});\nconsole.log(a); // 1\nconsole.log(b); // 2\n\n/* object & ...rest 解构赋值 */\n({a, b, ...rest} = {a:1, b:2, c:3, d:4});\n// {a: 1, b: 2, c: 3, d: 4}\n\nrest;\n// {c: 3, d: 4}\n```\n#### MouseEvent\n\n![](http://om1c35wrq.bkt.clouddn.com/D6300A0F-CD68-4CE2-AEB7-22DF2CA6FF3F.png)\n[https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/pageY](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent)\n\n[clientX](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientX) 设置或获取鼠标指针位置相对于当前窗口的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。 \n[clientY](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientY) 设置或获取鼠标指针位置相对于当前窗口的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。 \n[offsetX](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/offsetX) 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。 \n[offsetY](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/offsetY) 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。 \n[screenX](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/screenX) 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。 \n[screenY](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/screenY) 设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。 \n[x](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/x) 设置或获取鼠标指针位置相对于父文档的 x 像素坐标(亦即相对于当前窗口)。 \n[y](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/y) 设置或获取鼠标指针位置相对于父文档的 y 像素坐标(亦即相对于当前窗口)。 \n[pageX](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/pageX) 设置或获取指针位置相对于整个文档的x坐标 \n[pageY](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/pageY) 设置或获取指针位置相对于整个文档的y坐标 \n\n#### 页面元素offset的几个属性示例\n\n* HTMLElement.offsetParent：是一个只读属性，指向最近的包含该元素的定位元素.如果没有定位的元素，则 offsetParent 为最近的 table 元素对象或根元素（标准模式下为 html；quirks 模式下为 body）。当元素的 style.display 设置为 \"none\" 时，offsetParent 返回 null。\noffsetParent 很有用，因为 _offsetTop_ 和 _offsetLeft_ 都是相对于其内边距边界的。 \n* HTMLElement.offsetTop：指的是当前元素到其offsetParent指向元素的__上边距__的距离。 \n* HTMLElement.offsetLeft：指的是当前元素到其offsetParent指向元素的__左边距__的距离。 \n* HTMLElement.offsetHeight：指的是当前元素的__高度__，包含__content，padding，border__的高度值，但不包括__margin__的值。 \n* HTMLElement.offsetWidth：指的是当前元素的__宽度__，包含__content，padding，border__的高度值，但不包括__margin__的值。 \n\n## js代码\n\n```javascript\nconst hero = document.querySelector('.hero');\nconst text = hero.querySelector('h1');\nconst walk = 40; // 鼠标左右移动共移动的距离\n\nfunction draw(e){\n const { offsetWidth: width, offsetHeight: height} = hero;\n let { offsetX: x, offsetY: y} = e;\n\n // 使鼠标移动到中间元素上，x、y的值连续变化\n if(e.target !== this){\n // if(e.target == text){\n x = x + e.target.offsetLeft;\n y = y + e.target.offsetTop;\n }\n // const xaisx = (x/width*walk)-(walk/2);\n // const yaisx = (y/height*walk)-(walk/2);\n const xaisx = Math.floor((x/width*walk)-(walk/2));\n const yaisx = Math.floor((y/height*walk)-(walk/2));\n text.style.textShadow = `\n ${xaisx}px ${yaisx * -1}px 2px rgba(0,255,0,0.7),\n ${xaisx * -1}px ${yaisx}px 2px rgba(255,0,0,0.7),\n ${yaisx}px ${xaisx * -1}px 2px rgba(188,188,188,0.7),\n ${yaisx * -1}px ${xaisx}px 2px rgba(0,0,255,0.7) \n `; // 多写几个就有了霓虹灯的效果\n}\nhero.addEventListener('mousemove',draw);\n```\n* 分别获取到鼠标所在位置相对于页面左侧和顶端的距离，将这两个距离映射为自己想要移动的距离上（`walk`）；\n* 其中当鼠标移动中间的文字上的时候，由于`e.target`变化了，所以造成x的值不连续，因此需要监测`e.target`的值，判断是否指在了文字上；\n* 为元素设置字体阴影，text-shadow样式，也可以设置多个，达到类似霓虹灯的效果；\n* 对元素添加`mousemove`事件。\n\n\n" }, { "path": "16 - 移动鼠标让字体呈现彩虹效果/index.html", "content": "\n\n\n\n \n Mouse Shadow\n\n\n\n\n

🔥liyc1215

\n\n \n\n \n\n\n" }, { "path": "17 - 数组排序/README.md", "content": "## Day17 - Sort Without Articles(无冠词排序）\n### 效果图\n\n![](https://github.com/SUNNERCMS/30daysJavascript/blob/master/17%20-%20%E6%95%B0%E7%BB%84%E6%8E%92%E5%BA%8F/show.PNG)\n##### 实现效果：对列表中列表项内容进行无冠词排序，在排序时不考虑a,an,the（大小写）的影响，点击ascending按钮进行升序，按下descending进行降序。\n### 源码分析\n```CSS\nbody{\n background: url(\"https://source.unsplash.com/nDqA4d5NL0k/2000x2000\");\n background-size:cover;\n padding:50px;\n display:flex;\n flex-direction: column; /*这里是将ul,和div进行垂直居中排列，二者相对位置是上下，不加的话相对位置水平*/\n align-items:center;\n min-height:100vh;\n}\n```\n```HTML\n

\n \n \n

\n```\n> 这里给两个按钮进行命名，用以区分两个按钮，在进行CSS布局时使用`flex-direction：column`将ul和div处于竖直布局。\n```JS\nconst button=[...document.querySelectorAll(\"button\")];//使用扩展运算符，这里是打散，将伪数组转化为真正的数组\nbutton.forEach(item=>item.addEventListener(\"click\",paixu));\n```\n> 这里取得所有的按钮元素，并给每个按钮添加一个鼠标点击事件，注意项：伪元素转换为真正元素，可以使用扩展运算符，也可以使用`Array.form()`. \n\n排序函数：\n```JS \n//用sort比较函数以及del函数将每一项去除完冠词后进行比较，然后根据比较条件的正负，对原来项进行排序,sort会改变原数组\nfunction paixu(e){\n let flag=this.getAttribute(\"name\");//使用name值对相同元素进行区别\n if(flag==\"ascending\"){\n bands.sort((a,b)=>del(a)>del(b)?1:-1); \n }else{\n bands.sort((a,b)=>del(a)>del(b)?-1:1);\n }\n show(bands,bandsele);\n}\n```\n> 这里的思路：刚开始使用的是两个函数，点击不同的按钮跳转到各自的事件处理函数上去。但是写完发现这两个函数及其相似，过于冗余，使用了name属性，然后当点击不同的按钮时，获取各自的name值，然后根据name值来判断点击的是哪一个按钮，来处理升序还是降序。 \n\n这里涉及的知识点： \n- 1.使用`get.Attribute()`来获取属性值，但是具体获取那个元素的，这里使用了事件项event,这里的this就是e.target：表示当前元素。 \n- 2.sort数组的排序函数，根据判断程序来判断条件的正负，正的升序，负的降序，会改变原来的数组，所以，在最后有个显示的语句show(bands,bandsele); \n\n删去冠词的函数： \n```JS\n // 取出冠词a,an,the的函数，返回一个新的字符串\n function del(item){\n return item.replace(/^(a|an|the)\\s{1}/ig,''); \n }\n```\n> \\s{1}表示有一个空格,replace返回的事一个新字符串。 \n\n列表项显示函数：\n```JS\n //将数组中的元素进行显示在指定列表中的函数,遍历整个数组元素，然后将返回的元素进行拼接整体显示在innerHTML\n function show(arr,place){\n place.innerHTML=arr.map(item=>{return `

${item}

`}).join('');\n }\n```\n> 这个函数相当实用，map函数返回一个新的数组。\n" }, { "path": "17 - 数组排序/index.html", "content": "\n\n\n \n 无冠词排序\n \n\n\n

\n \n \n

\n \n\n" }, { "path": "18 - Day18 - Reduce、Map混合使用计算时分秒/README.md", "content": "## Day18 - Reduce、Map混合使用计算时分秒\n### 效果图\n\n![](https://github.com/SUNNERCMS/30daysJavascript/blob/master/18%20-%20Day18%20-%20Reduce%E3%80%81Map%E6%B7%B7%E5%90%88%E4%BD%BF%E7%94%A8%E8%AE%A1%E7%AE%97%E6%97%B6%E5%88%86%E7%A7%92/show.PNG)\n\n第18天挑战的内容主要是如何将一系列的`data-time`加起来，最终计算总时间，总时间用时分秒显示。 \n挑战升级：点击显示时长按钮将每个video的时间显示出来，将选中的videos进行总时长的计算。\n\n### 代码解析\ncss页面布局和示例17：无冠词排序基本一致\n主要分析JavaScript代码：\n```JS\n \n```\n> 主要内容就是两部分: \n1、获得各项的data-time值，然后进行累加\n2、根据总秒数进行时分秒的计算 \n\n `let [mins,seconds] = datatime.split(\":\").map(item=>parseFloat(item));` \n 解构赋值:这里是将时和秒数进行切割形成新的数组，然后对数组中的每一项用parseFloat()进行字符串转换为数值，然后进行解构赋值，例如：[mins,seconds]=[03,58];这里将03赋值给mins,将58赋值给seconds. \n \n `input.value=Math.floor(sum/3600)+\"个小时\"+Math.floor((sum%3600)/60)+\"分\"+sum%60+\"秒\";` \n \n总秒数除以3600得到的商就是小时个数，然后进行向下取整； \n总秒数对3600取余，实际得到的是出去小时后还剩下多少秒，然后对剩下的秒数除以60（一分钟60秒）得到有多少分钟； \n总秒数对60取余：即是说总秒数中把能凑成60的，也就是说能组成分钟的除去后还剩多少秒，就是要求的秒数。\n" }, { "path": "18 - Day18 - Reduce、Map混合使用计算时分秒/index.html", "content": "\n\n\n\n \n Adding Up Times with Reduce\n \n\n\n\n

\n Video 1\n
\n Video 2\n
\n Video 3\n
\n Video 4\n
\n Video 5\n
\n Video 6\n
\n Video 7\n
\n Video 8\n
\n Video 9\n
\n Video 10\n
\n Video 11\n
\n Video 12\n
\n Video 13\n
\n Video 14\n
\n Video 15\n
\n Video 16\n
\n Video 17\n
\n Video 18\n
\n Video 19\n
\n Video 20\n
\n Video 21\n
\n Video 22\n
\n Video 23\n
\n Video 24\n
\n Video 25\n
\n Video 26\n
\n Video 27\n
\n Video 28\n
\n Video 29\n
\n Video 30\n
\n Video 31\n
\n Video 32\n
\n Video 33\n
\n Video 34\n
\n Video 35\n
\n Video 36\n
\n Video 37\n
\n Video 38\n
\n Video 39\n
\n Video 40\n
\n Video 41\n
\n Video 42\n
\n Video 43\n
\n Video 44\n
\n Video 45\n
\n Video 46\n
\n Video 47\n
\n Video 48\n
\n Video 49\n
\n Video 50\n
\n Video 51\n
\n Video 52\n
\n Video 53\n
\n Video 54\n
\n Video 55\n
\n Video 56\n
\n Video 57\n
\n Video 58\n

\n \n \n

\n \n\n\n" }, { "path": "19 - Webcam Fun/README.md", "content": "# Day19 - 摄像、拍照，滤镜中文指南\n## 效果图\n![](http://om1c35wrq.bkt.clouddn.com/day19.gif)\n![](http://om1c35wrq.bkt.clouddn.com/day19-red%E6%95%88%E6%9E%9C%E5%9B%BE.png)\nJS30天第19天挑战的是如何调用摄像头录像、播放，如何捕捉视频将其绘制`canvas`，还有拍照，以及滤镜的制作。\n## 运行项目\n1. 通过`npm install`安装依赖包\n2. 通过`npm start`启动服务器\n3. 浏览器直接访问`http://localhost:3000`\n\n```js\nliyuechun:19 - Webcam Fun yuechunli$ pwd\n/Users/liyuechun/Documents/js30/JavaScript30-liyuechun/19 - Webcam Fun\nliyuechun:19 - Webcam Fun yuechunli$ ls\nREADME.md\t\tpackage-lock.json\tscripts.js\nindex.html\t\tpackage.json\t\tstyle.css\nliyuechun:19 - Webcam Fun yuechunli$ npm install\n\n> fsevents@1.1.2 install /Users/liyuechun/Documents/js30/JavaScript30-liyuechun/19 - Webcam Fun/node_modules/fsevents\n> node install\n\n[fsevents] Success: \"/Users/liyuechun/Documents/js30/JavaScript30-liyuechun/19 - Webcam Fun/node_modules/fsevents/lib/binding/Release/node-v57-darwin-x64/fse.node\" already installed\nPass --update-binary to reinstall or --build-from-source to recompile\nnpm WARN gum@1.0.0 No repository field.\n\nadded 411 packages in 5.921s\nliyuechun:19 - Webcam Fun yuechunli$ npm start\n\n> gum@1.0.0 start /Users/liyuechun/Documents/js30/JavaScript30-liyuechun/19 - Webcam Fun\n> browser-sync start --server --files '*.css, *.html, *.js'\n\n[Browsersync] Access URLs:\n --------------------------------------\n Local: http://localhost:3000\n External: http://192.168.1.116:3000\n --------------------------------------\n UI: http://localhost:3001\n UI External: http://192.168.1.116:3001\n --------------------------------------\n[Browsersync] Serving files from: ./\n[Browsersync] Watching files...\n```\n\n## 主要思路\n\n* 获取到浏览器的摄像头的影像\n* 将影像的记录导出到canvas中\n* 通过获取canvas中的图片信息，对图片添加滤镜\n\n\n## Browsersync\n\n#### 项目结构\n\n![](http://om1c35wrq.bkt.clouddn.com/Snip20170809_21.png)\n\n#### 了解Browsersync\n\n省时的浏览器同步测试工具,Browsersync能让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面。更重要的是`Browsersync可以同时在PC、平板、手机`等设备下进项调试。您可以想象一下：“假设您的桌子上有pc、ipad、iphone、android等设备，同时打开了您需要调试的页面，当您使用browsersync后，您的任何一次代码保存，以上的设备都会同时显示您的改动”。无论您是前端还是后端工程师，使用它将提高您30%的工作效率。\n\n![](http://om1c35wrq.bkt.clouddn.com/sync-demo.gif)\n\n有了它，您不用在多个浏览器、多个设备间来回切换，频繁的刷新页面。更神奇的是您在一个浏览器中滚动页面、点击等行为也会同步到其他浏览器和设备中，这一切还可以通过可视化界面来控制。\n\n![](http://om1c35wrq.bkt.clouddn.com/scroll-demo.gif)\n\n## 获取影像\n\n```javascript\nfunction getVideo(){\n navigator.mediaDevices.getUserMedia({video:true,audio:false})\n .then(videostream => {\n console.log(videostream);\n video.src = URL.createObjectURL(videostream); // 创建url（creates a URL for the specified object）\n video.play();\n })\n .catch((err) => {\n console.error('OH,Don\\'t have permission to use your local cam!',err);\n });\n}\n```\n\n- [MediaDevices.getUserMedia()](https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia)\n> `MediaDevices.getUserMedia()`方法提示用户允许使用一个视频和/或一个音频输入设备，例如相机或屏幕共享和/或麦克风。如果用户给予许可，就返回一个`Promise`对象，`MediaStream`对象作为此`Promise`对象的`Resolved`［成功］状态的回调函数参数，相应的，如果用户拒绝了许可，或者没有媒体可用的情况下，`PermissionDeniedError`或者`NotFoundError`作为此`Promise`的`Rejected`［失败］状态的回调函数参数。注意，由于用户不会被要求必须作出允许或者拒绝的选择，所以返回的`Promise`对象可能既不会触发`resolve`也不会触发`reject`。\n\n\n- [URL.createObjectURL()](https://developer.mozilla.org/zh-CN/docs/Web/API/URL/createObjectURL)。\n> `URL.createObjectURL()` 静态方法会创建一个`DOMString`，其中包含一个表示参数中给出的对象的`URL`。这个`URL` 的生命周期和创建它的窗口中的`document` 绑定。这个新的`URL`对象表示指定的`File` 对象或`Blob` 对象。\n\n## canvas绘图\n```javascript\nfunction printToCanvas(){\n let width = video.videoWidth;\n let height = video.videoHeight;\n canvas.height = height;\n canvas.width = width; // 勿忘：设置canvas的宽和高\n console.log(width,height);\n return setInterval(() => {\n ctx.drawImage(video,0,0,width,height);\n\n // get the image data\n let imagedata = ctx.getImageData(0,0,width,height);\n // console.log(imagedata.data);\n\n // mess the image data\n // imagedata = redEffect(imagedata);\n // imagedata = rgbsplit(imagedata);\n // ctx.globalAlpha = 0.2;\n imagedata = greenScreen(imagedata);\n\n // put the image data back\n ctx.putImageData(imagedata,0,0);\n },16);\n}\n```\n* `ctx.drawImage()`\n>它能够将当前的视频流（video）中的一帧画在canvas中。\n\n- [getImageData()](https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/getImageData)\n> `ctx.getImageData()`返回一个ImageData对象，用来描述canvas区域隐含的像素数据，这个区域通过矩形表示，起始点为(sx, sy)、宽为sw、高为sh。\n\n- [putImageData()](https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/putImageData)\n> `ctx.putImageData()`:该方法是 Canvas 2D API 将数据从已有的 ImageData 对象绘制到位图的方法。如果提供了脏矩形，只能绘制矩形的像素。\n\n- imagedata信息\n> imagedata中有大量的数据，其中分别代表了图片的颜色信息，分别为red，green，blue，alpha的值，因此我们可以同添加自定义滤镜，通过改变颜色的rgba的值，控制页面的效果。\n\n## 摄像记录导出到canvas中\n\n```javascript\nfunction takePhoto(){\n // 播放音效\n snap.currentTime = 0;\n snap.play();\n \n // 获取图像数据\n let data = canvas.toDataURL('image/jpeg');\n // console.log(data);\n let link = document.createElement('a');\n link.href = data;\n link.setAttribute('downlond','handsome');\n link.innerHTML = `

`\n strip.insertBefore(link,strip.firstChild);\n}\n```\n- 在没次点击照相的时候，都要求播一遍音效，并且为了模拟现实情况，我们在用户点击时，设置当前的播放时间为0，再播放音效。\n- [canvas.toDataURL('image/jpeg');](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toDataURL)方法返回一个包含图片展示的 data URI 。可以使用 type 参数其类型，默认为 PNG 格式。图片的分辨率为96dpi。 \n- 接下来新建一个a元素，设置其href的值为data。在插入在文档中。实现截图成功的效果。\n## 自定义滤镜\n\n```javascript\n// 红色特效滤镜\nfunction redEffect(imagedata){\n for(let i = 0;i {\n levels[input.name] = input.value;\n });\n\n for (i = 0; i < pixels.data.length; i = i + 4) {\n red = imagedata.data[i + 0];\n green = imagedata.data[i + 1];\n blue = imagedata.data[i + 2];\n alpha = imagedata.data[i + 3];\n\n if (red >= levels.rmin\n && green >= levels.gmin\n && blue >= levels.bmin\n && red <= levels.rmax\n && green <= levels.gmax\n && blue <= levels.bmax) {\n // take it out!\n imagedata.data[i + 3] = 0;\n }\n }\n\n return imagedata;\n}\n```\n这部分主要定义了三个滤镜，由于我们通过`ctx.getImageData`可以获取到页面颜色的rgba的值，因此我们添加滤镜的原理也是这样，通过循环改变一张图片中的所有rgba的值即可。\n" }, { "path": "19 - Webcam Fun/index.html", "content": "\n\n\n \n Get User Media Code Along!\n \n\n\n\n

\n \n

\n Red Min:\n \n Red Max:\n \n\n
\n\n Green Min:\n \n Green Max:\n \n\n
\n\n Blue Min:\n \n Blue Max:\n \n

\n\n

\n\n \n\n\n\n" }, { "path": "19 - Webcam Fun/package.json", "content": "{\n \"name\": \"gum\",\n \"version\": \"1.0.0\",\n \"description\": \"\",\n \"main\": \"scripts.js\",\n \"scripts\": {\n \"start\": \"browser-sync start --server --files '*.css, *.html, *.js'\"\n },\n \"author\": \"\",\n \"license\": \"ISC\",\n \"devDependencies\": {\n \"browser-sync\": \"^2.12.5\"\n }\n}\n" }, { "path": "19 - Webcam Fun/scripts.js", "content": "const video = document.querySelector('.player');\nconst canvas = document.querySelector('.photo');\nconst ctx = canvas.getContext('2d');\nconst strip = document.querySelector('.strip');\nconst snap = document.querySelector('.snap');\n\nfunction getVideo(){\n navigator.mediaDevices.getUserMedia({video:true,audio:false})\n .then(videostream => {\n console.log(videostream);\n video.src = URL.createObjectURL(videostream); // 创建url（creates a URL for the specified object）\n video.play();\n })\n .catch((err) => {\n console.error('OH,Don\\'t have permission to use your local cam!',err);\n });\n}\n\nfunction printToCanvas(){\n let width = video.videoWidth;\n let height = video.videoHeight;\n canvas.height = height;\n canvas.width = width; // 勿忘：设置canvas的宽和高\n console.log(width,height);\n return setInterval(() => {\n ctx.drawImage(video,0,0,width,height);\n\n // get the image data\n let imagedata = ctx.getImageData(0,0,width,height);\n // console.log(imagedata.data);\n\n // mess the image data\n imagedata = redEffect(imagedata);\n // imagedata = rgbsplit(imagedata);\n // ctx.globalAlpha = 0.2;\n // imagedata = greenScreen(imagedata);\n\n // put the image data back\n ctx.putImageData(imagedata,0,0);\n },16);\n}\n\nfunction takePhoto(){\n // 播放音效\n snap.currentTime = 0;\n snap.play();\n\n // 获取图像数据\n let data = canvas.toDataURL('image/jpeg');\n // console.log(data);\n let link = document.createElement('a');\n link.href = data;\n link.setAttribute('downlond','handsome');\n link.innerHTML = `

`\n strip.insertBefore(link,strip.firstChild);\n}\n\n// 红色特效滤镜\nfunction redEffect(imagedata){\n for(let i = 0;i {\n levels[input.name] = input.value;\n });\n\n for (i = 0; i < pixels.data.length; i = i + 4) {\n red = imagedata.data[i + 0];\n green = imagedata.data[i + 1];\n blue = imagedata.data[i + 2];\n alpha = imagedata.data[i + 3];\n\n if (red >= levels.rmin\n && green >= levels.gmin\n && blue >= levels.bmin\n && red <= levels.rmax\n && green <= levels.gmax\n && blue <= levels.bmax) {\n // take it out!\n imagedata.data[i + 3] = 0;\n }\n }\n\n return pixels;\n}\n\ngetVideo();\nvideo.addEventListener('canplay',printToCanvas);\n" }, { "path": "19 - Webcam Fun/style.css", "content": "html {\n box-sizing: border-box;\n}\n\n*, *:before, *:after {\n box-sizing: inherit;\n}\n\nhtml {\n font-size: 10px;\n background:#ffc600;\n}\n\n.photobooth {\n background:white;\n max-width:150rem;\n margin: 2rem auto;\n border-radius:2px;\n}\n\n/*clearfix*/\n.photobooth:after {\n content: '';\n display: block;\n clear: both;\n}\n\n.photo {\n width:100%;\n float:left;\n}\n\n.player {\n position: absolute;\n top:20px;\n right: 20px;\n width:200px;\n}\n\n/*\n Strip!\n*/\n\n.strip {\n padding:2rem;\n}\n.strip img {\n width:100px;\n overflow-x: scroll;\n padding:0.8rem 0.8rem 2.5rem 0.8rem;\n box-shadow:0 0 3px rgba(0,0,0,0.2);\n background:white;\n}\n\n.strip a:nth-child(5n+1) img { transform: rotate(10deg); }\n.strip a:nth-child(5n+2) img { transform: rotate(-2deg); }\n.strip a:nth-child(5n+3) img { transform: rotate(8deg); }\n.strip a:nth-child(5n+4) img { transform: rotate(-11deg); }\n.strip a:nth-child(5n+5) img { transform: rotate(12deg); }\n" }, { "path": "20 - Speech Detection/README.md", "content": "# Day20 - 语言识别系统中文指南\n\n> 本文出自：[春哥个人博客：http://www.liyuechun.org](http://liyuechun.org)\n> 作者：©[黎跃春-追时间的人](http://weibo.com/mobiledevelopment)\n> 简介：[JavaScript30](https://javascript30.com) 是 [Wes Bos](https://github.com/wesbos) 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 20 篇。完整中文版指南及视频教程在 [从零到壹全栈部落](http://kongyixueyuan.com/course/4188)。\n\n## 运行项目\n\n\n```js\n$ npm install\n$ npm start\n```\n\n浏览器打开`http://localhost:3000/index-FINISHED.html`\n\n效果图如下：\n\n![](http://om1c35wrq.bkt.clouddn.com/Snip20170811_1.png)\n\n![](http://om1c35wrq.bkt.clouddn.com/day20-100.gif)\n\n\n## 程序源码\n\n### HTML代码\n\n\n\n```js html css\n\n\n\n\n \n Speech Detection\n\n\n\n\n

\n \n \n\n\n\n\n```\n\n### JS代码\n\n```js\n \n```\n\n#### JS实现思路\n* 新建一个语音识别的对象\n* 开启该语音识别对象的识别服务\n* 监听`result`事件，实时获取语音输入内容\n* 监听`end`事件，当结束时再次开启语音识别，使其持续监听\n\n#### JS源码解析\n\n - [SpeechRecognition参考文档](https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition)\n \n - 其中监听`result`事件，根据事件返回值获取到语音输入的内容\n![](http://om1c35wrq.bkt.clouddn.com/Snip20170811_2.png)\n\n可以看到`transcript`中保存的是语音输入的内容。其中可以看到还有一个属性为`confidence`，代表这段话是别的精度，越大正确率越高。\n\n-`SpeechRecognition`属性\n\n```js\n\nvar recognition = new SpeechRecognition();\n\nrecognition.continuous = false;\n\nrecognition.lang = 'en-US';\n\nrecognition.interimResults = false;\n...\n```\n\n第20天的内容就到这里，主要学习`SpeechRecognition`相关属性的使用。\n\n\n## 源码下载\n\n[Github Source Code](https://github.com/liyuechun/JavaScript30-liyuechun)\n\n|全栈部落|区块链部落|\n|:---------:|:------:|\n|![](http://orhm8wuhd.bkt.clouddn.com/quanzhanbuluo100.jpeg)|![](http://orhm8wuhd.bkt.clouddn.com/qukuailian100.jpg)|\n\n\n\n\n\n\n" }, { "path": "20 - Speech Detection/index-FINISHED.html", "content": "\n\n\n \n Speech Detection\n\n\n\n

\n\n\n\n\n \n\n\n\n" }, { "path": "20 - Speech Detection/index-START.html", "content": "\n\n\n \n Speech Detection\n\n\n\n

\n\n\n\n\n \n\n\n\n" }, { "path": "20 - Speech Detection/package.json", "content": "{\n \"name\": \"gum\",\n \"version\": \"1.0.0\",\n \"description\": \"\",\n \"main\": \"scripts.js\",\n \"scripts\": {\n \"start\": \"browser-sync start --directory --server --files '*.css, *.html, *.js'\"\n },\n \"author\": \"\",\n \"license\": \"ISC\",\n \"devDependencies\": {\n \"browser-sync\": \"^2.12.5\"\n }\n}\n" }, { "path": "21 - Geolocation/README.md", "content": "# Day21 - Geolocation 中文指南\n\n### 涉及知识点主要是geolocation,这里不做详细介绍，[具体内容见我总结的博客，请戳我！](https://blog.csdn.net/qq_39207948/article/details/88081604)\n\n## 运行项目\n\n```js\nliyuechun:21 - Geolocation yuechunli$ npm install\n......\nliyuechun:21 - Geolocation yuechunli$ npm start\n\n> gum@1.0.0 start /Users/liyuechun/Documents/js30/JavaScript30-liyuechun/21 - Geolocation\n> browser-sync start --directory --server --files '*.css, *.html, *.js' --https\n\n[Browsersync] Access URLs:\n -------------------------------------\n Local: https://localhost:3000\n External: https://192.168.1.7:3000\n -------------------------------------\n UI: http://localhost:3001\n UI External: http://192.168.1.7:3001\n -------------------------------------\n[Browsersync] Serving files from: ./\n[Browsersync] Watching files...\n```\n\n## 效果图\n\n![](https://github.com/SUNNERCMS/30daysJavascript/blob/master/21%20-%20Geolocation/show.PNG)\n\n第21天的目的是练习`NavigatorGeolocation.geolocation`这一webAPI的使用，通过使用此API可以访问到设备的位置信息。这允许网站或应用根据用户的位置提供个性化结果。\n\n## UI源码\n\n```html\n\n\n\n\n \n Document\n \n\n\n\n \n\n\n

\n 0\n KM/H\n

\n\n \n\n\n\n```\n\n![](http://om1c35wrq.bkt.clouddn.com/WX20170813-114518@2x.png)\n\n\n## JS源码\n\n```js\n \n```\n" }, { "path": "21 - Geolocation/index.html", "content": "\n\n\n\n \n Document\n \n \n\n\n \n

\n 0\n KM/H\n

\n \n\n" }, { "path": "21 - Geolocation/package.json", "content": "{\n \"name\": \"gum\",\n \"version\": \"1.0.0\",\n \"description\": \"\",\n \"main\": \"scripts.js\",\n \"scripts\": {\n \"start\": \"browser-sync start --directory --server --files '*.css, *.html, *.js' --https\"\n },\n \"author\": \"\",\n \"license\": \"ISC\",\n \"devDependencies\": {\n \"browser-sync\": \"^2.12.5\"\n }\n}\n" }, { "path": "22 - Follow Along Link Highlighter/README.md", "content": "# Day22 - 鼠标锚点动画生成指南\n\n## 效果图\n![](https://github.com/SUNNERCMS/30daysJavascript/blob/master/22%20-%20Follow%20Along%20Link%20Highlighter/SHOWGIF.gif)\n\n第22天的练习是一个动画练习，当鼠标移动到锚点处，会有一个白色的色块移动到当前锚点所在的位置。演示图如下所示：\n\n### 解决思路： \n实际上是通过一个背景颜色Wie白色的小块进行覆盖导航元素这个白色小块的宽高及位置有getBoundingClientRect来获取，鼠标进入不同的元素就获取该元素的宽高和位置数据，然后赋值给这个白色小块，则白色小块定位到该元素位置处，作为背景来使用。\n\n\n## JS源码\n\n```js\n \n```\n\n## 代码解析\n\n- 通过HTML源码我们不难发现，所有锚点都是由`a`标签组成，所以在`js`代码中我们首先先获取所有的`a`标签对象，返回一个伪数组，用扩展运算符将其真正数组化，将其存储到`triggers`变量中，然后给每个a标签添加鼠标进入监听事件。\n\n```js\n let A=[...document.querySelectorAll(\"a\")];\n A.forEach(item=>item.addEventListener(\"mouseenter\",addHightLight));\n```\n- 在效果图中高亮状态的小块其实就是一个`span`标签，在JS代码中创建了一个`span`标签，并且为其添加了一个`highlight`的`class`，由于hightlight的样式中\n是绝对定位，并且top和left的值均为0；那么在初始化时是位于左上角的，通过display进行隐藏，然后在改变之后在进行显示，中间加上过渡效果。\n```js\n //创建类名为hightLight的白色小块 -->\n let SPAN=document.createElement(\"span\");\n SPAN.setAttribute(\"class\",\"hightlight\");//或者使用SPAN.classList.add(\"hightlight\");\n document.body.appendChild(SPAN);\n SPAN.style.display=\"none\"; \n```\n\n- `getBoundingClientRect()`\n\n[getBoundingClientRect](https://blog.csdn.net/qq_39207948/article/details/88147479)\n\n`Element.getBoundingClientRect()`方法返回元素的大小及其相对于视口的位置。\n\n**语法：**\n\n```js\nrectObject = object.getBoundingClientRect();\n```\n\n**值：**\n返回值是一个 [DOMRect](https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDOMClientRect) 对象，这个对象是由该元素的 [getClientRects()](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getClientRects) 方法返回的一组矩形的集合, 即：是与该元素相关的CSS 边框集合。\n\n**DOMRect属性表：**\n\n|属性|类型|描述|\n|:-----------|:-----------:|:-----------|\n|bottom|float|Y 轴，相对于视口原点（viewport origin）矩形盒子的底部。**只读**。 |\n|height|float|矩形盒子的高度（等同于 bottom 减 top）。**只读**。|\n|left|float|X 轴，相对于视口原点（viewport origin）矩形盒子的左侧。**只读**。 |\n|right|float|X 轴，相对于视口原点（viewport origin）矩形盒子的右侧。**只读**。 |\n|top|float|Y 轴，相对于视口原点（viewport origin）矩形盒子的顶部。**只读**。|\n|width|float|矩形盒子的宽度（等同于 right 减 left）。**只读**。 |\n|x|float|X轴横坐标，矩形盒子左边相对于视口原点（viewport origin）的距离。**只读**。|\n|y|float|Y轴纵坐标，矩形盒子顶部相对于视口原点（viewport origin）的距离。**只读**。|\n\n\n`DOMRect` 对象包含了一组用于描述边框的只读属性——left、top、right和bottom，单位为像素。除了 width 和 height 外的属性都是相对于视口的左上角位置而言的。\n\n![](http://om1c35wrq.bkt.clouddn.com/day22-rect.png)\n\n空边框盒（译者注：没有内容的边框）会被忽略。如果所有的元素边框都是空边框，那么这个矩形给该元素返回的 width、height 值为0，left、top值为第一个css盒子（按内容顺序）的top-left值。\n\n当计算边界矩形时，会考虑视口区域（或其他可滚动元素）内的滚动操作，也就是说，当滚动位置发生了改变，top和left属性值就会随之立即发生变化（因此，它们的值是相对于视口的，而不是绝对的）。如果不希望属性值随视口变化，那么只要给top、left属性值加上当前的滚动位置（通过window.scrollX和window.scrollY），这样就可以获取与当前的滚动位置无关的常量值。\n\n- `highlightLink`方法\n\n```js\n function addHightLight(){\n let RECT=this.getBoundingClientRect(); \n let rects={\n width:RECT.width,\n height:RECT.height,\n left:RECT.left+window.scrollX,\n top:RECT.top+window.scrollY\n }\n // SPAN.style=`width:${rects.width},height:${rects.height},left:${rects.left},top:${rects.top}`;\n // SPAN.style.top=\n // SPAN.style.width = `${rects.width}px`;\n // SPAN.style.height = `${rects.height}px`;\n // // SPAN.style.transform = `translate(${rects.left}px, ${rects.top}px)`;用了位置移动，等价于下面的这两条语句\n // SPAN.style.left = `${rects.left}px`;\n // SPAN.style.top = `${rects.top}px`;\n // SPAN.style.display=\"block\";\n// 采用cssText写法片段式样式改变，可以减少回流和重绘，上述的语句没改变一个样式都会触发回流和重绘。\n SPAN.style.cssText=`width:${rects.width}px;height:${rects.height}px;left:${rects.left}px;top:${rects.top}px;display:block;`;\n\n }\n```\n> 给a元素添加高亮背景的函数。获取到当前进入的a元素，然后将该元素的top\\left\\width\\height用一个对象进行保存。然后将span的白色小块的样式位置进行改变，移动到鼠标进入的这个元素。 \n\n\n-

标签定义导航链接的部分。 \n\n并不是所有的 HTML 文档都要使用到

元素。

元素只是作为标注一个导航链接的区域。\n## 所有的工作做完，上面的这套程序存在bug，当鼠标进入一个页面，出现白色背景块时，此时改变页面的大小，白色背景块的位置出现错位，相对于视口的位置不改变。\n" }, { "path": "22 - Follow Along Link Highlighter/index.html", "content": "\n\n\n \n \n \n 随鼠标滑动小块\n \n\n\n \n

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est explicabo unde natus necessitatibus esse obcaecati distinctio, aut itaque, qui vitae!

Aspernatur sapiente quae sint soluta modi, atque praesentium laborum pariatur earum quaerat cupiditate consequuntur facilis ullam dignissimos, aperiam quam veniam.

Cum ipsam quod, incidunt sit ex tempore placeat maxime corrupti possimus veritatis ipsum fugit recusandae est doloremque? Hic, quibusdam, nulla.

Esse quibusdam, ad, ducimus cupiditate nulla, quae magni odit totam ut consequatur eveniet sunt quam provident sapiente dicta neque quod.

Aliquam dicta sequi culpa fugiat consequuntur pariatur optio ad minima, maxime odio, distinctio magni impedit tempore enim repellendus repudiandae quas!

\n \n \n\n\n" }, { "path": "22 - Follow Along Link Highlighter/style.css", "content": "html {\n box-sizing: border-box;\n }\n *, *:before, *:after {\n box-sizing: inherit;\n }\n body {\n min-height: 100vh;\n margin: 0; /* Important! */\n font-family: sans-serif;\n background:\n linear-gradient(45deg, hsla(340, 100%, 55%, 1) 0%, hsla(340, 100%, 55%, 0) 70%),\n linear-gradient(135deg, hsla(225, 95%, 50%, 1) 10%, hsla(225, 95%, 50%, 0) 80%),\n linear-gradient(225deg, hsla(140, 90%, 50%, 1) 10%, hsla(140, 90%, 50%, 0) 80%),\n linear-gradient(315deg, hsla(35, 95%, 55%, 1) 100%, hsla(35, 95%, 55%, 0) 70%);\n }\n .wrapper {\n margin:0 auto;\n max-width:700px;\n font-size: 20px;\n line-height: 2; /*以字体的两倍高度设置行间距*/\n position: relative;\n }\n a {\n text-decoration: none;\n padding:5px;\n color:black;\n background:rgba(0,0,0,0.05);\n border-radius: 20px\n }\n \n .menu {\n padding: 0;\n display: flex;\n list-style: none;\n justify-content: center;\n margin:100px 0;\n }\n .menu a {\n display: inline-block;\n margin:0 20px;\n color:black;\n }\n /* 添加的动态类 */\n .hightlight {\n transition: all 0.2s;/*所有元素的过渡效果在0.2s内完成*/\n position: absolute;\n top:0;\n left:0;\n background:white;\n display: block;\n border-bottom:2px solid white;\n border-radius:20px;\n box-shadow: 0 0 10px rgba(0,0,0,0.2);\n z-index: -1;\n }\n " }, { "path": "23 - Speech Synthesis/23 - Speech Synthesis/README.md", "content": "\n# Day23 - Speech Synthesis\n\n## 效果图\n\n![](http://om1c35wrq.bkt.clouddn.com/Snip20170813_1.png)\n\n第23天要做一个语音的记事本类似的场景，输入一段内容，选择不同的语言可以进行朗读。还可以选择不同的语速和语调。\n\n## 基础知识\n\n#### 一、示例\n\n[speak-easy-synthesis](https://github.com/mdn/web-speech-api/tree/master/speak-easy-synthesis)\n\n```js\nvar synth = window.speechSynthesis;\n\nvar inputForm = document.querySelector('form');\nvar inputTxt = document.querySelector('.txt');\nvar voiceSelect = document.querySelector('select');\n\nvar pitch = document.querySelector('#pitch');\nvar pitchValue = document.querySelector('.pitch-value');\nvar rate = document.querySelector('#rate');\nvar rateValue = document.querySelector('.rate-value');\n\nvar voices = [];\n\nfunction populateVoiceList() {\n voices = synth.getVoices();\n\n for(i = 0; i < voices.length ; i++) {\n var option = document.createElement('option');\n option.textContent = voices[i].name + ' (' + voices[i].lang + ')';\n \n if(voices[i].default) {\n option.textContent += ' -- DEFAULT';\n }\n\n option.setAttribute('data-lang', voices[i].lang);\n option.setAttribute('data-name', voices[i].name);\n voiceSelect.appendChild(option);\n }\n}\n\npopulateVoiceList();\nif (speechSynthesis.onvoiceschanged !== undefined) {\n speechSynthesis.onvoiceschanged = populateVoiceList;\n}\n\ninputForm.onsubmit = function(event) {\n event.preventDefault();\n\n var utterThis = new SpeechSynthesisUtterance(inputTxt.value);\n var selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name');\n for(i = 0; i < voices.length ; i++) {\n if(voices[i].name === selectedOption) {\n utterThis.voice = voices[i];\n }\n }\n utterThis.pitch = pitch.value;\n utterThis.rate = rate.value;\n synth.speak(utterThis);\n\n inputTxt.blur();\n}\n```\n\n![](http://om1c35wrq.bkt.clouddn.com/Snip20170813_3.png)\n\n#### 二、SpeechSynthesis\n\n[参考文档](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis)\n\n\n##### 1、属性\n\n- `SpeechSynthesis.paused`（只读）\n\n判断是否是处于暂停状态。\n\n- `SpeechSynthesis.pending` (只读)\n\n判断是否处于等待状态。\n\n- `SpeechSynthesis.speaking ` (只读)\n\n判断是否处于在读中。\n\n##### 2、事件\n\n- `SpeechSynthesis.onvoiceschanged`\n\n监听翻译的语言是否发生了变化。\n\n#### 3、方法\n\n- `SpeechSynthesis.cancel()`\n\n取消。\n\n- `SpeechSynthesis.getVoices()`\n\n获取所有当前设备支持的`SpeechSynthesisVoice `对象。\n\n- `SpeechSynthesis.pause()`\n\n暂停。\n\n- `SpeechSynthesis.resume()`\n\n恢复。\n\n- `SpeechSynthesis.speak()`\n\n开始语音读取。\n\n#### 三、SpeechSynthesisUtterance \n\n[参考文档](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance)\n\n##### 1、构造函数\n\n- `SpeechSynthesisUtterance.SpeechSynthesisUtterance()`\n\n返回一个新的`SpeechSynthesisUtterance`对象实例。\n\n##### 2、属性\n\n- SpeechSynthesisUtterance.lang\n\n获取或者是设置`utterance`的语言。\n\n- SpeechSynthesisUtterance.pitch\n\n获取或者是设置`utterance`的音高。\n\n- SpeechSynthesisUtterance.rate\n\n获取或者是设置`utterance`的播放速率。\n\n\n- SpeechSynthesisUtterance.text\n\n获取或者是设置`utterance`需要播放的文本内容。\n\n\n- SpeechSynthesisUtterance.voice\n\n获得或设定将被用来说话的声音。\n\n- SpeechSynthesisUtterance.volume\n\n获取或者是设置`utterance`的播放音量。\n\n## HTML源码\n\n```html\n\n\n\n \n Speech Synthesis\n \n \n\n\n\n

\n\n

The Voiceinator 5000

\n\n \n\n Rate:\n \n\n Pitch:\n\n \n \n \n \n\n

\n\n\n```\n\n## CSS源码\n\n```css\nhtml {\n font-size: 10px;\n box-sizing: border-box;\n}\n\n*, *:before, *:after {\n box-sizing: inherit;\n}\n\nbody {\n margin: 0;\n padding: 0;\n font-family: sans-serif;\n background-color:#3BC1AC;\n display:flex;\n min-height: 100vh;\n align-items: center;\n\n background-image:\n radial-gradient(circle at 100% 150%, #3BC1AC 24%, #42D2BB 25%, #42D2BB 28%, #3BC1AC 29%, #3BC1AC 36%, #42D2BB 36%, #42D2BB 40%, transparent 40%, transparent),\n radial-gradient(circle at 0 150%, #3BC1AC 24%, #42D2BB 25%, #42D2BB 28%, #3BC1AC 29%, #3BC1AC 36%, #42D2BB 36%, #42D2BB 40%, transparent 40%, transparent),\n radial-gradient(circle at 50% 100%, #42D2BB 10%, #3BC1AC 11%, #3BC1AC 23%, #42D2BB 24%, #42D2BB 30%, #3BC1AC 31%, #3BC1AC 43%, #42D2BB 44%, #42D2BB 50%, #3BC1AC 51%, #3BC1AC 63%, #42D2BB 64%, #42D2BB 71%, transparent 71%, transparent),\n radial-gradient(circle at 100% 50%, #42D2BB 5%, #3BC1AC 6%, #3BC1AC 15%, #42D2BB 16%, #42D2BB 20%, #3BC1AC 21%, #3BC1AC 30%, #42D2BB 31%, #42D2BB 35%, #3BC1AC 36%, #3BC1AC 45%, #42D2BB 46%, #42D2BB 49%, transparent 50%, transparent),\n radial-gradient(circle at 0 50%, #42D2BB 5%, #3BC1AC 6%, #3BC1AC 15%, #42D2BB 16%, #42D2BB 20%, #3BC1AC 21%, #3BC1AC 30%, #42D2BB 31%, #42D2BB 35%, #3BC1AC 36%, #3BC1AC 45%, #42D2BB 46%, #42D2BB 49%, transparent 50%, transparent);\n background-size:100px 50px;\n}\n\n\n.voiceinator {\n padding:2rem;\n width:50rem;\n margin:0 auto;\n border-radius:1rem;\n position: relative;\n background:white;\n overflow: hidden;\n z-index: 1;\n box-shadow:0 0 5px 5px rgba(0,0,0,0.1);\n}\n\nh1 {\n width:calc(100% + 4rem);\n margin: -2rem 0 2rem -2rem;\n padding:.5rem;\n background: #ffc600;\n border-bottom: 5px solid #F3C010;\n text-align: center;\n font-size: 5rem;\n font-weight: 100;\n font-family: 'Pacifico', cursive;\n text-shadow:3px 3px 0 #F3C010;\n\n}\n\n.voiceinator input,\n.voiceinator button,\n.voiceinator select,\n.voiceinator textarea {\n width: 100%;\n display: block;\n margin:10px 0;\n padding:10px;\n border:0;\n font-size: 2rem;\n background:#F7F7F7;\n outline:0;\n}\n\ntextarea {\n height: 20rem;\n}\n\ninput[type=\"select\"] {\n\n}\n\n.voiceinator button {\n background:#ffc600;\n border:0;\n width: 49%;\n float:left;\n font-family: 'Pacifico', cursive;\n margin-bottom: 0;\n font-size: 2rem;\n border-bottom: 5px solid #F3C010;\n cursor:pointer;\n position: relative;\n}\n\n.voiceinator button:active {\n top:2px;\n}\n\n.voiceinator button:nth-of-type(1) {\n margin-right: 2%;\n}\n```\n\n\n## JS源码\n\n```Javascript\n // 实例化一个语音对象，并获得页面上的各DOM元素\n const msg = new SpeechSynthesisUtterance();\n const synth = window.speechSynthesis;\n let voices = [];\n const voicesDropdown = document.querySelector('[name=\"voice\"]');\n const options = document.querySelectorAll('[type=\"range\"], [name=\"text\"]');\n const speakButton = document.querySelector('#speak');\n const stopButton = document.querySelector('#stop');\n msg.text = document.querySelector('[name=\"text\"]').value;\n\n // 设置各种语言的下拉选择框\n function populateVoices() {\n voices = this.getVoices();\n voicesDropdown.innerHTML = voices\n .filter(voice => voice.lang.includes('en'))\n .map(voice => ``)\n .join('');\n }\n\n // 设置当前语音的语言\n function setVoice() {\n msg.voice = voices.find(voice => voice.name === this.value);\n toggle();\n }\n\n // 切换语音的播放和暂停\n function toggle(startOver = true) {\n synth.cancel();\n if (startOver) {\n synth.speak(msg);\n }\n }\n\n // 设置语音的语速和语调\n function setOption() {\n console.log(this.name, this.value);\n msg[this.name] = this.value;\n toggle();\n }\n\n // 监听语音对象的语言改变的事件\n synth.addEventListener('voiceschanged', populateVoices);\n // 当切换语言选择下拉菜单时被调用\n voicesDropdown.addEventListener('change', setVoice);\n // 为语速和语调设置改变的事件监听\n options.forEach(option => option.addEventListener('change', setOption));\n // 分别监听播放和暂停事件\n speakButton.addEventListener('click', toggle);\n stopButton.addEventListener('click', () => toggle(false));\n```\n\n\n\n\n" }, { "path": "23 - Speech Synthesis/23 - Speech Synthesis/index.html", "content": "\n\n\n\n \n Speech Synthesis\n \n \n\n\n\n\n

\n\n

The Voiceinator 5000

\n\n \n\n Rate:\n \n\n Pitch:\n\n \n \n \n \n\n

\n\n \n\n\n\n" }, { "path": "23 - Speech Synthesis/23 - Speech Synthesis/style.css", "content": "html {\n font-size: 10px;\n box-sizing: border-box;\n}\n\n*, *:before, *:after {\n box-sizing: inherit;\n}\n\nbody {\n margin: 0;\n padding: 0;\n font-family: sans-serif;\n background-color:#3BC1AC;\n display:flex;\n min-height: 100vh;\n align-items: center;\n\n background-image:\n radial-gradient(circle at 100% 150%, #3BC1AC 24%, #42D2BB 25%, #42D2BB 28%, #3BC1AC 29%, #3BC1AC 36%, #42D2BB 36%, #42D2BB 40%, transparent 40%, transparent),\n radial-gradient(circle at 0 150%, #3BC1AC 24%, #42D2BB 25%, #42D2BB 28%, #3BC1AC 29%, #3BC1AC 36%, #42D2BB 36%, #42D2BB 40%, transparent 40%, transparent),\n radial-gradient(circle at 50% 100%, #42D2BB 10%, #3BC1AC 11%, #3BC1AC 23%, #42D2BB 24%, #42D2BB 30%, #3BC1AC 31%, #3BC1AC 43%, #42D2BB 44%, #42D2BB 50%, #3BC1AC 51%, #3BC1AC 63%, #42D2BB 64%, #42D2BB 71%, transparent 71%, transparent),\n radial-gradient(circle at 100% 50%, #42D2BB 5%, #3BC1AC 6%, #3BC1AC 15%, #42D2BB 16%, #42D2BB 20%, #3BC1AC 21%, #3BC1AC 30%, #42D2BB 31%, #42D2BB 35%, #3BC1AC 36%, #3BC1AC 45%, #42D2BB 46%, #42D2BB 49%, transparent 50%, transparent),\n radial-gradient(circle at 0 50%, #42D2BB 5%, #3BC1AC 6%, #3BC1AC 15%, #42D2BB 16%, #42D2BB 20%, #3BC1AC 21%, #3BC1AC 30%, #42D2BB 31%, #42D2BB 35%, #3BC1AC 36%, #3BC1AC 45%, #42D2BB 46%, #42D2BB 49%, transparent 50%, transparent);\n background-size:100px 50px;\n}\n\n\n.voiceinator {\n padding:2rem;\n width:50rem;\n margin:0 auto;\n border-radius:1rem;\n position: relative;\n background:white;\n overflow: hidden;\n z-index: 1;\n box-shadow:0 0 5px 5px rgba(0,0,0,0.1);\n}\n\nh1 {\n width:calc(100% + 4rem);\n margin: -2rem 0 2rem -2rem;\n padding:.5rem;\n background: #ffc600;\n border-bottom: 5px solid #F3C010;\n text-align: center;\n font-size: 5rem;\n font-weight: 100;\n font-family: 'Pacifico', cursive;\n text-shadow:3px 3px 0 #F3C010;\n\n}\n\n.voiceinator input,\n.voiceinator button,\n.voiceinator select,\n.voiceinator textarea {\n width: 100%;\n display: block;\n margin:10px 0;\n padding:10px;\n border:0;\n font-size: 2rem;\n background:#F7F7F7;\n outline:0;\n}\n\ntextarea {\n height: 20rem;\n}\n\ninput[type=\"select\"] {\n\n}\n\n.voiceinator button {\n background:#ffc600;\n border:0;\n width: 49%;\n float:left;\n font-family: 'Pacifico', cursive;\n margin-bottom: 0;\n font-size: 2rem;\n border-bottom: 5px solid #F3C010;\n cursor:pointer;\n position: relative;\n}\n\n.voiceinator button:active {\n top:2px;\n}\n\n.voiceinator button:nth-of-type(1) {\n margin-right: 2%;\n}\n" }, { "path": "23 - Speech Synthesis/speak-easy-synthesis/index.html", "content": "\n\n \n \n \n \n\n Speech synthesiser\n\n \n \n \n\n \n

Speech synthesiser

\n\n

Enter some text in the input below and press return or the \"play\" button to hear it. change voices using the dropdown menu.

\n \n \n\n \n \n" }, { "path": "23 - Speech Synthesis/speak-easy-synthesis/manifest.webapp", "content": "{\n \"name\": \"SpeechSyn\",\n \"description\": \"Web Speech API speech synthesis demo\",\n \"launch_path\": \"/index.html\",\n \"icons\": {\n \"512\": \"/img/ws512.png\",\n \"128\": \"/img/ws128.png\"\n },\n \"developer\": {\n \"name\": \"Chris Mills\",\n \"url\": \"https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API\"\n },\n \"default_locale\": \"en\"\n}" }, { "path": "23 - Speech Synthesis/speak-easy-synthesis/script.js", "content": "var synth = window.speechSynthesis;\n\nvar inputForm = document.querySelector('form');\nvar inputTxt = document.querySelector('.txt');\nvar voiceSelect = document.querySelector('select');\n\nvar pitch = document.querySelector('#pitch');\nvar pitchValue = document.querySelector('.pitch-value');\nvar rate = document.querySelector('#rate');\nvar rateValue = document.querySelector('.rate-value');\n\nvar voices = [];\n\nfunction populateVoiceList() {\n voices = synth.getVoices();\n var selectedIndex = voiceSelect.selectedIndex < 0 ? 0 : voiceSelect.selectedIndex;\n voiceSelect.innerHTML = '';\n for(i = 0; i < voices.length ; i++) {\n var option = document.createElement('option');\n option.textContent = voices[i].name + ' (' + voices[i].lang + ')';\n \n if(voices[i].default) {\n option.textContent += ' -- DEFAULT';\n }\n\n option.setAttribute('data-lang', voices[i].lang);\n option.setAttribute('data-name', voices[i].name);\n voiceSelect.appendChild(option);\n }\n voiceSelect.selectedIndex = selectedIndex;\n}\n\npopulateVoiceList();\nif (speechSynthesis.onvoiceschanged !== undefined) {\n speechSynthesis.onvoiceschanged = populateVoiceList;\n}\n\nfunction speak(){\n if(inputTxt.value !== ''){\n var utterThis = new SpeechSynthesisUtterance(inputTxt.value);\n var selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name');\n for(i = 0; i < voices.length ; i++) {\n if(voices[i].name === selectedOption) {\n utterThis.voice = voices[i];\n }\n }\n utterThis.pitch = pitch.value;\n utterThis.rate = rate.value;\n synth.speak(utterThis);\n }\n}\n\ninputForm.onsubmit = function(event) {\n event.preventDefault();\n\n speak();\n\n inputTxt.blur();\n}\n\npitch.onchange = function() {\n pitchValue.textContent = pitch.value;\n}\n\nrate.onchange = function() {\n rateValue.textContent = rate.value;\n}\n\nvoiceSelect.onchange = function(){\n speak();\n}" }, { "path": "23 - Speech Synthesis/speak-easy-synthesis/style.css", "content": "body, html {\n margin: 0;\n}\n\nhtml {\n height: 100%;\n}\n\nbody {\n height: 90%;\n max-width: 800px;\n margin: 0 auto;\n}\n\nh1, p {\n font-family: sans-serif;\n text-align: center;\n padding: 20px;\n}\n\n.txt, select, form > div {\n display: block;\n margin: 0 auto;\n font-family: sans-serif;\n font-size: 16px;\n padding: 5px;\n}\n\n.txt {\n width: 80%;\n}\n\nselect {\n width: 83%;\n}\n\nform > div {\n width: 81%;\n}\n\n.txt, form > div {\n margin-bottom: 10px;\n overflow: auto;\n}\n\n.clearfix {\n clear: both;\n}\n\nlabel {\n float: left;\n width: 10%;\n line-height: 1.5;\n}\n\n.rate-value, .pitch-value {\n float: right;\n width: 5%;\n line-height: 1.5;\n}\n\n#rate, #pitch {\n float: right;\n width: 81%;\n}\n\n.controls {\n text-align: center;\n margin-top: 10px;\n}\n\n.controls button {\n padding: 10px;\n}" }, { "path": "24 - Sticky Nav/README.md", "content": "# Day24 - Sticky Nav 粘性导航栏\n## 效果图\n![](http://om1c35wrq.bkt.clouddn.com/day24-xiaoguotu.gif)\n\n### 代码解析\n### 涉及知识点\n### \n" }, { "path": "24 - Sticky Nav/index.html", "content": "\n\n\n\n \n Sticky Nav\n \n\n\n\n\n

A story about getting lost.

\n\n \n\n

\n\n

\n\n\n\n

\n\n

\n\n \n\n\n\n" }, { "path": "24 - Sticky Nav/style.css", "content": "html {\n box-sizing: border-box;\n background: #eeeeee;\n font-family: 'helvetica neue';\n font-size: 20px;\n font-weight: 200;\n}\n\nbody {\n margin: 0;\n}\n\n*,\n*:before,\n*:after {\n box-sizing: inherit;\n}\n\n.site-wrap {\n max-width: 700px;\n margin: 70px auto;\n background: white;\n padding: 40px;\n text-align: justify;\n box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.05);\n transform: scale(0.98);\n transition: transform 0.5s;\n}\n\n.fixed-nav .site-wrap {\n transform: scale(1);\n}\n\nheader {\n text-align: center;\n height: 50vh;\n background: url(http://wes.io/iEgP/wow-so-deep.jpg) bottom center no-repeat;\n background-size: cover;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\nh1 {\n color: white;\n font-size: 7vw;\n text-shadow: 3px 4px 0 rgba(0, 0, 0, 0.2)\n}\n\nnav {\n background: black;\n top: 0;\n width: 100%;\n transition: all 0.5s;\n position: relative;\n z-index: 1;\n}\n\n.fixed-nav nav {\n position: fixed;\n box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);\n}\n\nnav ul {\n margin: 0;\n padding: 0;\n list-style: none;\n display: flex;\n}\n\nnav li {\n flex: 1;\n text-align: center;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\nli.logo {\n max-width: 0;\n overflow: hidden;\n background: white;\n transition: all .5s;\n font-weight: 600;\n font-size: 30px;\n}\n\n.fixed-nav li.logo {\n max-width: 500px;\n}\n\nli.logo a {\n color: black;\n}\n\nnav a {\n text-decoration: none;\n padding: 20px;\n display: inline-block;\n color: white;\n transition: all 0.2s;\n text-transform: uppercase;\n}" }, { "path": "25 - Event Capture, Propagation, Bubbling and Once/README.md", "content": "\n\n# Day25 - Event Capture, Propagation, Bubbling and Once\n\n\n## 效果图\n\n\n![](http://om1c35wrq.bkt.clouddn.com/Snip20170813_2.png)\n\n第25天的训练是学习DOM的事件机制，主要包括事件捕获，事件冒泡，单次执行事件。\n\n\n\n## 源代码\n\n[addEventListener参考文档](https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener)\n\n```Javascript\n \n```\n同时也看一下HTML的文档结构，对于事件机制的理解也很重要：\n\n```html\n

\n```\n* `EventTarget.addEventListener('eventName',callback,option)`：元素的事件注册方法，接收三个参数，第一个参数为事件的名称（点击`click`、双击`dbclick`、改变`change`等），第二个参数是该事件的回调函数，也称为监听器，第三个参数为事件注册的选项对象，通常会包含两个配置项（是否事件捕获`capture`以及单次执行`once`事件，它们两个的默认值都是`false`）。\n* 当我们点击`class=\"three\"`的`div`的时候，我们也相当于同时点击了`class=\"two\"`和`class=\"one\"`。\n* `e.stopPropagation();`是否停止冒泡，如果调用了这个方法，就不会触发父组建的方法。\n\n\n\n\n\n" }, { "path": "25 - Event Capture, Propagation, Bubbling and Once/index.html", "content": "\n\n\n\n \n Understanding JavaScript's Capture\n\n\n\n\n

\n\n \n\n \n\n\n" }, { "path": "26 - Stripe Follow Along Nav/README.md", "content": "\n# Day26 - Stripe Follow Along Nav\n\n## 效果图\n\n![](http://om1c35wrq.bkt.clouddn.com/day25.gif)\n\n## 源码\n\n```javascript\n// javascript\nconst nav = document.querySelector('.top');\nconst menu = document.querySelectorAll('ul.cool > li');\nconst background = document.querySelector('.dropdownBackground');\n\nfunction mouseEnter() {\n this.classList.add('trigger-enter');\n setTimeout(() => this.classList.contains('trigger-enter') && this.classList.add('trigger-enter-active'), 150);\n background.classList.add('open');\n\n const dropdown = this.querySelector('.dropdown');\n const dropdownCoords = dropdown.getBoundingClientRect();\n const navCoords = nav.getBoundingClientRect();\n const coords = {\n width: dropdownCoords.width,\n height: dropdownCoords.height,\n left: dropdownCoords.left - navCoords.left,\n top: dropdownCoords.top - navCoords.top\n };\n background.style.setProperty('width', `${coords.width}px`);\n background.style.setProperty('height', `${coords.height}px`);\n background.style.setProperty('transform', `translate3D(${coords.left}px,${coords.top}px,0)`);\n // background.style.setProperty('top', `${coords.top}px`);\n // background.style.setProperty('left', `${coords.left}px`);\n}\n\nfunction mouseLeave() {\n this.classList.remove('trigger-enter','trigger-enter-active');\n // this.classList.remove('trigger-enter');\n // this.classList.remove('');\n background.classList.remove('open');\n}\nmenu.forEach(ele => ele.addEventListener('mouseenter', mouseEnter));\nmenu.forEach(ele => ele.addEventListener('mouseleave', mouseLeave));\n```\n\n```css\n\n.dropdown {\n opacity: 0;\n position: absolute;\n overflow: hidden;\n padding: 20px;\n top: -20px;\n border-radius: 2px;\n transition: all 0.5s;\n transform: translateY(100px);\n will-change: opacity;\n display: none;\n}\n\n.trigger-enter .dropdown {\n display: block;\n}\n\n.trigger-enter-active .dropdown {\n opacity: 1;\n}\n\n.dropdownBackground {\n width: 100px;\n height: 100px;\n position: absolute;\n background: #fff;\n border-radius: 4px;\n box-shadow: 0 50px 100px rgba(50, 50, 93, .1), 0 15px 35px rgba(50, 50, 93, .15), 0 5px 15px rgba(0, 0, 0, .1);\n transition: all 0.3s, opacity 0.1s, transform 0.2s;\n transform-origin: 50% 0;\n display: flex;\n justify-content: center;\n opacity: 0;\n}\n\n.dropdownBackground.open {\n opacity: 1;\n}\n```\n\n## 代码解析\n\n- 鼠标进入监听\n\n```js\nmenu.forEach(ele => ele.addEventListener('mouseenter', mouseEnter));\n```\n\n- 鼠标移除监听\n\n```js\nmenu.forEach(ele => ele.addEventListener('mouseleave', mouseLeave));\n```\n\n- 过渡动画的实现原理\n\n当鼠标移动到某一个选项后，首先使下拉菜单显示，但是在150ms内使其显示出来，这里用了`settimeout(fn,150)`，来延迟添加下拉菜单的`trigger-enter-active`类名，这样就会有一个过渡的效果了。\n\n- 鼠标进入时添加类名\n```\nthis.classList.add('trigger-enter');\nsetTimeout(() => this.classList.contains('trigger-enter') && this.classList.add('trigger-enter-active'), 150);\nbackground.classList.add('open');\n```\n这里有一点需要注意，因为我们设置了150ms延迟之后添加`trigger-enter-active`类，那么有可能会发生这样的情况：当我们以飞快的速度在各个选项之间切换的时候，有可能还没有到150ms鼠标就已经移出了选项了，这时在150ms之后，就会多添加了`trigger-enter-active`类在每一个选项里面，造成意想不到的错误。\n因此我们加了一句判断，150ms后只有当该鼠标还悬停在这个选项之中的时候，我们才添加`trigger-enter-active`类。\n\n- 动态的设置白色背景块的位置信息\n\n\n```\nconst coords = {\n\twidth: dropdownCoords.width,\n\theight: dropdownCoords.height,\n\tleft: dropdownCoords.left - navCoords.left,\n\ttop: dropdownCoords.top - navCoords.top\n};\nbackground.style.setProperty('width', `${coords.width}px`);\nbackground.style.setProperty('height', `${coords.height}px`);\nbackground.style.setProperty('transform', `translate3D(${coords.left}px,${coords.top}px,0)`);\n// background.style.setProperty('top', `${coords.top}px`);\n// background.style.setProperty('left', `${coords.left}px`);\n```\n\n这里有一点需要注意的是，我们在为白色背景块设置左边距和上边距的时候，要分别减去导航栏的上边距和左边距。因为我们的导航栏上面可能会有其他的内容，若不将这段距离减去，就会造成白色背景块位置偏移。\n\n`translate3D(x,y,z)`这里之所以使用`translate3D`，是因为`translate3D`属性会触发硬件加速，开启了硬件加速的`transform`是不会触发界面`repaint`的，拥有更好的性能。\n\n\n\n\n" }, { "path": "26 - Stripe Follow Along Nav/index.html", "content": "\n\n\n\n \n Follow Along Nav\n\n\n\n

Cool

\n \n

\n\n

\n About Me\n
\n
\n \n
专注于JS全栈开发以及区块链、高可用架构技术的研究与学习
\n
\n
\n
\n Courses\n
- \n 视频\n 区块链\n
- \n RFB\n React For Beginners\n
- \n ES6\n ES6 For Everyone\n
- \n STPU\n Sublime Text Power User\n
- \n WTF\n What The Flexbox?!\n
- \n LRX\n Learn Redux\n
- \n CLPU\n Command Line Power User\n
- \n MMD\n Mastering Markdown\n
\n
\n Other Links\n
- Twiter
- Facebook
- Blog
- Sina Weibo
\n

\n\n \n\n \n\n\n\n" }, { "path": "27 - Click and Drag/README.md", "content": "# Day27 - Click and Drag\n\n\n## 效果图\n\n[在线效果](http://30daysofjs.michaeleinsohn.com/scroll-drag/)\n\n![](http://om1c35wrq.bkt.clouddn.com/day27.gif)\n\n## UI实现\n\n#### HTML 代码\n\n```html\n\n\n\n\n \n Click and Drag\n \n\n\n\n

\n\n\n```\n\n\n#### CSS 代码\n\n```css\nhtml {\n box-sizing: border-box;\n background: url('https://source.unsplash.com/NFs6dRTBgaM/2000x2000') fixed;\n background-size: cover;\n}\n\n*,\n*:before,\n*:after {\n box-sizing: inherit;\n}\n\nbody {\n min-height: 100vh;\n display: flex;\n justify-content: center;\n align-items: center;\n font-family: sans-serif;\n font-size: 20px;\n margin: 0;\n}\n\n.items {\n height: 800px;\n padding: 100px;\n width: 100%;\n border: 1px solid white;\n overflow-x: scroll;\n overflow-y: hidden;\n white-space: nowrap;\n user-select: none;\n cursor: pointer;\n transition: all 0.2s;\n transform: scale(0.98);\n will-change: transform;\n position: relative;\n background: rgba(255, 255, 255, 0.1);\n font-size: 0;\n perspective: 500px;\n}\n\n.items.active {\n background: rgba(255, 255, 255, 0.3);\n cursor: grabbing;\n cursor: -webkit-grabbing;\n transform: scale(1);\n}\n\n.item {\n width: 200px;\n height: calc(100% - 40px);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: 80px;\n font-weight: 100;\n color: rgba(0, 0, 0, 0.15);\n box-shadow: inset 0 0 0 10px rgba(0, 0, 0, 0.15);\n}\n\n.item:nth-child(9n+1) {\n background: dodgerblue;\n}\n\n.item:nth-child(9n+2) {\n background: goldenrod;\n}\n\n.item:nth-child(9n+3) {\n background: paleturquoise;\n}\n\n.item:nth-child(9n+4) {\n background: gold;\n}\n\n.item:nth-child(9n+5) {\n background: cadetblue;\n}\n\n.item:nth-child(9n+6) {\n background: tomato;\n}\n\n.item:nth-child(9n+7) {\n background: lightcoral;\n}\n\n.item:nth-child(9n+8) {\n background: darkslateblue;\n}\n\n.item:nth-child(9n+9) {\n background: rebeccapurple;\n}\n\n.item:nth-child(even) {\n transform: scaleX(1.31) rotateY(40deg);\n}\n\n.item:nth-child(odd) {\n transform: scaleX(1.31) rotateY(-40deg);\n}\n```\n\n#### HTML + CSS 代码解析\n\n- 每一个`div`就是一个`item`,在本案例中一共有25个`item`。\n\n```html\n

\n```\n\n- 如果大家细心观察效果图，不难发现一个规律，`n` 和 `n + 9` 的 `item`的颜色相同，所以有如下的CSS代码：\n\n```css\n.item:nth-child(9n+1) {\n background: dodgerblue;\n}\n\n.item:nth-child(9n+2) {\n background: goldenrod;\n}\n\n.item:nth-child(9n+3) {\n background: paleturquoise;\n}\n\n.item:nth-child(9n+4) {\n background: gold;\n}\n\n.item:nth-child(9n+5) {\n background: cadetblue;\n}\n\n.item:nth-child(9n+6) {\n background: tomato;\n}\n\n.item:nth-child(9n+7) {\n background: lightcoral;\n}\n\n.item:nth-child(9n+8) {\n background: darkslateblue;\n}\n\n.item:nth-child(9n+9) {\n background: rebeccapurple;\n}\n```\n\n\n- `item`的样式CSS\n\n```css\n.item {\n width: 200px;\n height: calc(100% - 40px);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: 80px;\n font-weight: 100;\n color: rgba(0, 0, 0, 0.15);\n box-shadow: inset 0 0 0 10px rgba(0, 0, 0, 0.15);\n}\n```\n\n\n- 奇偶旋转样式\n\n```css\n\n\n.item:nth-child(even) {\n transform: scaleX(1.31) rotateY(40deg);\n}\n\n\n.item:nth-child(odd) {\n transform: scaleX(1.31) rotateY(-40deg);\n}\n```\n\n## JS逻辑代码及注释\n\n```js\n\n```\n\n\n\n\n\n\n" }, { "path": "27 - Click and Drag/index-FINISHED.html", "content": "\n\n\n \n Click and Drag\n \n\n\n

\n\n\n\n \n\n" }, { "path": "27 - Click and Drag/index-START.html", "content": "\n\n\n\n \n Click and Drag\n \n\n\n\n

\n\n \n\n\n" }, { "path": "27 - Click and Drag/style.css", "content": "html {\n box-sizing: border-box;\n background: url('https://source.unsplash.com/NFs6dRTBgaM/2000x2000') fixed;\n background-size: cover;\n}\n\n*,\n*:before,\n*:after {\n box-sizing: inherit;\n}\n\nbody {\n min-height: 100vh;\n display: flex;\n justify-content: center;\n align-items: center;\n font-family: sans-serif;\n font-size: 20px;\n margin: 0;\n}\n\n.items {\n height: 800px;\n padding: 100px;\n width: 100%;\n border: 1px solid white;\n overflow-x: scroll;\n overflow-y: hidden;\n white-space: nowrap;\n user-select: none;\n cursor: pointer;\n transition: all 0.2s;\n transform: scale(0.98);\n will-change: transform;\n position: relative;\n background: rgba(255, 255, 255, 0.1);\n font-size: 0;\n perspective: 500px;\n}\n\n.items.active {\n background: rgba(255, 255, 255, 0.3);\n cursor: grabbing;\n cursor: -webkit-grabbing;\n transform: scale(1);\n}\n\n.item {\n width: 200px;\n height: calc(100% - 40px);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: 80px;\n font-weight: 100;\n color: rgba(0, 0, 0, 0.15);\n box-shadow: inset 0 0 0 10px rgba(0, 0, 0, 0.15);\n}\n\n.item:nth-child(9n+1) {\n background: dodgerblue;\n}\n\n.item:nth-child(9n+2) {\n background: goldenrod;\n}\n\n.item:nth-child(9n+3) {\n background: paleturquoise;\n}\n\n.item:nth-child(9n+4) {\n background: gold;\n}\n\n.item:nth-child(9n+5) {\n background: cadetblue;\n}\n\n.item:nth-child(9n+6) {\n background: tomato;\n}\n\n.item:nth-child(9n+7) {\n background: lightcoral;\n}\n\n.item:nth-child(9n+8) {\n background: darkslateblue;\n}\n\n.item:nth-child(9n+9) {\n background: rebeccapurple;\n}\n\n.item:nth-child(even) {\n transform: scaleX(1.31) rotateY(40deg);\n}\n\n.item:nth-child(odd) {\n transform: scaleX(1.31) rotateY(-40deg);\n}" }, { "path": "28 - Video Speed Controller/.vscode/settings.json", "content": "{\n \"git.ignoreLimitWarning\": true\n}" }, { "path": "28 - Video Speed Controller/README.md", "content": "# Day28 - Video Speed Controller\n\n\n## 效果图\n\n[在线效果](http://30daysofjs.michaeleinsohn.com/video-speed/)\n\n![](http://om1c35wrq.bkt.clouddn.com/day28-xiaoguotu.gif)\n\n第28天的挑战主要是拖拽右边的进度条来设置当前视频的播放速率。\n\n## HTML 源码\n\n\n```html\n\n\n\n\n \n Video Speed Scrubber\n \n\n\n\n\n

1×

\n\n\n\n```\n\n由上面的代码不难看出，UI由左边的一个video和右边的一个div组成。\n\n## CSS 代码\n\n```css\nbody {\n margin: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n background: #4C4C4C url('https://unsplash.it/1500/900?image=1021');\n background-size: cover;\n font-family: sans-serif;\n}\n\n.wrapper {\n width: 850px;\n display: flex;\n}\n\nvideo {\n box-shadow: 0 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n.speed {\n background: #efefef;\n flex: 1;\n display: flex;\n align-items: flex-start;\n margin: 10px;\n border-radius: 50px;\n box-shadow: 0 0 1px 3px rgba(0, 0, 0, 0.1);\n overflow: hidden;\n}\n\n.speed-bar {\n width: 100%;\n background: linear-gradient(-170deg, #2376ae 0%, #c16ecf 100%);\n text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 2px;\n color: white;\n height: 16.3%;\n}\n```\n\n## JS 源码\n\n```js\n\n```\n\n**代码逻辑：**\n\n- 获取组建\n\n```js\nconst speed = document.querySelector('.speed');\nconst bar = speed.querySelector('.speed-bar');\nconst video = document.querySelector('.flex');\n```\n\n\n- 监听`speed`控件，鼠标是否处于移动状态，如果在移动，调用`handleMove`函数。\n\n```js\nspeed.addEventListener('mousemove', handleMove);\n```\n\n- 改变`speed`的状态，以及及时更新`video`的`playbackRate`属性以改变播放速率\n\n```js\nfunction handleMove(e) {\n const y = e.pageY - this.offsetTop;\n const percent = y / this.offsetHeight;\n const min = 0.4;\n const max = 4;\n const height = Math.round(percent * 100) + '%';\n const playbackRate = percent * (max - min) + min;\n bar.style.height = height;\n bar.textContent = playbackRate.toFixed(2) + '×';\n video.playbackRate = playbackRate;\n}\n```\n\n\n" }, { "path": "28 - Video Speed Controller/index-FINISHED.html", "content": "\n\n\n \n Video Speed Scrubber\n \n\n\n\n

1×

\n\n\n\n\n" }, { "path": "28 - Video Speed Controller/index-START.html", "content": "\n\n\n\n \n Video Speed Scrubber\n \n\n\n\n\n

1×

\n\n \n\n\n" }, { "path": "28 - Video Speed Controller/style.css", "content": "body {\n margin: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n background: #4C4C4C url('https://unsplash.it/1500/900?image=1021');\n background-size: cover;\n font-family: sans-serif;\n}\n\n.wrapper {\n width: 850px;\n display: flex;\n}\n\nvideo {\n box-shadow: 0 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n.speed {\n background: #efefef;\n flex: 1;\n display: flex;\n align-items: flex-start;\n margin: 10px;\n border-radius: 50px;\n box-shadow: 0 0 1px 3px rgba(0, 0, 0, 0.1);\n overflow: hidden;\n}\n\n.speed-bar {\n width: 100%;\n background: linear-gradient(-170deg, #2376ae 0%, #c16ecf 100%);\n text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 2px;\n color: white;\n height: 16.3%;\n}" }, { "path": "29 - Countdown Timer/.vscode/settings.json", "content": "{\n \"git.ignoreLimitWarning\": true\n}" }, { "path": "29 - Countdown Timer/README.md", "content": "# Day29 - Countdown Timer\n\n## 效果图\n\n[在线效果](http://30daysofjs.michaeleinsohn.com/countdown-timer/)\n\n![](http://om1c35wrq.bkt.clouddn.com/day29--xiaoguotu.gif)\n\n第20天的挑战是，设置一个倒计时时间，接下来开始倒计时。\n\n## HTML代码\n\n```html\n\n\n\n\n \n Countdown Timer\n \n \n\n\n\n

\n \n \n \n \n \n \n

\n\n\n```\n\n- 上面的`button`中自定义的`data-time`为倒计时时间，以秒为单位。\n- `form`为自定义倒计时时间，以分为单位。\n- class为`display__time-left`的div主要为了展示倒计时的动态。\n- class为`display__end-time`的div主要为了展示倒计时什么时候结束。\n\n## CSS 代码\n\n```css\nhtml {\n box-sizing: border-box;\n font-size: 10px;\n background: #8E24AA;\n background: linear-gradient(45deg, #42a5f5 0%, #478ed1 50%, #0d47a1 100%);\n}\n\n*,\n*:before,\n*:after {\n box-sizing: inherit;\n}\n\nbody {\n margin: 0;\n text-align: center;\n font-family: 'Inconsolata', monospace;\n}\n\n.display__time-left {\n font-weight: 100;\n font-size: 20rem;\n margin: 0;\n color: white;\n text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.05);\n}\n\n.timer {\n display: flex;\n min-height: 100vh;\n flex-direction: column;\n}\n\n.timer__controls {\n display: flex;\n}\n\n.timer__controls>* {\n flex: 1;\n}\n\n.timer__controls form {\n flex: 1;\n display: flex;\n}\n\n.timer__controls input {\n flex: 1;\n border: 0;\n padding: 2rem;\n}\n\n.timer__button {\n background: none;\n border: 0;\n cursor: pointer;\n color: white;\n font-size: 2rem;\n text-transform: uppercase;\n background: rgba(0, 0, 0, 0.1);\n border-bottom: 3px solid rgba(0, 0, 0, 0.2);\n border-right: 1px solid rgba(0, 0, 0, 0.2);\n padding: 1rem;\n font-family: 'Inconsolata', monospace;\n}\n\n.timer__button:hover,\n.timer__button:focus {\n background: rgba(0, 0, 0, 0.2);\n outline: 0;\n}\n\n.display {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n}\n\n.display__end-time {\n font-size: 4rem;\n color: white;\n}\n```\n\n## JS代码实现逻辑\n\n```js\nlet countdown;\nconst timerDisplay = document.querySelector('.display__time-left');\nconst endTime = document.querySelector('.display__end-time');\nconst buttons = document.querySelectorAll('[data-time]');\n\nfunction timer(seconds) {\n // clear any existing timers\n clearInterval(countdown);\n\n const now = Date.now();\n const then = now + seconds * 1000;\n displayTimeLeft(seconds);\n displayEndTime(then);\n\n countdown = setInterval(() => {\n const secondsLeft = Math.round((then - Date.now()) / 1000);\n // check if we should stop it!\n if (secondsLeft < 0) {\n clearInterval(countdown);\n return;\n }\n // display it\n displayTimeLeft(secondsLeft);\n }, 1000);\n}\n\nfunction displayTimeLeft(seconds) {\n const minutes = Math.floor(seconds / 60);\n const remainderSeconds = seconds % 60;\n const display = `${minutes}:${remainderSeconds < 10 ? '0' : '' }${remainderSeconds}`;\n document.title = display;\n timerDisplay.textContent = display;\n}\n\nfunction displayEndTime(timestamp) {\n const end = new Date(timestamp);\n const hour = end.getHours();\n const adjustedHour = hour > 12 ? hour - 12 : hour;\n const minutes = end.getMinutes();\n endTime.textContent = `Be Back At ${adjustedHour}:${minutes < 10 ? '0' : ''}${minutes}`;\n}\n\nfunction startTimer() {\n const seconds = parseInt(this.dataset.time);\n timer(seconds);\n}\n\nbuttons.forEach(button => button.addEventListener('click', startTimer));\n\ndocument.customForm.addEventListener('submit', function (e) {\n e.preventDefault();\n const mins = this.minutes.value;\n console.log(mins);\n timer(mins * 60);\n this.reset();\n});\n```\n**逻辑分析：**\n- 当点击button按钮时，调用`startTimer`方法。\n```js\nbuttons.forEach(button => button.addEventListener('click', startTimer));\n```\n\n- 在输入框中自定义倒计时时间时，输入`enter`时调用传入的回调函数。\n\n```js\ndocument.customForm.addEventListener('submit', function (e) {\n e.preventDefault();\n const mins = this.minutes.value;\n console.log(mins);\n timer(mins * 60);\n this.reset();\n});\n```\n\n\n- startTimer函数代码解释\n\n```js\nfunction startTimer() {\n\n const seconds = parseInt(this.dataset.time);\n \n timer(seconds);\n}\n```\n\n\n- displayTimeLeft代码\n\n```js\n\nfunction displayTimeLeft(seconds) {\n const minutes = Math.floor(seconds / 60);\n const remainderSeconds = seconds % 60;\n const display = `${minutes}:${remainderSeconds < 10 ? '0' : '' }${remainderSeconds}`;\n document.title = display;\n timerDisplay.textContent = display;\n}\n```\n\n\n- displayEndTime代码\n\n```js\n\nfunction displayEndTime(timestamp) {\n const end = new Date(timestamp);\n const hour = end.getHours();\n const adjustedHour = hour > 12 ? hour - 12 : hour;\n const minutes = end.getMinutes();\n endTime.textContent = `Be Back At ${adjustedHour}:${minutes < 10 ? '0' : ''}${minutes}`;\n}\n```\n\n- timer代码\n\n```js\nfunction timer(seconds) {\n // clear any existing timers\n 清除正在进行的倒计时\n clearInterval(countdown);\n\n\n const now = Date.now();\n \n \n const then = now + seconds * 1000;\n \n \n displayTimeLeft(seconds);\n \n displayEndTime(then);\n\n\n countdown = setInterval(() => {\n const secondsLeft = Math.round((then - Date.now()) / 1000);\n // check if we should stop it!\n if (secondsLeft < 0) {\n clearInterval(countdown);\n return;\n }\n // display it\n displayTimeLeft(secondsLeft);\n }, 1000);\n}\n```\n" }, { "path": "29 - Countdown Timer/index.html", "content": "\n\n\n\n \n Countdown Timer\n \n \n\n\n\n

\n \n \n \n \n \n \n

\n\n \n\n\n" }, { "path": "29 - Countdown Timer/scripts-FINISHED.js", "content": "let countdown;\nconst timerDisplay = document.querySelector('.display__time-left');\nconst endTime = document.querySelector('.display__end-time');\nconst buttons = document.querySelectorAll('[data-time]');\n\nfunction timer(seconds) {\n // clear any existing timers\n clearInterval(countdown);\n\n const now = Date.now();\n const then = now + seconds * 1000;\n displayTimeLeft(seconds);\n displayEndTime(then);\n\n countdown = setInterval(() => {\n const secondsLeft = Math.round((then - Date.now()) / 1000);\n // check if we should stop it!\n if (secondsLeft < 0) {\n clearInterval(countdown);\n return;\n }\n // display it\n displayTimeLeft(secondsLeft);\n }, 1000);\n}\n\nfunction displayTimeLeft(seconds) {\n const minutes = Math.floor(seconds / 60);\n const remainderSeconds = seconds % 60;\n const display = `${minutes}:${remainderSeconds < 10 ? '0' : '' }${remainderSeconds}`;\n document.title = display;\n timerDisplay.textContent = display;\n}\n\nfunction displayEndTime(timestamp) {\n const end = new Date(timestamp);\n const hour = end.getHours();\n const adjustedHour = hour > 12 ? hour - 12 : hour;\n const minutes = end.getMinutes();\n endTime.textContent = `Be Back At ${adjustedHour}:${minutes < 10 ? '0' : ''}${minutes}`;\n}\n\nfunction startTimer() {\n const seconds = parseInt(this.dataset.time);\n timer(seconds);\n}\n\nbuttons.forEach(button => button.addEventListener('click', startTimer));\ndocument.customForm.addEventListener('submit', function (e) {\n e.preventDefault();\n const mins = this.minutes.value;\n console.log(mins);\n timer(mins * 60);\n this.reset();\n});" }, { "path": "29 - Countdown Timer/scripts-START.js", "content": "" }, { "path": "29 - Countdown Timer/style.css", "content": "html {\n box-sizing: border-box;\n font-size: 10px;\n background: #8E24AA;\n background: linear-gradient(45deg, #42a5f5 0%, #478ed1 50%, #0d47a1 100%);\n}\n\n*,\n*:before,\n*:after {\n box-sizing: inherit;\n}\n\nbody {\n margin: 0;\n text-align: center;\n font-family: 'Inconsolata', monospace;\n}\n\n.display__time-left {\n font-weight: 100;\n font-size: 20rem;\n margin: 0;\n color: white;\n text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.05);\n}\n\n.timer {\n display: flex;\n min-height: 100vh;\n flex-direction: column;\n}\n\n.timer__controls {\n display: flex;\n}\n\n.timer__controls>* {\n flex: 1;\n}\n\n.timer__controls form {\n flex: 1;\n display: flex;\n}\n\n.timer__controls input {\n flex: 1;\n border: 0;\n padding: 2rem;\n}\n\n.timer__button {\n background: none;\n border: 0;\n cursor: pointer;\n color: white;\n font-size: 2rem;\n text-transform: uppercase;\n background: rgba(0, 0, 0, 0.1);\n border-bottom: 3px solid rgba(0, 0, 0, 0.2);\n border-right: 1px solid rgba(0, 0, 0, 0.2);\n padding: 1rem;\n font-family: 'Inconsolata', monospace;\n}\n\n.timer__button:hover,\n.timer__button:focus {\n background: rgba(0, 0, 0, 0.2);\n outline: 0;\n}\n\n.display {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n}\n\n.display__end-time {\n font-size: 4rem;\n color: white;\n}" }, { "path": "30 - Whack A Mole/README.md", "content": "# Day30 - Whack A Mole\n\n\n\n## 效果图\n\n[在线效果图]()\n\n![](http://om1c35wrq.bkt.clouddn.com/day30-xiaoguotu.gif)\n\n\n第30天挑战主要是通过JS原生实现打地鼠游戏，点击开始按钮，地鼠随机在6个地洞中出现，敲中地鼠得即增加一分。\n\n## HTML 代码\n\n```html\n\n\n\n\n \n Whack A Mole!\n \n \n\n\n\n\n

Whack-a-mole! 0

\n \n\n

\n\n\n\n```\n\n- 开始游戏的按钮\n\n```html\n \n```\n\n- 展示所得分数\n\n```html\n

Whack-a-mole! 0

\n```\n\n- 地洞、地鼠\n\n```html\n

\n```\n\n`hole`为地洞，地洞中有一个地鼠`mole`。\n\n## CSS 代码\n\n```css\nhtml {\n box-sizing: border-box;\n font-size: 10px;\n background: #ffc600;\n}\n\n*,\n*:before,\n*:after {\n box-sizing: inherit;\n}\n\nbody {\n padding: 0;\n margin: 0;\n font-family: 'Amatic SC', cursive;\n}\n\nh1 {\n text-align: center;\n font-size: 10rem;\n line-height: 1;\n margin-bottom: 0;\n}\n\n.score {\n background: rgba(255, 255, 255, 0.2);\n padding: 0 3rem;\n line-height: 1;\n border-radius: 1rem;\n}\n\n.game {\n width: 600px;\n height: 400px;\n display: flex;\n flex-wrap: wrap;\n margin: 0 auto;\n}\n\n.hole {\n flex: 1 0 33.33%;\n overflow: hidden;\n position: relative;\n}\n\n.hole:after {\n display: block;\n background: url(dirt.svg) bottom center no-repeat;\n background-size: contain;\n content: '';\n width: 100%;\n height: 70px;\n position: absolute;\n z-index: 2;\n bottom: -30px;\n}\n\n.mole {\n background: url('mole.svg') bottom center no-repeat;\n background-size: 60%;\n position: absolute;\n top: 100%;\n width: 100%;\n height: 100%;\n transition: all 0.4s;\n}\n\n.hole.up .mole {\n top: 0;\n}\n```\n\n- `dirt.svg`为地洞的图片\n\n- `mole.svg`为地鼠的图片\n\n## JS代码\n\n```js\n \n```\n\n- 获取所有的地洞、得分、地鼠标签\n\n```js\nconst holes = document.querySelectorAll('.hole');\nconst scoreBoard = document.querySelector('.score');\nconst moles = document.querySelectorAll('.mole');\n```\n\n- 初始化变量\n\n```js\nlet lastHole; //用于存储上一次的地洞，主要用于和下一次做对比\nlet timeUp = false; //判断时间是否结束\nlet score = 0; //记录得分\n```\n\n- 事件监听\n\n```js\n\nmoles.forEach(mole => mole.addEventListener('click', bonk));\n```\n\n- isTrusted属性\n\n```js\nfunction bonk(e) {\n if (!e.isTrusted) return; // 判断是不是操作者操作，而非代码程序操作!\n score++; // 得一分\n this.parentNode.classList.remove('up'); // 隐藏地鼠\n scoreBoard.textContent = score; //更新得分\n}\n```\n\n[Event.isTrusted](https://developer.mozilla.org/zh-TW/docs/Web/API/Event/isTrusted)\n\n`Event` 界面的 `isTrusted` 只读属性为一个布林值，若事件物件是由使用者操作而产生，則 `isTrusted` 值为 true。若事件物件是由程式码所建立、修改，或是透过 `EventTarget.dispatchEvent()` 来触发，则`isTrusted` 值为 `false`。\n\n\n- 开始游戏\n\n```js\nfunction startGame() {\n scoreBoard.textContent = 0; //清空得分\n timeUp = false; //将时间是否结束标志设置为false\n score = 0; //得分归零\n peep(); //调用peep()函数\n setTimeout(() => timeUp = true, 10000) //设置倒计时\n}\n```\n\n- randomTime设置一个`min - max`之间的随机数\n\n[Math.round](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/round)\n\n```js\nMath.round( 20.49); // 20\nMath.round( 20.5); // 21\nMath.round( 42 ); // 42\nMath.round(-20.5); // -20\nMath.round(-20.51); // -21\n```\n\n```js\nfunction randomTime(min, max) {\n //Math.round() 函数返回一个数字四舍五入后最接近的整数值。\n //Math.random() 函数返回一个浮点, 伪随机数在范围[0，1)，然后您可以缩放到所需的范围。\n return Math.round(Math.random() * (max - min) + min);\n}\n```\n\n- randomHole函数\n\n[Math.floor](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/floor)\n\n```js\nMath.floor( 45.95); // 45\nMath.floor( 45.05); // 45\nMath.floor( 4 ); // 4\nMath.floor(-45.05); // -46 \nMath.floor(-45.95); // -46\n```\n\n```js\n//随机选出一个地洞，用于弹出地鼠\nfunction randomHole(holes) {\n //Math.floor() 返回小于或等于一个给定数字的最大整数。\n const idx = Math.floor(Math.random() * holes.length);\n const hole = holes[idx];\n if (hole === lastHole) {\n console.log('Ah nah thats the same one bud');\n return randomHole(holes);\n }\n lastHole = hole;\n return hole;\n}\n```\n\n\n- peep()函数\n\n```js\n// 地鼠、地洞处理函数\nfunction peep() {\n //产生一个随机数，这个数主要用于设置当前的地鼠什么时候消失\n const time = randomTime(200, 1000);\n //随机产生一个 0 - 5的值，用于随机选择一个地洞\n const hole = randomHole(holes);\n //弹出地鼠\n hole.classList.add('up');\n //time时间后地鼠消失\n setTimeout(() => {\n hole.classList.remove('up');\n //如果倒计时没到，继续调用peep()函数\n if (!timeUp) \n peep();\n }, time);\n}\n```\n\n\n" }, { "path": "30 - Whack A Mole/index-FINISHED.html", "content": "\n\n\n\n \n Whack A Mole!\n \n \n\n\n\n\n

Whack-a-mole! 0

\n \n\n

\n\n \n\n\n" }, { "path": "30 - Whack A Mole/index-START.html", "content": "\n\n\n\n \n Whack A Mole!\n \n \n\n\n\n\n

Whack-a-mole! 0

\n \n\n

\n\n \n\n\n" }, { "path": "30 - Whack A Mole/style.css", "content": "html {\n box-sizing: border-box;\n font-size: 10px;\n background: #ffc600;\n}\n\n*,\n*:before,\n*:after {\n box-sizing: inherit;\n}\n\nbody {\n padding: 0;\n margin: 0;\n font-family: 'Amatic SC', cursive;\n}\n\nh1 {\n text-align: center;\n font-size: 10rem;\n line-height: 1;\n margin-bottom: 0;\n}\n\n.score {\n background: rgba(255, 255, 255, 0.2);\n padding: 0 3rem;\n line-height: 1;\n border-radius: 1rem;\n}\n\n.game {\n width: 600px;\n height: 400px;\n display: flex;\n flex-wrap: wrap;\n margin: 0 auto;\n}\n\n.hole {\n flex: 1 0 33.33%;\n overflow: hidden;\n position: relative;\n}\n\n.hole:after {\n display: block;\n background: url(dirt.svg) bottom center no-repeat;\n background-size: contain;\n content: '';\n width: 100%;\n height: 70px;\n position: absolute;\n z-index: 2;\n bottom: -30px;\n}\n\n.mole {\n background: url('mole.svg') bottom center no-repeat;\n background-size: 60%;\n position: absolute;\n top: 100%;\n width: 100%;\n height: 100%;\n transition: all 0.4s;\n}\n\n.hole.up .mole {\n top: 0;\n}" }, { "path": "31 - Canvas CountClock/Countdown.html", "content": "\n\n\n \n canvas倒计时特效\n \n\n\n

\n \n \n\n" }, { "path": "31 - Canvas CountClock/Countdown.js", "content": "/*\n* @Author: Administrator\n* @Date: 2018-12-22 15:41:18\n* @Last Modified by: Administrator\n* @Last Modified time: 2018-12-23 20:19:12\n*/\n // 主干程序放在了页面加载函数中，封装各个函数供主干程序调用，将都用到的变量提出作为全局变量。\n //定义的是全局变量，不仅在页面加载函数中能用，在自定义函数中也能使用。\n // let WINDOW_WIDTH=1090;\n // let WINDOW_HEIGHT=768;\n // let RADIUS=8;\n // let MARGIN_LEFT=60;\n // let MARGIN_TOP=200;\n // const endTime = new Date(2018,11,22,23,00,00); //设置倒计时的截止时间\n \n let endTime = new Date();\n endTime.setTime(endTime.getTime() + 3600*1000); //倒计时截止时间是当前时间之后的一个小时。 \n let curShowTimeSeconds=0; //用于显示当前距离截止时间的毫秒数。\n\n let balls=[];//用于存放小球，将新增加的小球添加进去。\n //预设小球的颜色值，生成的小球来随机取其中的某一个值。\n const colors=[\"#33B545\",\"#009CC\",\"#AA66CC\",\"#9933CC\",\"#99CC00\",\"#669900\",\"#FFBB33\",\"#FF8800\",\"#FF4444\",\"#CC0000\"];\n //当页面尺寸大小改变时，进行页面刷新。\n // let innerWidth = window.innerWidth;\n // let innerHeight = window.innerHeight;\n // function resizeFresh(){\n // if(innerWidth!=window.innerWidth|| innerHeight!=window.innerHeight){\n // location.reload();\n // }\n // }\n //当页面尺寸大小改变时，进行页面刷新。\n window.onresize = function(){\n location.reload();\n }\n //页面加载函数\n window.onload=function(){\n console.log(\"ddd\");\n WINDOW_HEIGHT = document.body.clientHeight;\n WINDOW_WIDTH = document.body.clientWidth;\n MARGIN_LEFT = Math.round(WINDOW_WIDTH/10); //除去时钟显示部分的五分之四，剩下的五分之一再左右进行两等分。\n RADIUS = Math.round(WINDOW_WIDTH*(4/5)/108)-1;//时钟的显示部分占据整个网页可视区域的（4/5），时钟的第一个数字是从x=0开始的，根据每一个数字的宽度进行计算得到是108，\n MARGIN_TOP = Math.round(WINDOW_HEIGHT/5);\n\n let canvas = document.querySelector(\"#canvas\");\n let context = canvas.getContext(\"2d\");\n canvas.width = WINDOW_WIDTH;\n canvas.height= WINDOW_HEIGHT;\n\n curShowTimeSeconds = getCurrentShowTimeSeconds();\n setInterval(()=>{\n render(context);\n update();\n console.log(balls.length);\n },50);\n }\n\n //通过这个函数得到当前距离截止时间显示的毫秒数。\n function getCurrentShowTimeSeconds(){\n var curTime = new Date();\n var ret = endTime.getTime()-curTime.getTime(); //截止时间减去当前时间得到的毫秒数。\n ret = Math.round(ret/1000);//将毫秒数转换为秒数。\n return ret >= 0 ? ret : 0; \n }\n\n // 更新函数：1.更新时间；2.更新动画，3.生成小球\n function update(){\n //得到下一次距离截止时间的秒数。\n let nextShowTimeSeconds = getCurrentShowTimeSeconds();//注意getCurrentShowTimeSeconds这里掉了括号“（）”也就是说没有执行函数。\n let nextHours = parseInt( nextShowTimeSeconds / 3600);\n let nextMinutes = parseInt((nextShowTimeSeconds-nextHours*3600)/60);\n let nextSeconds = parseInt(nextShowTimeSeconds%60);\n\n let curHours = parseInt(curShowTimeSeconds/3600); \n let curMinutes = parseInt((curShowTimeSeconds-curHours*3600)/60); \n let curSeconds = parseInt(curShowTimeSeconds%60); \n //如果时间发生改变，将改变后的时间赋予给当前时间；根据改变的是哪个数字，来给该数字添加小球。\n if(nextSeconds!=curSeconds){\n curShowTimeSeconds=nextShowTimeSeconds;\n //时针的十位数改变时，在相应数字的位置处添加小球。\n if(parseInt(curHours/10)!=parseInt(nextHours/10)){\n addBalls(MARGIN_LEFT, MARGIN_TOP, parseInt(curHours/10));\n }\n if(parseInt(curHours%10)!=parseInt(nextHours%10)){\n addBalls(MARGIN_LEFT+15*(RADIUS+1), MARGIN_TOP, parseInt(curHours%10));\n }\n\n if(parseInt(curMinutes/10)!=parseInt(nextMinutes/10)){\n addBalls(MARGIN_LEFT+39*(RADIUS+1), MARGIN_TOP, parseInt(curMinutes/10));\n }\n if(parseInt(curMinutes%10)!=parseInt(nextMinutes%10)){\n addBalls(MARGIN_LEFT+54*(RADIUS+1), MARGIN_TOP, parseInt(curMinutes%10));\n }\n\n if(parseInt(curSeconds/10)!=parseInt(nextSeconds/10)){\n addBalls(MARGIN_LEFT+78*(RADIUS+1), MARGIN_TOP, parseInt(curSeconds/10));\n }\n if(parseInt(curSeconds%10)!=parseInt(nextSeconds%10)){\n addBalls(MARGIN_LEFT+93*(RADIUS+1), MARGIN_TOP, parseInt(curSeconds%10));\n }\n \n }\n updateBalls();//更新每个小球的运动状态。\n }\n\n //小球运动状态的更新设置。\n function updateBalls(){\n for(let i=0;i= WINDOW_HEIGHT-RADIUS){\n balls[i].y = WINDOW_HEIGHT-RADIUS;//小球落到底部的位置 \n balls[i].vy = -balls[i].vy*0.75; //速度反向，进行反弹,0.5表示摩擦系数，每次反弹速度都减半。\n }\n }\n // 将滚出画布的小球进行删除处理。\n balls=balls.filter((item)=>{\n return item.x+RADIUS>0 && item.x - RADIUS < WINDOW_WIDTH;\n });\n\n // 将滚出画布的小球进行删除处理。\n // let cnt=0;\n // for(let i=0;i0&&balls[i].x - RADIUS < WINDOW_WIDTH){ //小球的右边缘只要大于0，左边缘小于画布宽度就就符合，可以用左右临近或出去一半画布的小球进行分析。\n // balls[cnt++]=balls[i];//遍历整个balls数组，将符合要求的小球放在以cnt计数的数组中\n // }\n // }\n // //经过上面的上面的这一组循环之后，可以知道cnt之前包括cnt的数据项都是符合的小球，后面的便是不符的，进行一项一项删除。\n // while(balls.length>cnt){\n // balls.pop();\n // }\n\n }\n\n //遍历循环每一个数的点阵屏，在点阵屏上数字为“1”处生成小球函数，将生成的小球放到数组ball中。\n function addBalls(x,y,num){\n for(let i=0;i{\n render(context);\n update();\n console.log(balls.length);\n },50);\n }\n```\n- 通过这个函数得到当前距离截止时间显示的毫秒数。\n```javascript\nfunction getCurrentShowTimeSeconds(){\n var curTime = new Date();\n var ret = endTime.getTime()-curTime.getTime(); //截止时间减去当前时间得到的毫秒数。\n ret = Math.round(ret/1000);//将毫秒数转换为秒数。\n return ret >= 0 ? ret : 0; \n}\n```\n- 更新函数：1.更新时间；2.更新动画，3.生成小球\n```javascript\n function update(){\n //得到下一次距离截止时间的秒数。\n let nextShowTimeSeconds = getCurrentShowTimeSeconds();//注意getCurrentShowTimeSeconds这里掉了括号“（）”也就是说没有执行函数。\n let nextHours = parseInt( nextShowTimeSeconds / 3600);\n let nextMinutes = parseInt((nextShowTimeSeconds-nextHours*3600)/60);\n let nextSeconds = parseInt(nextShowTimeSeconds%60);\n\n let curHours = parseInt(curShowTimeSeconds/3600); \n let curMinutes = parseInt((curShowTimeSeconds-curHours*3600)/60); \n let curSeconds = parseInt(curShowTimeSeconds%60); \n //如果时间发生改变，将改变后的时间赋予给当前时间；根据改变的是哪个数字，来给该数字添加小球。\n if(nextSeconds!=curSeconds){\n curShowTimeSeconds=nextShowTimeSeconds;\n //时针的十位数改变时，在相应数字的位置处添加小球。\n if(parseInt(curHours/10)!=parseInt(nextHours/10)){\n addBalls(MARGIN_LEFT, MARGIN_TOP, parseInt(curHours/10));\n }\n if(parseInt(curHours%10)!=parseInt(nextHours%10)){\n addBalls(MARGIN_LEFT+15*(RADIUS+1), MARGIN_TOP, parseInt(curHours%10));\n }\n\n if(parseInt(curMinutes/10)!=parseInt(nextMinutes/10)){\n addBalls(MARGIN_LEFT+39*(RADIUS+1), MARGIN_TOP, parseInt(curMinutes/10));\n }\n if(parseInt(curMinutes%10)!=parseInt(nextMinutes%10)){\n addBalls(MARGIN_LEFT+54*(RADIUS+1), MARGIN_TOP, parseInt(curMinutes%10));\n }\n\n if(parseInt(curSeconds/10)!=parseInt(nextSeconds/10)){\n addBalls(MARGIN_LEFT+78*(RADIUS+1), MARGIN_TOP, parseInt(curSeconds/10));\n }\n if(parseInt(curSeconds%10)!=parseInt(nextSeconds%10)){\n addBalls(MARGIN_LEFT+93*(RADIUS+1), MARGIN_TOP, parseInt(curSeconds%10));\n }\n \n }\n updateBalls();//更新每个小球的运动状态。\n }\n```\n- //小球运动状态的更新设置。\n```javascript\n //小球运动状态的更新设置。\n function updateBalls(){\n for(let i=0;i= WINDOW_HEIGHT-RADIUS){\n balls[i].y = WINDOW_HEIGHT-RADIUS;//小球落到底部的位置 \n balls[i].vy = -balls[i].vy*0.75; //速度反向，进行反弹,0.5表示摩擦系数，每次反弹速度都减半。\n }\n }\n // 将滚出画布的小球进行删除处理。\n balls=balls.filter((item)=>{\n return item.x+RADIUS>0 && item.x - RADIUS < WINDOW_WIDTH;\n });\n\n // 将滚出画布的小球进行删除处理。\n // let cnt=0;\n // for(let i=0;i0&&balls[i].x - RADIUS < WINDOW_WIDTH){ //小球的右边缘只要大于0，左边缘小于画布宽度就就符合，可以用左右临近或出去一半画布的小球进行分析。\n // balls[cnt++]=balls[i];//遍历整个balls数组，将符合要求的小球放在以cnt计数的数组中\n // }\n // }\n // //经过上面的上面的这一组循环之后，可以知道cnt之前包括cnt的数据项都是符合的小球，后面的便是不符的，进行一项一项删除。\n // while(balls.length>cnt){\n // balls.pop();\n // }\n\n }\n```\n- //遍历循环每一个数的点阵屏，在点阵屏上数字为“1”处生成小球函数，将生成的小球放到数组ball中。\n```javascript\n function addBalls(x,y,num){\n for(let i=0;i 由下面的数字点阵图可以知道，每一个点阵屏都是十行7列，也就是说每一个数字显示所占据的宽度是7*2*(RADIUS+1)=14*(RADIUS+1),为了让数字之间留有间隙，不让数字紧紧挨着，所以每一块点阵屏（显示一个数字）的宽度设置为15*(RADIUS+1)，冒号的宽度是4*2*(RADIUS+1)=8*(RADIUS+1)，同样为了布局美观采用9*(RADIUS+1)。 \n- 数字点阵的图示 \n![](https://github.com/SUNNERCMS/30daysJavascript/blob/master/31%20-%20Canvas%20CountClock/image/digit.PNG) \n\t\n> `cxt.arc(x+(RADIUS+1)+j*2*(RADIUS+1),y+(RADIUS+1)+i*2*(RADIUS+1),RADIUS,0,2*Math.PI); `参数里面是每一个小圆点的圆心的坐标位置，从坐标x,y开始，每一个小方格的距离是2*(RADIUS+1)。\n\n\n- 将每一位数字进行粒子化\n```javascript\n function renderdigit(x,y,num,cxt){\n cxt.fillStyle=\"rgb(0,102,153)\";\n for(let i=0;i 代码分析：renderdigit(x,y,num,cxt)：参数x,y表示当前这位数字的位置， num是要进行粒子化的数字，cxt是画布上下文。 \n这里的digit[num]是点阵中具体哪一块，刚好点阵我们设置规则是：点阵的0项块对应数字“0”以此类推，可以用要渲染哪一个数字来到点阵中取得相应的那一项。 \n\n### 补充知识点\n- random() 方法可返回介于 0 ~ 1 之间的一个随机数。 \n- Math.pow(base, exponent) 函数返回基数（base）的指数（exponent）次幂。 \n\n- 屏幕自适应的处理 \nWINDOW_HEIGHT = document.body.clientHeight; \nWINDOW_WIDTH = document.body.clientWidth; \nMARGIN_LEFT = Math.round(WINDOW_WIDTH/10); //除去时钟显示部分的五分之四，剩下的五分之一再左右进行两等分。 \nRADIUS = Math.round(WINDOW_WIDTH*(4/5)/108)-1;//时钟的显示部分占据整个网页可视区域的（4/5），时钟的第一个数字是从x=0开始的，根据每一个数字的宽度进行计算得到是108， \nMARGIN_TOP = Math.round(WINDOW_HEIGHT/5); \n\n- Date.setTime(millisec),setTime() 方法以毫秒设置 Date 对象。 \n要设置的日期和时间据 GMT 时间 1970 年 1 月 1 日午夜之间的毫秒数 \n\n- window.onresize = function(){ }\n- onresize 事件会在窗口或框架被调整大小时发生。 \n- location.reload() 方法用于重新加载当前文档。 \n" }, { "path": "LICENSE", "content": "MIT License\n\nCopyright (c) 2018 SUNNERCMS\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n" }, { "path": "README.md", "content": "[纯CSS/CSS3制作的动画小demo](https://github.com/SUNNERCMS/CSS-CSS3-Animation-effects) \n# JavaScript 30天每日效果图 \n\n在Github上看到了[wesbos](https://twitter.com/wesbos)的一个Javascript30天挑战的[repo](https://github.com/wesbos/JavaScript30)，旨在使用纯JS来进行练习，不允许使用任何其他的库和框架，该挑战共30天，我会在这里复现这30天遇到的挑战与问题，将其教程化、视频化分享给大家。实例在我学习过程中有所补充，具体实例多于30个。\n\n[在线查看JS30所有项目效果图](http://30daysofjs.michaeleinsohn.com/)\n\n## Day01 - JavaScript Drum Kit\n![](http://oslwafb71.bkt.clouddn.com/small0.jpg)\n\n## Day02 - JS and CSS Clock\n![](https://github.com/SUNNERCMS/30daysJavascript/blob/master/02%20-%20JS%20and%20CSS%20Clock/image/GIF.gif) \n\n## Day03 - CSS Variables\n![](https://github.com/SUNNERCMS/30daysJavascript/blob/master/03%20-%20CSS%20Variables/GIF.gif)\n\n## Day04 - Array Cardio Day 1\n![](http://oslwafb71.bkt.clouddn.com/small3.jpg)\n\n## Day05 - Flex Panel Gallery\n![](http://oslwafb71.bkt.clouddn.com/small4.jpg)\n\n## Day06 - Quick match\n![](https://github.com/SUNNERCMS/30daysJavascript/blob/master/06%20-%20Fetch%E3%80%81filter%E3%80%81%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F%E5%AE%9E%E7%8E%B0%E5%BF%AB%E9%80%9F%E5%8F%A4%E8%AF%97%E5%8C%B9%E9%85%8D/DemoGIF.gif)\n\n## Day07 - Array Cardio Day 2\n![](http://oslwafb71.bkt.clouddn.com/small6.jpg)\n\n## Day08 - Fun with HTML5 Canvas\n![](https://github.com/SUNNERCMS/30daysJavascript/blob/master/08%20-%20HTML5%20Canvas%20%E5%AE%9E%E7%8E%B0%E5%BD%A9%E8%99%B9%E7%94%BB%E7%AC%94%E7%BB%98%E7%94%BB%E6%9D%BF/GIF.gif)\n\n## Day09 - Dev Tools Domination\n![](http://oslwafb71.bkt.clouddn.com/small8.jpg)\n\n## Day10 - Hold Shift and Check Checkboxes\n![](https://github.com/SUNNERCMS/30daysJavascript/blob/master/10%20-%20JS%20%E5%AE%9E%E7%8E%B0%20Checkbox%20%E4%B8%AD%E6%8C%89%E4%BD%8F%20Shift%20%E7%9A%84%E5%A4%9A%E9%80%89%E5%8A%9F%E8%83%BD/GIF.gif)\n\n## Day11 - Custom Video Player\n![](https://github.com/SUNNERCMS/30daysJavascript/blob/master/11%20-%20%E8%87%AA%E5%AE%9A%E4%B9%89%E8%A7%86%E9%A2%91%E6%92%AD%E6%94%BE%E5%99%A8/GIF.gif)\n\n## Day12 - Key Sequence Detection\n![](https://github.com/SUNNERCMS/30daysJavascript/blob/master/12%20-%20%E9%94%AE%E7%9B%98%E8%BE%93%E5%85%A5%E5%BA%8F%E5%88%97%E7%9A%84%E9%AA%8C%E8%AF%81%E6%8C%87%E5%8D%97/GIF.gif) \n\n## Day13 - Slide in on Scroll\n![](https://github.com/SUNNERCMS/30daysJavascript/blob/master/13%20-%20%E5%9B%BE%E7%89%87%E9%9A%8F%E5%B1%8F%E5%B9%95%E6%BB%9A%E5%8A%A8%E8%80%8C%E6%BB%91%E5%85%A5%E6%BB%91%E5%87%BA%E7%9A%84%E6%95%88%E6%9E%9C/demoshow/GIF.gif)\n\n## Day14 - JavaScript References VS Copying\n![](https://github.com/SUNNERCMS/30daysJavascript/blob/master/14%20-%20JavaScript%20%E5%BC%95%E7%94%A8%E5%92%8C%E5%80%BC%E6%8B%B7%E8%B4%9D/showpicture.PNG)\n\n## Day15 - LocalStorage\n![](https://github.com/SUNNERCMS/30daysJavascript/blob/master/15%20-%20LocalStorage/GIF.gif)\n\n## Day16 - Mouse Move Shadow\n![](https://github.com/SUNNERCMS/30daysJavascript/blob/master/16%20-%20%E7%A7%BB%E5%8A%A8%E9%BC%A0%E6%A0%87%E8%AE%A9%E5%AD%97%E4%BD%93%E5%91%88%E7%8E%B0%E5%BD%A9%E8%99%B9%E6%95%88%E6%9E%9C/show.PNG)\n\n## Day17 - Sort Without Articles\n![](https://github.com/SUNNERCMS/30daysJavascript/blob/master/17%20-%20%E6%95%B0%E7%BB%84%E6%8E%92%E5%BA%8F/show.PNG)\n\n## Day18 - Adding Up Times with Reduce\n\n![](https://github.com/SUNNERCMS/30daysJavascript/blob/master/18%20-%20Day18%20-%20Reduce%E3%80%81Map%E6%B7%B7%E5%90%88%E4%BD%BF%E7%94%A8%E8%AE%A1%E7%AE%97%E6%97%B6%E5%88%86%E7%A7%92/show.PNG)\n\n## Day19 - Webcam Fun\n![](http://oslwafb71.bkt.clouddn.com/small18.jpg)\n\n## Day20 - Speech Detection\n![](http://oslwafb71.bkt.clouddn.com/small19.jpg)\n\n## Day21 - Geolocation\n![](https://github.com/SUNNERCMS/30daysJavascript/blob/master/21%20-%20Geolocation/show.PNG)\n\n## Day22 - Follow Along Link Highlighter\n![](https://github.com/SUNNERCMS/30daysJavascript/blob/master/22%20-%20Follow%20Along%20Link%20Highlighter/SHOWGIF.gif)\n\n## Day23 - Speech Synthesis\n![](http://oslwafb71.bkt.clouddn.com/small22.jpg)\n\n## Day24 - Sticky Nav\n![](http://oslwafb71.bkt.clouddn.com/small23.jpg)\n\n## Day25 - Event Capture, Propagation, Bubbling and Once\n![](http://oslwafb71.bkt.clouddn.com/small24.jpg)\n\n## Day26 - Stripe Follow Along Nav\n![](http://oslwafb71.bkt.clouddn.com/small25.jpg)\n\n## Day27 - Click and Drag\n![](http://oslwafb71.bkt.clouddn.com/small26.jpg)\n\n## Day28 - Video Speed Controller\n![](http://oslwafb71.bkt.clouddn.com/small27.jpg)\n\n## Day29 - Countdown Timer\n![](http://oslwafb71.bkt.clouddn.com/small28.jpg)\n\n## Day30 - Whack A Mole\n![](http://oslwafb71.bkt.clouddn.com/small29.jpg)\n\n## Day31 - Canvas CountdownClock \n![](https://github.com/SUNNERCMS/30daysJavascript/blob/master/31%20-%20Canvas%20CountClock/image/GIF.gif)\n\n本人博客：https://sunzhaoxiang.com \n欢迎关注微信公众号：一线开发\n" } ]

Update CSS Variables with JS

Update CSS Variables with JS

Slide In On Scroll

LOCAL TAPAS

LOCAL TAPAS

🔥liyc1215

\n 0\n KM/H\n

\n 0\n KM/H\n