1. 不知道有没有人和我一样，感觉点击一处后其他地方没有归位很不舒服，就改进了一下在点击时归位其他元素。
2. 还有双击问题，还有个JS的解决方法，直接在toggle open后面toggle open-active，和原效果一致，好处是不用修改CSS了

const panels = Array.from(document.querySelectorAll('.panel'));

function toggleOpen(e) {
  this.classList.toggle('open');
  this.classList.toggle('open-active');
  // get siblings
  var s = [].filter.call(this.parentNode.children, (child)=>child!==this);
  s.forEach(s=>s.classList.remove('open')) 
}


panels.forEach(panel => panel.addEventListener('click', toggleOpen));

PS：昨天在Issue里被@后才发现这里，解决了自己的一个纠结问题，真是不错，一起学习哈～

妹纸哎，好稀有，棒棒的。

第二个案例使用的是 transform 那几个指针到 0 秒/分/时 的时候，会变成0，然后指针就从 450deg -> 90deg ，有个跳顿的情况

let secondDeg = 0,
	minDeg = 0,
	hourDeg = 0

setDate()

function setDate() {
	const date = new Date()
	const second = date.getSeconds()
	secondDeg = 90 + (second / 60) * 360
	const min = date.getMinutes()
	minDeg = 90 + (min / 60) * 360 + ((second / 60) / 60) * 360
	const hour = date.getHours()
	hourDeg = 90 + (hour / 12) * 360 + ((min / 60) / 12) * 360 + (((second / 60) / 60) / 12) * 360
	changeDate(secondDeg, minDeg, hourDeg)
}

function updateDate() {
	secondDeg += (1 / 60) * 360
	minDeg += ((1 / 60) / 60) * 360
	hourDeg += (((1 / 60) / 60) / 12)
	changeDate(secondDeg, minDeg, hourDeg)
}

function changeDate(s, m, h) {
	secHand.style.transform = `rotate(${ s }deg)`
	minHand.style.transform = `rotate(${ m }deg)`
	hourHand.style.transform = `rotate(${ h }deg)`
}

setInterval(updateDate, 1000)

我这里打算 setDate 初始化时间以后，一秒一秒地 updateDate 去改变时间

在长按某个键之后松开样式没有恢复...

问题：我在看到04 - Array Cardio Day 1/index-SOYAINE.html文件第105行时，发现此处的people参数并没有passed与year，
而在同一文件夹的index-FINISHED.html文件中，此处people文件的位置显示的是inventors（处于第65行）

比较代码：
index-SOYAINE.html：
// 5. Sort the inventors by years lived、
// 按照他们在世的岁数进行排序
const oldest = people.sort((a, b) => {
const last = a.passed - a.year;
const next = b.passed - b.year;
return (next < last) ? -1 : 1;
});
console.table(oldest);

index-FINISHED.html：
// 5. Sort the inventors by years lived
const oldest = inventors.sort(function(a, b) {
const lastInventor = a.passed - a.year;
const nextInventor = b.passed - b.year;
return lastInventor > nextInventor ? -1 : 1;
});
console.table(oldest);

问题

页面加载一段时间后再点击创建定时器的按钮，显示的结束时间与实际情况不符。

解决

用于获取当前时间的实例 date 在页面加载时就已作为全局变量创建，并且之后无法更新，计时结束的时间均以页面加载的时刻为基准计算，导致出现错误。
可将 Date 实例的创建放在 updateTime 函数内，每次点击按钮就重新获取当前时间：

function updateTime(delta){
    let currentTime = new Date().getTime();
    left = left + parseInt(delta,0);
    end = currentTime + left*1000;
    leftTime.innerHTML = left;
    endTime.innerHTML =new Date(end).toLocaleTimeString();
}

位置

JavaScript30/29 - Countdown Timer/scripts-START.js

Line 38 in 1b044bc

end = date.getTime() + left*1000;

问题

当清空输入框时 search 的 value 为空，此时所有诗句全部符合匹配规则，导致它们全部显示在页面中。

解决

在 displayMatches 函数开头添加一个判断，如果输入框为空不做处理：

if (!this.value) {
    return
}

位置

