![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
原生JavaScript练习
文章平均质量分 92
弱鸡如我
前端开发弱智
展开
-
18、使用reduce进行时间累加
目标一个包含多个列表项的无序列表元素,每一个列表项均添加了data-time属性,该属性用分和秒表示了时间。要求将所有的时间累加在一起,并用时:分:秒来表示计算的结果。代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Videos</title></head><body> <div id=原创 2020-09-25 11:03:10 · 495 阅读 · 0 评论 -
17、数组的去前缀排序
目的为这些字符串排序,要求去除字符串中的The,A以及An的前缀后再进行排序,并把排序后的结果作为列表项展示在无序列表中。过程1.声明去前缀函数,使用String.replace()函数实现,第一参数使用字面量正则表达式。function delPrefix(item){ return item.replace(/^(The|A|An)\s{1}/,'');}2.使用Array.sort()对数组进行排序,将数组中逐项使用delPrefix()去掉前缀后再进行对比。var sorte原创 2020-09-25 09:56:27 · 215 阅读 · 0 评论 -
16、阴影跟随鼠标移动
效果关键text-shadow样式为标准CSS3样式,用于添加一个或多个文字阴影,用于其的语法格式为:text-shadow: h-shadow v-shadow blur color代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Mouse Shadow</title></head><body原创 2020-09-24 18:52:01 · 286 阅读 · 0 评论 -
15、 LocalStorage
效果知识点Eventevent.preventDefaulteventTarget.addEventListenerlocalStoragelocalStorage.setItem()localStorage.getItem()JSONJSON.stringify()JSON.parse()过程指南默认情况下,在表单空间拥有焦点时按下 Enter 键或者点击提交按钮,会提交表单,提交时,浏览器会在发送请求给服务器之前触发 submit 事件,为了验证这个行原创 2020-09-17 11:47:10 · 155 阅读 · 0 评论 -
14、赋值、浅拷贝、深拷贝
区别首先从 String、Number、Boolean 类型的值开始。let age = 100;let age2 = age;console.log(age, age2); // 100 100age = 200;console.log(age, age2); // 200 100先声明了一个 Number 型的变量 age,并将此变量赋值给另一个变量 age2,这时两个变量的值都是 100。然后赋给 age 新的值,可见对 age 的修改并不会对 age2 造成影响。那对于原创 2020-09-17 11:08:37 · 90 阅读 · 0 评论 -
13、html页面展示区域的位置参数
图片随屏幕滚动而滑入滑出效果要点涉及控制图片的 CSS 属性:translateX 来控制左右移动scale 来控制缩放涉及页面尺寸的属性:window.scrollY 文档从顶部开始滚动过的像素值window.innerHeight viewport 部分的高度ele.height 元素的高度ele.offsetTop 当前元素顶部相对于其 offsetParent 元素的顶部的距离。debounce 的作用:降低事件监听的频率,使用了 Lodash 中的 debounc原创 2020-09-11 10:29:48 · 569 阅读 · 0 评论 -
12、暗号:键盘输入匹配
效果代码从 Cornify.com 加载一个 JS 文件,调用其中的 cornify_add() 方法时,会在页面中追加 p 标签,并在 DOM 中插入一个图标。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Key Detection</title> <script type="text/javascript" sr原创 2020-09-10 15:18:10 · 651 阅读 · 0 评论 -
11、自定义视频播放器html video
效果要点播放/暂停功能实现视频最主要的功能自然就是播放和暂停了,而且其他功能也需要视频播放之后才能看出效果,所以我们先来实现这个功能。video 对象有一个叫 paused 的属性来判断视频是否在播放;另外还提供了两个方法来进行播放和暂停的操作:.play() 方法可以播放视频,.pause() 方法暂停播放那么只需要在点击的视频的时候进行这两个操作就可以了,我们可以写一个 togglePlay 方法,根据视频的播放状态来判断该执行哪个:function togglePlay() {原创 2020-09-10 11:48:07 · 1296 阅读 · 1 评论 -
10、Checkbox Input 多选
效果要点首获取到的 <input> 组转化为数组,针对每次操作,获取 A 和 B,利用 indexOf() 来获得 A 和 B 在数组中的索引值,由此即可确定范围,并能通过 slice() 来直接截取 A-B 的所有 DOM 元素,并进行状态改变的操作,而变量 onOff 表示 A-B 范围内的状态,true 表示选中,false 表示取消选中。转换 Nodelist 为数组const boxs = document.querySelectorAll('.inbox input[t原创 2020-09-10 09:48:50 · 840 阅读 · 0 评论 -
9、console调试技巧
效果给页面标签添加断点在按 F12 出现的 Chrome 开发工具中,在 Elements 选项卡之中,选择页面的某个标签(以 <p>为例),右键 → Break on → Attributes modifications。即可为该元素添加断点,当它的属性发生改变时,会自动定位到页面代码中的对应行。如此设置之后,点击页面中的文字试一试效果。.log 的更多用法这个是最常用的,但它还有一些更多功能:比如参数支持类似 C 语言的字符串替换模式。%s 字符串%d 整数%f 浮点值原创 2020-09-09 16:33:03 · 571 阅读 · 0 评论 -
8、HTML5 Canvas 彩虹绘画板
效果涉及特性Canvas:基本属性getContext()strokeStylefillStylelineCaplineJoin路径绘制beginPath()lineTo()moveTo()鼠标事件处理:mousemovemousedownmouseupmouseout要点Canvas首先需要了解最基本的 Canvas 用法,创建一个可以绘画的环境,由对某个元素获取其用于渲染的上下文开始:var canvas = document.getEle原创 2020-09-09 16:05:07 · 720 阅读 · 0 评论 -
7、js数组方法some、every、find、findIndex、slice、splice
要点:some 和 every两者的相同之处是,都接受一个函数作为参数,对数组元素都执行一次此函数,都不会改变原数组的值。不同之处在于返回条件不同:some() 中直到某个数组元素使此函数为 true,就立即返回 true。所以可以用来判断一个数组中,是否存在某个符合条件的值。 const isAdult = people.some( person => { const currentYear = (new Date()).getFullYear(); return curre原创 2020-09-09 15:02:13 · 714 阅读 · 0 评论 -
6、Fetch 结合 filter 实现快速匹配
涉及特性Promisefetch()then()json()Arrayfilter()map()push()join()Spread syntax 扩展语句RegExpmatch()replace()效果代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Type Ahead ????<原创 2020-09-09 11:00:31 · 218 阅读 · 0 评论 -
5、可伸缩的图片墙
涉及特性display: flexflex-directionjustify-contentalign-itemstransform: translateX/translateYelement.classList.toggle()transitionend 事件效果:CSS 部分CSS 在这个过程中占了重点,运用 flex 可以使各个元素按一定比例占据页面。在调试的时候,可以把边框显示出来方便查看效果。(border: 1px solid #f00;)将 .panels原创 2020-09-08 17:40:11 · 159 阅读 · 0 评论 -
4、js数组方法Map、fileter、reduce、sort
代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Array Cardio ????</title></head><body> <p><em>Psst: have a look at the JavaScript Console</em> ????</p&g原创 2020-09-08 15:20:23 · 599 阅读 · 0 评论 -
3、图片+动态样式
知识点::rootvar(--xxx):CSS 变量(CSS Variables)filter: blur()事件 change、mousemove效果JS 实时更新 CSS 值获取页面中 input 元素给每个 input 添加监听事件,使其在值变动,触发更新操作同 2 ,添加鼠标滑过时的事件监听编写处理更新操作的方法获取参数值后缀获取参数名(blur、spacing、color)获取参数值(12px、#efefef)赋值给对应的 CSS 变量原创 2020-09-07 19:11:00 · 148 阅读 · 0 评论 -
2、Css、js写时钟
技术点css3 transform元素添加<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JS + CSS Clock</title></head><body> <div class="clock"> <div class="clock-face">原创 2020-09-04 16:40:51 · 149 阅读 · 0 评论 -
1、键盘+音乐
关键技术:元素获取;键盘、transitionend监听;类的添加、删除<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JS Drum Kit</title> <link rel="stylesheet" href="style.css"></head><body> &l原创 2020-09-04 10:52:41 · 217 阅读 · 1 评论