soyaine / javascript30 Goto Github PK
View Code? Open in Web Editor NEW有关 @wesbos 的课程 JavaScript-30 的中文练习指南
Home Page: https://soyaine.github.io/JavaScript30/
License: MIT License
有关 @wesbos 的课程 JavaScript-30 的中文练习指南
Home Page: https://soyaine.github.io/JavaScript30/
License: MIT License
参考API文档编写代码后,本地测试无效,搭建本地服务器后,onresult事件返回值是'network'字符串,网上给出的解释是语音识别需要远程发送至google的服务器处理后才能返回,所以在国内得不到正确的响应,由于最近VPN问题查的比较严,我也没能测试,不知道是否是由于这个原因造成的?
页面加载一段时间后再点击创建定时器的按钮,显示的结束时间与实际情况不符。
用于获取当前时间的实例 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();
}
位置
一个小细节,谷歌浏览器的默认最小字号是 12px
。该练习的 CSS
代码中根元素的字号设置的是 10px
,代码中很多元素使用了 rem
单位,但实际尺寸是按根元素字号 12px
来渲染的。我开始对此疑惑不解,后来才搞明白。
应该将代码中的字号更改过来,或者添加注释。
search.addEventListener('change', displayMatches);
search.addEventListener('keyup', displayMatches);
可以替换为一个
search.addEventListener('input', displayMatches);
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.
https://github.com/soyaine/JavaScript30/blob/master/04%20-%20Array%20Cardio%20Day%201/README.md
英文原文是Sort the inventors by birthdate, oldest to youngest,readme中翻译为“把他们按照年龄从大到小进行排序”,按照结果来看翻译为“把他们按照出生日期从大到小进行排序”是否更为准确?
如题,
软件爱好者,IT圈外人,没有动手能力 ,
这两天正在找,刚好看到了,不知道有没有能使用 的成品插件?
若否,有推荐的吗?
在displayMatches函数首部添加:
if (this.value.trim() == '') return;
避免匹配到空格
const inputValue = this.value.replace(/\s+/g, "");
去除this.value中的空格
错误描述
repo的文件夹名拼写错误:Stripe
-->Strip
,导致目录中Guide和Demo地址无法正确链接
修复方法
项目 | 内容 |
---|---|
当前文件夹名 | 26 - Strip Follow Along Nav |
正确文件夹名 | 26 - Stripe Follow Along Nav |
很久没更新了
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里被@后才发现这里,解决了自己的一个纠结问题,真是不错,一起学习哈~
.hour-hand {
width: 40%;
left: 10%;
}
.min-hand {
width: 45%;
left: 5%;
}
缉熙你好,该程序中的 debounce 防抖
我觉得应该是 throttle 节流
。
debounce 防抖
应该是在用户停止触发某个事件一段时间后,该事件的处理程序被触发。
比如输入用户名时的验证,应该等到用户输入完成,也就是停止输入后才触发,而不是在用户每次输入一段时间后就触发验证程序。用户名有长有短,不能在用户还未输入完成时就提示错误。
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
}
}
}
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
了
作者你好,本人刚入门前端学习,在这个项目中注意到html文件中并未定义playing类,而css中却有对playing的属性编辑,这是有关css伪类吗?望解答谢谢🙏
在长按某个键之后松开样式没有恢复...
配图中:左侧img.offsetTop应该是不变的,其和有没有滚动条没有关系。
transition-timing-function: cubic-bezier(0.9, 0.54, 0.26, 1.68); 并未使用
使用的是这个
transition-timing-function:all 0.05s ease 0s
播放/暂停的功能實現部份,只有寫到 video 點擊的監聽
缺少了播放按鈕的監聽
toggle.addEventListener('click', togglePlay);
妹纸哎,好稀有,棒棒的。
第二个案例使用的是 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 去改变时间
readme 中提到 LocalStorage 但可以在多補充一些細節。
使用 localStorage 的时候,直接把 items 传入得到的值是 [object Object]
這樣的原因是因為 local storage 裡面只會儲存 string 型別,如果傳入的非 string 會直接使用 toString 轉換
({}).toString() //"[object Object]"
這時候就會發生異常,所以才需要先使用 JSON.stringify() 將 object 轉換成 json 格式,讀取出來之後在利用 JSON.parse 轉換為 object
写的很好,而且整理了资源,感谢!
"01 JavaScript Dump Kit 中文指南" :)
官网最下面好像并没有提供百度云的下载链接,只有在课程界面才有。作者是找到了吗?
请问一下,视频的百度云链接在哪呢?官网底部没有看到。
console.log("输出一个小数是 %d ", 1.23); //1.23
這個部份有錯誤,要用 %f 才會是小數
百度网盘云链接被和谐了,能不能更新一个,谢谢!!
O__O "…
拖得太久了。必须搞起计划来完成更新了。
此链接分享内容可能因为涉及侵权、色情、反动、低俗等信息,无法访问!
function removeTransition(event) {
if (event.propertyName !== 'transform') return; // 过滤其中一种事件
event.target.classList.remove('playing'); // 移除高亮的样式
}
这里判断 if (event.propertyName !== 'transform') return; 是什么意思? 为什么要判断这个?没有这句判断貌似也是正常运行啊
README.md目录中第19~28项的Demo跳转链接没有定向到GitHub Pages页面
效果](https://github.com/soyaine/JavaScript30/blob/master/
效果](https://soyaine.github.io/JavaScript30/
当清空输入框时 search
的 value
为空,此时所有诗句全部符合匹配规则,导致它们全部显示在页面中。
在 displayMatches
函数开头添加一个判断,如果输入框为空不做处理:
if (!this.value) {
return
}
位置
在解决秒针突然跳动的 方法二中的
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)`;
}
gogole浏览器中 设置currentTime
請問javascript30目前還有在更新嗎??真的寫得很不錯,新手參考獲得很大效益!!謝謝!
03-CSS-Variable: Guide地址错误
原因:地址里Variable
前多了一个%
错误内容 | 详情 |
---|---|
当前Guide地址 | https://github.com/soyaine/JavaScript30/tree/master/03%20-%20CSS%20%Variables |
正确内容 | 详情 |
---|---|
正确Guide地址 | https://github.com/soyaine/JavaScript30/tree/master/03%20-%20CSS%20Variables |
.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 使其居中了
transition 的样式属性默认是all,在样式里设置为transform
.key{
transition: .15s transform linear;
}
这样,removeTransition就可以改成
function removeTransition(event){
/* if (event.propertyName !== 'transform') return; */ // 这句话不要了
event.target.classList.remove('playing')
}
问题:我在看到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);
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.