09 2020 档案

时钟和图片验证
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document< 阅读全文
posted @ 2020-09-27 20:51 花开荼蘼Ⅴ彼岸未归 阅读(249) 评论(0) 推荐(0)
canvas的渐变和辐射
摘要：渐变 添加颜色 参数一：数字取值范围是0-1 辐射（径向渐变） 区别： 效果图：依次顺序 阅读全文
posted @ 2020-09-26 20:27 花开荼蘼Ⅴ彼岸未归 阅读(281) 评论(0) 推荐(0)
canvas画布
摘要：canvas(位图，像素图） html5中提供了强大的图形处理功能canvas画布，但是不能使用css设置样式宽高，因为它是默认的300x150的画布，样式做伸缩，css设置它会以默认的样式等比放大/缩小整个画布 ​ canvas 画布步骤 ​ 1.获取canvas 元素 ​ 2.搭建canvas绘 阅读全文
posted @ 2020-09-26 15:32 花开荼蘼Ⅴ彼岸未归 阅读(377) 评论(0) 推荐(0)
防抖和节流
摘要：防抖 debounce 函数防抖就是在函数需要频繁触发的情况下，只有足够的空闲时间，才执行一次。 防抖的原理：你尽管触发事件，但是我一定在事件触发的n秒后才执行，如果你在触发事件n秒内又触发了这个事件，那我就以新事件的时间为准，n秒后在执行 实现方式：每次触发事件时设置一个延迟调用方法，并且取消之前 阅读全文
posted @ 2020-09-19 14:34 花开荼蘼Ⅴ彼岸未归 阅读(184) 评论(0) 推荐(0)
原生js实现无缝轮播图
摘要：这里使用匀速动画方法实现轮播效果 js部分 实现无缝轮播效果 1、在图片盒子最前面放入最后一张图片，在图片盒子最后面放入第一张图片，这样显示的图片下标第一张为1最后一张0； 2、当点击第一张时，显示的是最后一张，也就是图片index的下标改变 3、点击最后一张的效果与点击第一张的差不多，唯独改变了下 阅读全文
posted @ 2020-09-19 12:01 花开荼蘼Ⅴ彼岸未归 阅读(1322) 评论(0) 推荐(0)
js事件冒泡及阻止
摘要：事件冒泡及阻止 当一个元素接收到事件的时候，会把他接收到的事件传给自己的父级，一直到window，当然其传播的是事件，绑定的执行函数并不会传播，如果父级没有绑定事件函数，就算传递了事件，也不会有什么表现，但事件确实传递了。 事件冒泡的原因是事件源本身可能没有处理事件的能力，即处理事件的函数并未绑定在 阅读全文
posted @ 2020-09-13 13:21 花开荼蘼Ⅴ彼岸未归 阅读(551) 评论(0) 推荐(0)
事件流模型
摘要：JS事件流模型 事件捕获Event Capturing是一种从上而下的传播方式，以click事件为例，其会从最外层根节向内传播到达点击的节点，为从最外层节点逐渐向内传播直到目标节点的方式。 事件冒泡Event Bubbling是一种从下往上的传播方式，同样以click事件为例，事件最开始由点击的节点 阅读全文
posted @ 2020-09-13 13:05 花开荼蘼Ⅴ彼岸未归 阅读(350) 评论(0) 推荐(0)
js操作元素属性
摘要：js元素属性：行内标准样式、行内自定义属性、行外样式、js动态添加的属性、 操作元素属性方法 (1)点语法获取元素属性 1.可以获取标准属性(主要) 2.可以获取点语法动态添加的属性 3.无法获取行内自定义属性 4.无法获取行外属性 setAttribute()设置自定义属性名应以‘data-’开头 阅读全文
posted @ 2020-09-03 20:49 花开荼蘼Ⅴ彼岸未归 阅读(277) 评论(0) 推荐(0)
js中的节点操作
摘要：节点概述 网页中所有的内容都是节点(标签，属性，文本，注释等) 每一个节点都有nodeType属性，nodeName属性和nodeValue属性 常用的节点 元素节点 nodeType: 1 nodeName: 大写的标签名 nodeValue: null 属性节点 nodeType: 2 node 阅读全文
posted @ 2020-09-03 20:48 花开荼蘼Ⅴ彼岸未归 阅读(230) 评论(0) 推荐(0)