JavaScript30/06 - Type Ahead/index-SOYAINE.html

Line 38 in 1b044bc

function displayMatches() {

缉熙你好，该程序中的 debounce 防抖 我觉得应该是 throttle 节流。

debounce 防抖

debounce 防抖 应该是在用户停止触发某个事件一段时间后，该事件的处理程序被触发。

比如输入用户名时的验证，应该等到用户输入完成，也就是停止输入后才触发，而不是在用户每次输入一段时间后就触发验证程序。用户名有长有短，不能在用户还未输入完成时就提示错误。

throttle 节流

throttle 节流 则是限制事件处理程序被调用的频率，在固定的时间内只会调用一次。

该程序只是为了限制 scroll 事件处理程序被调用的次数，这里应该是 throttle 节流。

但我注意看了该程序的作用，确实是限制了 scroll 事件处理程序被调用的次数，那么就是名字起错了。

这里贴一段稍微容易理解的 throttle 节流 函数，该程序中的写法感觉好复杂：

function throttle (func, interval) {
  let startTime = Date.now()

  return function (...args) {
    const currentTime = Date.now()
    if (currentTime - startTime > interval) {
      func(...args)
      startTime = currentTime
    }
  }
}

console.log("输出一个小数是 %d ", 1.23); //1.23

這個部份有錯誤，要用 %f 才會是小數

在解决秒针突然跳动的 方法二中的

function updateDate() {
	secondDeg += (1 / 60) * 360;
	minDeg += ((1 / 60) / 60) * 360;
	hourDeg += (((1 / 60) / 60) / 12);
	
	secHand.style.transform = `rotate(${ secondDeg}deg)`;
	minHand.style.transform = `rotate(${ minDeg }deg)`;
	hourHand.style.transform = `rotate(${ hourDeg }deg)`;
}

建议改成

function updateDate() {
	secondDeg = (secondDeg + (1 / 60) * 360) % 360;
	minDeg = (minDeg + ((1 / 60) / 60) * 360) % 360;
	hourDeg = (hourDeg + (((1 / 60) / 60) / 12)) % 360;
	
	secHand.style.transform = `rotate(${ secondDeg}deg)`;
	minHand.style.transform = `rotate(${ minDeg }deg)`;
	hourHand.style.transform = `rotate(${ hourDeg }deg)`;
}

请问一下，视频的百度云链接在哪呢？官网底部没有看到。

如题，
软件爱好者，IT圈外人，没有动手能力 ，

这两天正在找，刚好看到了，不知道有没有能使用 的成品插件？

若否，有推荐的吗？

1. 错误描述
   repo的文件夹名拼写错误：Stripe-->Strip ，导致目录中Guide和Demo地址无法正确链接

2. 修复方法

官网最下面好像并没有提供百度云的下载链接，只有在课程界面才有。作者是找到了吗？

作者你好，本人刚入门前端学习，在这个项目中注意到html文件中并未定义playing类，而css中却有对playing的属性编辑，这是有关css伪类吗？望解答谢谢🙏

gogole浏览器中 设置currentTime

03-CSS-Variable： Guide地址错误
原因：地址里Variable前多了一个%

播放/暂停的功能實現部份，只有寫到 video 點擊的監聽
缺少了播放按鈕的監聽
toggle.addEventListener('click', togglePlay);

transition 的样式属性默认是all，在样式里设置为transform

.key{
  transition: .15s transform linear;
}

这样，removeTransition就可以改成

 function removeTransition(event){
  /* if (event.propertyName !== 'transform') return; */ // 这句话不要了
  event.target.classList.remove('playing')
}

search.addEventListener('change', displayMatches);
search.addEventListener('keyup', displayMatches);

可以替换为一个

search.addEventListener('input', displayMatches);

写的很好，而且整理了资源，感谢！

问题

function setHanld(){
      const suffix = this.dataset.sizing || '';
      // console.log(suffix);
     ....
    }
    inputs.forEach(input => input.addEventListener("mousemove",setHanld)); 

当鼠标只要经过input就会执行setHanld,性能上会不会有点问题

百度网盘云链接被和谐了，能不能更新一个，谢谢！！

JS + CSS Clock 的README.md字打错了

里面所有的transform-origin 都打成了 transform-oragin了

.clock-face {
        position: relative;
        width: 100%;
        height: 100%;
        transform: translateY(-3px); /* account for the height of the clock hands */
}

transform: translateY(-3px); 应该删除，此处是hand指针高度为6px时，使其居中
而你的分别为时分秒设定不同的高度，并通过margin-top：-height/2 使其居中了

Refer to your words

最后需要注意的是：在前面的例子里面，我们用的数组和对象都只是一层嵌套，Lodash 有一个深度复制的方法，但你使用之前需要多考虑一下。

Actually, the JSON parse and stringify method, const dev2 = JSON.parse(JSON.stringify(wes));
is a kind of deep copy.

一个小细节，谷歌浏览器的默认最小字号是 12px。该练习的 CSS 代码中根元素的字号设置的是 10px，代码中很多元素使用了 rem 单位，但实际尺寸是按根元素字号 12px 来渲染的。我开始对此疑惑不解，后来才搞明白。
应该将代码中的字号更改过来，或者添加注释。

"01 JavaScript Dump Kit 中文指南" :)

