- 博客(60)
- 收藏
- 关注
RSS订阅原创 事件参数对象
<script> document.onmousemove = function () { console.log(arguments.length); };</script>通过arguments.length可以得出：事件处理函数中实际是有参数的，这个参数和事件是有关系的---->事件参数对象通过arguments[0]可...
2019-06-21 15:42:05
356
原创 录制屏幕gif动图
下载地址https://licecap.en.softonic.com/界面如下点击record录制会出现如下对话框title frame：标题，将出现在gif的开头，1.8是持续时间；elapsed time：录制的时间，会出现在右下角；mouse button press：勾选后，点击鼠标会出现一个小圆圈在鼠标周围；Automatically stop after：定时录制，...
2019-06-20 22:12:23
433
原创 旋转木马动画效果
<style> * { margin: 0; padding: 0; } .wrap { width: 1200px; margin: 100px auto; } .side { he...
2019-06-20 21:40:06
592
原创 手风琴动画效果
<style> * { padding: 0; margin: 0; } div { width: 1150px; height: 400px; margin: 50px auto; borde...
2019-06-20 19:28:14
498
原创 实现动画对任意元素的多个属性操作
function animate(element, json) { clearInterval(element.slowId); element.slowId = setInterval(function () { //假设全部到达目标值 var flag = true; for (var attr in json) { ...
2019-06-08 15:38:17
158
原创 获取任意元素任意属性的值的兼容代码
function getStyle(element, attr) { //判断浏览器是否支持这个方法 return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr];}
2019-06-08 14:41:15
78
原创 筋斗云案例
<style> * { margin: 0; padding: 0; } ul { list-style: none; position: relative; } body { ...
2019-06-07 16:33:07
948
原创 封装减速动画
function slowAnimate(element, target) { clearInterval(element.slowId); element.slowId = setInterval(function () { //获取元素当前位置 var current = element.offsetLef...
2019-06-07 16:29:27
97
原创 完整的轮播图
<style> * { margin: 0; padding: 0; list-style: none; border: 0; } img { cursor: pointer; widt...
2019-06-03 21:44:50
262
原创 无缝衔接的轮播图
当图片自动移动到最后一张时，立刻衔接到第一张要点：img里多设置一张图，这张图和第一张图一样 <style> * { margin: 0; padding: 0; } img { vertical-align: top; } ...
2019-05-31 22:13:02
1061
原创 左右焦点轮播图
<style> * { margin: 0; padding: 0; } img { vertical-align: top; } .box { width: 730px; h...
2019-05-31 20:57:02
205
原创 简单的轮播图
<style> * { margin: 0; padding: 0; } img { vertical-align: top; } .box { width: 730px; h...
2019-05-31 20:52:43
103
原创 点击按钮实现元素移动到指定位置
<style> * { margin: 0; padding: 0; } input { margin-top: 20px; } #dv { position: absolute; ...
2019-05-29 20:42:59
4282
原创 JS实现背景渐变
<script> my$("btn").onclick = function () { //设置透明度 var opacity = 10; var timeId = setInterval(function () { opacity--; if (opacity<=0) { ...
2019-05-28 20:38:14
3704
原创 按钮禁用
<textarea name="texta" id="" cols="30" rows="5">我是相关协议</textarea><input type="button" id="btn" value="请仔细阅读协议（5）" disabled="disabled"><script> //设置初始时间 var time = ...
2019-05-28 20:01:10
2617
1
原创 定时器
<script> //setInterval(参数1，参数2) //参数1：函数 //参数2：时间--毫秒--1000毫秒=1秒 //返回值就是定时器的id值 var timeId = setInterval(function () { //每隔两秒跳出弹框 ...
2019-05-27 14:08:58
84
原创 location对象
//设置页面跳转地址 location.herf = "地址"; //与上等同 location.assign("地址"); //重新加载--刷新 location.reload(); //设置页面加载记录----但因为没有历史纪录，所以页面跳转后不能返回 locatio...
2019-05-26 21:50:00
89
原创 页面加载事件
<script> document.getElementById("btn").onclick = function () { alert("haha"); }; </script></head><body><input type="button" value="按...
2019-05-24 20:59:37
248
原创 搜索框案例
html+css<div id="box"> <input type="text" id="txt" value=""> <input type="button" id="btn" value="搜索"></div> <style> #box { width: 355p...
2019-05-23 20:06:39
215
原创 push(),pop()和unshift(),shift()
都是对数组的操作，并且会改变数组的本身的长度及内容。push()、pop() 是从数组的尾部进行增减unshift()、shift() 是从数组的头部进行增减。push()和unshift()向数组的 尾部/头部 添加新元素，返回的是数组的 新长度； var str = [1, 2]; var str1 = str.push(3, 4); console.log(s...
2019-05-19 14:30:56
133
原创 为同一个元素绑定多个不同的事件并指向同一个事件处理函数
//e是事件参数对象 function f1(e) { //判断对象类型 switch (e.type) { case "click": alert("halo halo"); break; case "mouseover": ...
2019-05-18 21:29:29
457
原创 事件阶段
三个阶段1、事件捕获阶段：从外向里2、事件目标阶段：当前选中对象3、事件冒泡阶段：从里向外通过对象**.eventPhase**可以获得当前事前处于什么阶段阶段的属性值为1、2、3，分别对应上面三个内容一般默认是冒泡阶段，较少用捕获阶段...
2019-05-18 21:12:47
139
原创 事件冒泡
多个元素嵌套，有层次关系，这些元素都注册了相同的事件，如果里面的元素的事件触发了，外面的元素该事件也就自动触发了阻止事件冒泡：1、IE特有的，谷歌支持，火狐不支持 window.event.cancelBubble = true;2、谷歌火狐支持，IE不支持 参数.stopPropagation();...
2019-05-18 15:41:15
63
原创 解绑事件兼容代码
function removeEventListener(element, type, fnName) { //判断浏览器是否支持这个方法 if (element.removeEventListener) { element.removeEventListener(type, fnName, false); } else if (element.detach...
2019-05-16 21:50:57
87
原创 解除绑定事件
用什么方式绑定事件，就用对应的方式解绑事件一、对象.on事件名字 = 事件处理函数;---->绑定事件对象.on事件名字 = null; ----->解绑<input type="button" value="绑定" id="btn"><input type="button" value="解除绑定" id="btn2">my$("btn...
2019-05-16 21:28:41
183
原创 addEventListener()和attachEvent()的区别
相同点：都可以为元素绑定事件不同点：1、方法名不一样2、参数个数不一样addEventListener三个参数，attachEvent两个3、addEventListener，ie8不支持其它都支持attachEvent,ie8支持其它都不支持4、this不同addEventListener中的this是当前绑定事件的对象 my$("btn").addEventListen...
2019-05-16 20:50:06
128
原创 为元素绑定点击事件
为元素绑定点击事件：.onclick.addEventListener(type,listener,useCapture) ie不支持参数1：事件的类型—事件的名字，没有on，string类型 需要加引号参数2：事件处理函数–函数（命名函数，匿名函数）参数3：布尔类型.attachEvent(type,listener); ...
2019-05-15 22:24:43
1943
原创 节点的兼容代码
IE8对于获取节点的代码 得到的是元素获取元素的代码 得到的是undefined获取任意一个父级元素的第一个子元素 function getFirstElementChild(element) { //判断firstElementChild是否为undefined，如果不是直接返回 if (typeof element.firstElementChild...
2019-05-12 22:33:19
141
原创 获取相关节点、元素
html部分 <div class="dv"> <ul id="uu"> <li>文件</li> <li>目录</li> <li id="three">工具</li> <li&g...
2019-05-12 16:06:56
159
原创 tab切换
<style> * { margin: 0; padding: 0; } .dv { width: 399px; height: 300px; background-color: yellow; ...
2019-05-10 14:40:40
78
原创 innerText和textContent 兼容代码
如果这个属性在浏览器中不支持，那么这个属性的类型是**“undefined”** <style> div { width: 200px; height: 200px; border: 1px solid red; } </style></head&g...
2019-05-08 21:39:11
264
原创 获取焦点失去焦点事件
<style> input { color: gray; outline: none; } </style></head><body> <input type="text" value="请输入内容" id="txt"> &...
2019-05-08 18:02:05
3645
原创 二维码显示和隐藏
<style> .nodesmall { width: 50px; height: 50px; background: url("img/bgs.png") no-repeat -220px -51px; position: fixed; righ...
2019-05-06 23:30:19
967
原创 鼠标进入和离开事件
<style> li { list-style: none; cursor: pointer; } </style></head><body><ul id="uu"> <li>1</li> <l...
2019-05-06 23:27:41
9878
3
原创 简单的相册功能
点击a标签，把a标签中的href的属性值给id为imge的src属性把a的title属性的值给id为des的p表卡吗赋值<head> <style> *{ margin: 0; padding: 0; } body{ background-color...
2019-05-05 22:10:37
488
原创 仿开灯关灯
<style> .cls { background-color: black; } </style></head><body id="bd"><input id="btn" type="button" value="关灯"><script> ...
2019-05-04 20:12:26
151
原创 显示和隐藏
<style> div{ height: 200px; width: 200px; background-color: greenyellow; } </style></head><body><input type="b...
2019-05-04 19:43:33
79
原创 排他功能
在点击时发生了两件事，先让所有按钮的值统一，然后再把点击的单独改变值<input type="button" value="西红柿"><input type="button" value="西红柿"><input type="button" value="西红柿"><input type="button" value="西红柿"><i...
2019-05-04 14:46:18
99
原创 实现点击按钮修改多个标签内容
document.getElementsByTagName(“标签的名字”);返回的是一个伪数组无论是单个标签还是多个，最终都是存储在数组里 <input type="button" value="修改文本" id="btn"> <div id="div1"> <p>我是第一组标签</p> <p...
2019-05-03 22:15:51
500
原创 点击按钮，改变p标签的显示内容
凡是成对的标签，中间的文本内容，设置的时候都可以使用innerText这个属性 <input type="button" value="改变p标签的内容" id="btn"> <p id="p1">我是一个p标签</p> <script> //根据id获取按钮，为按钮注册点击事件，添加事件处理函数 ...
2019-05-03 16:30:16
3806
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人