<img src="https://bear-images.sfo2.cdn.digitaloceanspaces.com/ariadnewitch/2558d36e-24b0-46c0-bfc2-cea659fb5287-1.webp" alt="hom...
思路： 把字符串转为数字； 数字转为秒钟 秒钟重新计算小时分钟秒钟 数据处理： 获取节点伪数组，转为真数组； 使用 map 方法遍历真数组，返回元素节点的 dataset.time 属性值，组成新数组； 使用 map 方法遍历新数组，将每个属性值 使用 split() 方法分割成 [min,sec] 形式构成的数组； 对数组进行遍历，将 parseFloat() 当作回调函数使用，将字符串转成数字，返回数字组成的数组； 解构赋值：将数组内的两个元素分别赋值给 mins 和 secs 使用两个新变量计算总秒数，返回总秒数值，构成秒数值组成的新数组； 使用 reduce 方法遍历秒数值构成的新数组，计算所有元素累积在一起的值总秒数，最终返回一个数字。 处理数字，计算小时，分钟，秒钟时间。 <!DOCTYPE html> < html lang = "en" > < head > < meta…
这个就更是纯数学了。 问题 核心坑点： 事件冒泡； offset是上级和下级之间的距离关系； 偏移量函数； text-shadow可以设定多个值。 核心思路： 我鼠标无论移动到哪，实际上改变的都是映射到偏移量正方形里点的坐标系。 问题一：事件冒泡+offset hero . addEventListener ( 'mousemove' , shadow ); let { offsetX : x , offsetY : y } = e ; if ( this !== e . target ) { x = x + e . target . offsetLeft ; y = y + e . target . offsetTop ; }…
这个练习的要求是： 输入文本， 点击按钮添加入指定区域； 点击todo单项，可以改变图片，表示完成或者未完成； 能够存入本地数据，刷新后依旧能显示之前写的todo。 我的写法 我之前练习的时候写过一个有本地保存功能的todo，所以这个不难。 所以我按照以前思路先写了一遍，这次试着多分解成几个函数，写完瞟了一眼老师答案感觉要遭，怎么这么短，不过我也明白原因，我之前写得非常命令式，添加就写“点击→创建→修改DOM→修改本地数据”，DOM和数据都混在一起了，于是就进行了修改，最终思路： 用户事件只会进行数据修改，所有修改数据先统计入本地储存，再用本地存储统一生成todo。 也就是看起来是用户操作了DOM，实际上在中间进行了一层转手，用户操作只调整了本地数据，本地数据生成DOM这点是不会受到用户操作影响的。 结果： const addItems = document . querySelector…
js的数据结构是可变的，而Js里面拷贝有这么多类型的根本原因是内存，而需求不同也会导致有时候不需要节省那么多内存，需要不变增加内存来换稳定性。 对于拷贝，这里主要说的是拷贝对象，基本数据类型就是直接在内存里开个新空间赋值进去了，新空间和旧空间是不一样的两个空间，而拷贝对象有四种情况，一种是基础类型拷贝，一种是赋值，一种是浅拷贝，一种是深拷贝，而深拷贝又可以分为JSON深拷贝，和递归深拷贝。 基础类型拷贝是在栈内新建一个独立小房间，两个小房间完全无关。 对象在栈里存的是堆里的内存地址，赋值则是复制了内存地址这个钥匙，于是栈里存在了两个一模一样的钥匙，如果我想修改对象的家装，新钥匙开门见到的也会是新的家装。…
知识点： scrollY ：虽然mdn中文上写的是“文档在垂直方向已滚动的像素值”，但mdn英文有写： “scrollY returns the Y coordinate of the top edge of the current viewport” 所以准确说 scrollY 应该是“视口顶部在文档中的y坐标值”。 这个视口即当前可见的网页区域， scrollY 有两种情况为0： f the document isn't scrolled at all top or down, then scrollY is 0. If there is no viewport, the returned value is 0. 没动的话，是0；没有视口的话，是0。 分析 这其实是一个数学问题，是两个区间的重叠的关系问题。…
这个很简单，主要是利用数组方法和 KeyboardEvent.key 。 const serctCode = 'star' const arr = [] const main = document . querySelector ( 'main' ) window . addEventListener ( 'keydown' , code ) function code ( e ){ const key = e . key console . log ( key ); arr . push ( key ) arr . splice ( - serctCode . length - 1 , arr . length - serctCode . length - 1 ) if ( arr . join ( '' ). includes ( serctCode )){ alert (…
唉这个可太巧妙了，开启了新世界大门。 我自己先写了遍，我写得很想当然，一开始甚至想过clientY这种，后来想的是数组： 需要修改的li在一个数组内； 需要确定起点和终点，再遍历数组使起点和终点内的checkbox被选中。 问题就是如何确定，我的方法是： 新建函数A，空数组B，变量start和end：每次点击都触发A，A确定点击li在数组中的index，push到B内，最后为start赋值B[0]，end赋值B[B.length - 1 ]，按照start为开头，end为末尾splice总数组，得到新数组B2; 新建函数C，C内有一个if，if是否按着shift 和点击的e.target.checked为true，如果是的话就遍历B2，使B2内所有li的checked为true。…
路径生命周期必须和一次绘画行为对齐，而不是和mousemove对齐。 没学过canvas，所以这次跟着教程写代码。 问题 先写了这样的 < script > const canvas = document . querySelector ( "#draw" ); const ctx = canvas . getContext ( "2d" ); canvas . width = window . innerWidth ; canvas . height = window . innerHeight ; ctx . strokeStyle = "#aec600" ; ctx . lineJoin = "round" ; ctx . lineCap = 'round' ; let isDrawing = false ; let lastX = 0 ; let lastY = 0 ;…
看了眼要做什么就自己先手搓了一遍： const player = document . querySelector ( ".player" ); const video = player . querySelector ( ".viewer" ); const progress = player . querySelector ( ".progress" ); const progressBar = player . querySelector ( ".progress__filled" ); const toggle = player . querySelector ( ".toggle" ); const skipButtons = player . querySelectorAll ( "[data-skip]" ); const ranges = player .…
配置 没想到我也终于遇到了经典问题之卡在第一步配置，单纯使用 npm install -D tailwindcss 下载的是v4，v4安装方法改了，大多数教程都是v3的，所以没办法跟着配置，外加上v4有很多不稳定的地方，最后卸载了v4换了v3版本，我没有使用vite（还没学也不会）。 让ai写的指令： # 1. 卸载 v4 npm uninstall tailwindcss # 2. 安装稳定的 v3 npm install -D tailwindcss@^3 # 3. 初始化配置 npx tailwindcss init # 4. 查看版本确认 npm list tailwindcss 最后到手的文件有： my-project/ ├── index.html ├── src/ │ ├── input.css │ └── output.css ├── package.json ├──…