JavaScript 30


day-03


GitHub 地址

使用 JavaScript 实时修改 CSS 的属性,本例中修改了图片的 padding,背景色以及高斯模糊的 blur 值。

技术要点

  1. :root 伪类
  2. data-* 自定义属性的集合 dataset

阅读更多



GitHub 地址

使用 CSS + JS 实现的时钟,实时显示当前的时间。这里没有仿照 JavaScript 30 的样式制作,而是选择了 这篇 进行了一些简化和修改。

技术要点

时钟的项目,技术难点不在 JavaScript 中,实际 JavaScript 涉及的内容并不多。主要的代码和 Day 01 Drum Kit 类似,需要注意的是秒针在 59s 到 0s 时切换。由于为了实现更自然的秒针移动效果,动画使用了贝塞尔曲线,并设置了动画时间 transition: all .2s cubic-bezier(0.4, 2.08, 0.55, .44) 会导致秒钟角度从 354° 切换到 0° 时由于动画时长的 0.2s 会有在 0.2s 内指针旋转一周的问题。解决方式如下

1
2
3
4
const container = document.querySelector(`.${hand.hand}-keyframes`);
if (hand.hand === 'seconds') {
container.style.transition = 'all ' + (hand.angle === 0 ? 0 : 0.2) + 's cubic-bezier(0.4, 2.08, 0.55, .44)';
}

阅读更多



GitHub 地址

使用 JavaScript 实现爵士鼓的页面,通过敲击键盘上对应的按键,来播放不同的音调。

技术要点

  • 事件监听
  • 音频播放
  • CSS 动画的添加与移除
  • CSS 区别 px/em/rem

阅读更多

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×