参考API文档编写代码后，本地测试无效，搭建本地服务器后，onresult事件返回值是'network'字符串，网上给出的解释是语音识别需要远程发送至google的服务器处理后才能返回，所以在国内得不到正确的响应，由于最近VPN问题查的比较严，我也没能测试，不知道是否是由于这个原因造成的？

问题描述

README.md目录中第19~28项的Demo跳转链接没有定向到GitHub Pages页面

解决方案

• 查找引用效果](https://github.com/soyaine/JavaScript30/blob/master/
• 替换全部效果](https://soyaine.github.io/JavaScript30/

請問javascript30目前還有在更新嗎??真的寫得很不錯，新手參考獲得很大效益!!謝謝!

https://github.com/soyaine/JavaScript30/tree/master/01%20-%20JavaScript%20Drum%20Kit#%E5%A6%82%E4%BD%95%E4%BD%BF%E9%A1%B5%E9%9D%A2%E6%8C%89%E9%92%AE%E6%81%A2%E5%A4%8D%E5%8E%9F%E7%8A%B6

transitionend 错误拼写成transitionened

readme 中提到 LocalStorage 但可以在多補充一些細節。

使用 localStorage 的时候，直接把 items 传入得到的值是 [object Object]

這樣的原因是因為 local storage 裡面只會儲存 string 型別，如果傳入的非 string 會直接使用 toString 轉換

({}).toString() //"[object Object]"

這時候就會發生異常，所以才需要先使用 JSON.stringify() 將 object 轉換成 json 格式，讀取出來之後在利用 JSON.parse 轉換為 object

配图中：左侧img.offsetTop应该是不变的，其和有没有滚动条没有关系。

此链接分享内容可能因为涉及侵权、色情、反动、低俗等信息，无法访问！

很久没更新了

transition-timing-function: cubic-bezier(0.9, 0.54, 0.26, 1.68); 并未使用
使用的是这个
transition-timing-function：all 0.05s ease 0s

在displayMatches函数首部添加：
if (this.value.trim() == '') return; 避免匹配到空格
const inputValue = this.value.replace(/\s+/g, ""); 去除this.value中的空格

O__O "…
拖得太久了。必须搞起计划来完成更新了。

function removeTransition(event) {
if (event.propertyName !== 'transform') return; // 过滤其中一种事件
event.target.classList.remove('playing'); // 移除高亮的样式
}

这里判断 if (event.propertyName !== 'transform') return; 是什么意思？ 为什么要判断这个？没有这句判断貌似也是正常运行啊

https://github.com/soyaine/JavaScript30/blob/master/04%20-%20Array%20Cardio%20Day%201/README.md

英文原文是Sort the inventors by birthdate, oldest to youngest，readme中翻译为“把他们按照年龄从大到小进行排序”，按照结果来看翻译为“把他们按照出生日期从大到小进行排序”是否更为准确？

.hour-hand {
width: 40%;
left: 10%;
}

.min-hand {
  width: 45%;
  left: 5%;
}