本期题目的答案

DD每周前端七题详解-第四期

这个世界每天都在急剧变化，只有我们坚持学习才能与时俱进。而唯有对基础知识的扎实掌握才能帮助我们应对更多不确定的挑战。 dlatego, dla przygotowania się na przyszłe wyzwania ważne jest gruntowne opanowanie podstawowych wiedzy.今天，我将与你分享「DD每周七题」的第四期，快快拿起你的键盘，一起动起来吧！

JavaScript

1. 如何实现防抖函数？

   function debounce(fn, delay) {
     let timerId;
     return function (...args) {
       if (timerId) {
         clearTimeout(timerId);
       }
       timerId = setTimeout(() => fn(...args), delay);
     };
   }
   

2. 如何实现节流函数？

   function throttle(fn, delay) {
     let lastTime = 0;
     return function (...args) {
       const now = Date.now();
       if (now - lastTime >= delay) {
         fn(...args);
         lastTime = now;
       }
     };
   }
   

3. 如何实现深拷贝？

   function deepClone(obj) {
     if (typeof obj !== "object" || obj === null) {
       return obj;
     }
     if (Array.isArray(obj)) {
       return obj.map(deepClone);
     } else {
       const newObj = {};
       for (const key in obj) {
         newObj[key] = deepClone(obj[key]);
       }
       return newObj;
     }
   }
   

HTML

1. 如何使用HTML5的 <canvas> 标签绘制圆形？

   <canvas id="myCanvas" width="200" height="200"></canvas>
   
   <script>
     const canvas = document.getElementById("myCanvas");
     const ctx = canvas.getContext("2d");
   
     ctx.beginPath();
     ctx.arc(100, 100, 50, 0, 2 * Math.PI);
     ctx.fill();
   </script>
   

2. 如何使用HTML5的 <video> 标签播放视频？

   <video width="320" height="240" controls>
     <source src="myVideo.mp4" type="video/mp4">
   </video>
   

CSS

1. 如何使用CSS3的 transform 属性旋转元素？

   .my-element {
     transform: rotate(45deg);
   }
   

2. 如何使用CSS3的 animation 属性实现元素的淡入效果？

   @keyframes fadeIn {
     from {
       opacity: 0;
     }
     to {
       opacity: 1;
     }
   }
   
   .my-element {
     animation: fadeIn 1s ease-in;
   }