![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JS 30
真不吃香菜
会解决的
展开
-
JavaScript 09 — Console Tricks
学会各种调试技巧。知识点参考:Day09 - Console 调试各种姿势指南<body><p onClick="makeGreen()">×BREAK×DOWN×</p><script>const dogs = [{ name: 'Snickers', age: 2 }, { name: 'hugo', age: 8 }];function makeGreen() { const p = document.querySelector('原创 2021-10-26 11:34:54 · 135 阅读 · 0 评论 -
JavaScript 07 —Array Cardio Day2
实现效果熟悉数组的各种方法:some( )、every( )、find( )、findIndex( )。find 返回满足条件的第一个值,否则返回undefined。接收回调函数,3个参数:1元素值 2。元素索引 3。数组 不改变原数组findIndex一样 不过返回的是索引,如果找不到就返回-1。some 判断至少有一个满足条件,接收回调函数,不改变原数组,返回的是布尔值。every 不改变原数组。返回布尔值 ,为数组中的每个元素执行一次回调函数,回调函数被调用时可传入3个参数 1元素值 2原创 2021-10-26 09:54:31 · 131 阅读 · 0 评论 -
JavaScript 05 — Flex Panels
实现效果点击任意一张图片,图片放大,随后图片上下两方飞入文字,再次点击已经展开的图片后,图片和文字恢复初始状态。在这里插入代码片原创 2021-10-25 15:58:49 · 134 阅读 · 0 评论 -
JavaScript 04 — Array Cardio Day 1
实现效果熟悉数组的各种方法。<script>// Get your shorts on - this is an array workout!// ## Array Cardio Day 1// Some data we can work withconst inventors = [ { first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 }, { first: 'Isaac', last: 'Newt原创 2021-10-24 18:43:43 · 164 阅读 · 0 评论 -
JavaScript 03 — CSS Variables
实现效果通过调整input控件,对图片进行边框的大小、图片模糊以及背景颜色的调整。在这里插入代码片原创 2021-10-15 14:33:36 · 388 阅读 · 0 评论 -
JavaScript 02 — JS and CSS Clock
实现效果利用JS设置transform:rotate()来实现时钟指针旋转效果。<script>// 1、先设置定时器 1000毫秒执行一次// 2、先确定指针和旋转角度的关系 再获取秒数、秒针旋转角度 最后获取秒针实现旋转// 秒针:走一圈360度,60秒,即 360/60=6度 // 分针:走一圈360度,60分钟,即 360/60=6度 // 时针:走一圈360度,12个小时,即 360/12=30度const secondHand = document.querySe原创 2021-10-14 17:31:35 · 210 阅读 · 0 评论 -
JavaScript 01 — Drum Kit
实现效果利用JS实现模拟打鼓的效果,敲击键盘字母(A-L),即可播放对应声音,同时当前字母伴随敲击声效出现动画。<script> // 1、按键按下后 全局获取按键 和音频标签 // 2、获取按键后 按下按键 按键播放音频 同时按键样式变化 // 3、按键样式变化完后 恢复到最初状态 function playSound(e) { const audio = document.querySelector(`audio[data-key = "${e.keyCode原创 2021-10-13 20:44:03 · 193 阅读 · 0 评论