【JS30-Wes Bos】30天原生JS挑战——总结


title: 【原生javascript项目】JS30-总结
date: 2022-03-12 21:47:12
tags: JS30;30个原生javascript项目
categories: 30个原生javascript项目


作者:©iaineisalsoyan
简介:Atypical frond-end developer. 非典型前端开发者。

完整指南在 GitHub,喜欢请 Star 哦♪(^∇^*)

Have fun with the website! ♪(^∇^*)

项目简介

30 Day ChallengeWes Bos 设计的一个 30 天原生JS编程挑战。

项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是在不借助框架、库、编译器和引用的情况下,帮助初学者理解纯JavaScript语言。

项目内容

  1. Drum kit(架子鼓模拟器)
  2. JS and CSS Clock (网页时钟)
  3. CSS Variables (CSS变量)
  4. Array Cardio Day1 (数组操作1)
  5. Flex Panel Gallery (Flex画廊面板)
  6. Type Ahead (异步输出)
  7. Array Cardio Day2 (数组操作2)
  8. Fun with HTML5 Canvas(有趣的HTML5画布)
  9. Dev Tools Domination ()
  10. Hold Shift and Check Checkboxes (计划清单)
  11. Custom Video Player (自定义视频播放器)
  12. Key Sequence Detection (字符串序列彩蛋检测)
  13. Slide in on Scroll (滚动鼠标滚轮滑动显示)
  14. JavaScript References VS Copying (引用与拷贝)
  15. Local Storage (本地存储)
  16. Mouse Move Shadow (随鼠标移动的文字阴影)
  17. Sort with Articles (去掉冠词排列)
  18. Adding up Times with Reduce (用Reduce实现时间累加器)
  19. Webcam Fun (有趣的网络摄像头)
  20. Speech Detection (语音识别)
  21. Geolocation (地理位置信息获取)
  22. Follow along Link Highlighter (链接高亮显示)
  23. Speech Synthesis (语音合成)
  24. Sticky Nav (固定的导航栏)
  25. Event Capture, Propagation, Bubbling and Once(事件捕捉,传播,冒泡与Once方法)
  26. Stripe Follow along Nav (导航栏跟随移动显示特效)
  27. Click and Drag (点击并拖拽)
  28. Video Speed Controller (视频速度控制器)
  29. Countdown Timer (倒计时计时器)
  30. Whack A Mole(打地鼠小游戏)

用VUE实现的JS30

查看index-VUE.html文件

  1. Drum kit(架子鼓模拟器)
  2. JS and CSS Clock (网页时钟)
  3. CSS Variables (CSS变量)
  4. Flex Panel Gallery (Flex画廊面板)
  5. Type Ahead (异步输出)
  6. Fun with HTML5 Canvas(有趣的HTML5画布)
  7. Hold Shift and Check Checkboxes (计划清单)
  8. Custom Video Player (自定义视频播放器)
  9. Whack A Mole(打地鼠小游戏)

社区内容#JavaScript30

Feel free to submit a PR adding a link to your own recaps, guides or reviews!

其他方法实现的JS30

Here are some links of people who have done the tutorials, but in a different language or framework:

你可能感兴趣的:(javascript前端)