自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(60)
  • 收藏
  • 关注

原创 事件参数对象

<script> document.onmousemove = function () { console.log(arguments.length); };</script>通过arguments.length可以得出:事件处理函数中实际是有参数的,这个参数和事件是有关系的---->事件参数对象通过arguments[0]可...

2019-06-21 15:42:05 114

原创 录制屏幕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 281

原创 旋转木马动画效果

<style> * { margin: 0; padding: 0; } .wrap { width: 1200px; margin: 100px auto; } .side { he...

2019-06-20 21:40:06 215

原创 手风琴动画效果

<style> * { padding: 0; margin: 0; } div { width: 1150px; height: 400px; margin: 50px auto; borde...

2019-06-20 19:28:14 227

原创 实现动画对任意元素的多个属性操作

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 107

原创 获取任意元素任意属性的值的兼容代码

function getStyle(element, attr) { //判断浏览器是否支持这个方法 return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr];}

2019-06-08 14:41:15 38

原创 筋斗云案例

<style> * { margin: 0; padding: 0; } ul { list-style: none; position: relative; } body { ...

2019-06-07 16:33:07 228

原创 封装减速动画

function slowAnimate(element, target) { clearInterval(element.slowId); element.slowId = setInterval(function () { //获取元素当前位置 var current = element.offsetLef...

2019-06-07 16:29:27 38

原创 完整的轮播图

<style> * { margin: 0; padding: 0; list-style: none; border: 0; } img { cursor: pointer; widt...

2019-06-03 21:44:50 156

原创 无缝衔接的轮播图

当图片自动移动到最后一张时,立刻衔接到第一张要点:img里多设置一张图,这张图和第一张图一样 <style> * { margin: 0; padding: 0; } img { vertical-align: top; } ...

2019-05-31 22:13:02 411

原创 左右焦点轮播图

<style> * { margin: 0; padding: 0; } img { vertical-align: top; } .box { width: 730px; h...

2019-05-31 20:57:02 80

原创 简单的轮播图

<style> * { margin: 0; padding: 0; } img { vertical-align: top; } .box { width: 730px; h...

2019-05-31 20:52:43 54

原创 点击按钮实现元素移动到指定位置

<style> * { margin: 0; padding: 0; } input { margin-top: 20px; } #dv { position: absolute; ...

2019-05-29 20:42:59 2438

原创 JS实现背景渐变

<script> my$("btn").onclick = function () { //设置透明度 var opacity = 10; var timeId = setInterval(function () { opacity--; if (opacity<=0) { ...

2019-05-28 20:38:14 1281

原创 按钮禁用

<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 1703 1

原创 定时器

<script> //setInterval(参数1,参数2) //参数1:函数 //参数2:时间--毫秒--1000毫秒=1秒 //返回值就是定时器的id值 var timeId = setInterval(function () { //每隔两秒跳出弹框 ...

2019-05-27 14:08:58 48

原创 location对象

//设置页面跳转地址 location.herf = "地址"; //与上等同 location.assign("地址"); //重新加载--刷新 location.reload(); //设置页面加载记录----但因为没有历史纪录,所以页面跳转后不能返回 locatio...

2019-05-26 21:50:00 47

原创 页面加载事件

<script> document.getElementById("btn").onclick = function () { alert("haha"); }; </script></head><body><input type="button" value="按...

2019-05-24 20:59:37 85

原创 搜索框案例

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 119

原创 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 48

原创 为同一个元素绑定多个不同的事件并指向同一个事件处理函数

//e是事件参数对象 function f1(e) { //判断对象类型 switch (e.type) { case "click": alert("halo halo"); break; case "mouseover": ...

2019-05-18 21:29:29 296

原创 事件阶段

三个阶段1、事件捕获阶段:从外向里2、事件目标阶段:当前选中对象3、事件冒泡阶段:从里向外通过对象**.eventPhase**可以获得当前事前处于什么阶段阶段的属性值为1、2、3,分别对应上面三个内容一般默认是冒泡阶段,较少用捕获阶段...

2019-05-18 21:12:47 106

原创 事件冒泡

多个元素嵌套,有层次关系,这些元素都注册了相同的事件,如果里面的元素的事件触发了,外面的元素该事件也就自动触发了阻止事件冒泡:1、IE特有的,谷歌支持,火狐不支持  window.event.cancelBubble = true;2、谷歌火狐支持,IE不支持  参数.stopPropagation();...

2019-05-18 15:41:15 35

原创 解绑事件兼容代码

function removeEventListener(element, type, fnName) { //判断浏览器是否支持这个方法 if (element.removeEventListener) { element.removeEventListener(type, fnName, false); } else if (element.detach...

2019-05-16 21:50:57 36

原创 解除绑定事件

用什么方式绑定事件,就用对应的方式解绑事件一、对象.on事件名字 = 事件处理函数;---->绑定事件对象.on事件名字 = null;      ----->解绑<input type="button" value="绑定" id="btn"><input type="button" value="解除绑定" id="btn2">my$("btn...

2019-05-16 21:28:41 64

原创 addEventListener()和attachEvent()的区别

相同点:都可以为元素绑定事件不同点:1、方法名不一样2、参数个数不一样addEventListener三个参数,attachEvent两个3、addEventListener,ie8不支持其它都支持attachEvent,ie8支持其它都不支持4、this不同addEventListener中的this是当前绑定事件的对象 my$("btn").addEventListen...

2019-05-16 20:50:06 51

原创 为元素绑定点击事件

为元素绑定点击事件:.onclick.addEventListener(type,listener,useCapture) ie不支持参数1:事件的类型—事件的名字,没有on,string类型 需要加引号参数2:事件处理函数–函数(命名函数,匿名函数)参数3:布尔类型.attachEvent(type,listener); ...

2019-05-15 22:24:43 1228

原创 节点的兼容代码

IE8对于获取节点的代码 得到的是元素获取元素的代码 得到的是undefined获取任意一个父级元素的第一个子元素 function getFirstElementChild(element) { //判断firstElementChild是否为undefined,如果不是直接返回 if (typeof element.firstElementChild...

2019-05-12 22:33:19 81

原创 获取相关节点、元素

html部分 <div class="dv"> <ul id="uu"> <li>文件</li> <li>目录</li> <li id="three">工具</li> <li&g...

2019-05-12 16:06:56 78

原创 tab切换

<style> * { margin: 0; padding: 0; } .dv { width: 399px; height: 300px; background-color: yellow; ...

2019-05-10 14:40:40 38

原创 innerText和textContent 兼容代码

如果这个属性在浏览器中不支持,那么这个属性的类型是**“undefined”** <style> div { width: 200px; height: 200px; border: 1px solid red; } </style></head&g...

2019-05-08 21:39:11 160

原创 获取焦点失去焦点事件

<style> input { color: gray; outline: none; } </style></head><body> <input type="text" value="请输入内容" id="txt"> &...

2019-05-08 18:02:05 2472

原创 二维码显示和隐藏

<style> .nodesmall { width: 50px; height: 50px; background: url("img/bgs.png") no-repeat -220px -51px; position: fixed; righ...

2019-05-06 23:30:19 395

原创 鼠标进入和离开事件

<style> li { list-style: none; cursor: pointer; } </style></head><body><ul id="uu"> <li>1</li> <l...

2019-05-06 23:27:41 4426 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 199

原创 仿开灯关灯

<style> .cls { background-color: black; } </style></head><body id="bd"><input id="btn" type="button" value="关灯"><script> ...

2019-05-04 20:12:26 55

原创 显示和隐藏

<style> div{ height: 200px; width: 200px; background-color: greenyellow; } </style></head><body><input type="b...

2019-05-04 19:43:33 41

原创 排他功能

在点击时发生了两件事,先让所有按钮的值统一,然后再把点击的单独改变值<input type="button" value="西红柿"><input type="button" value="西红柿"><input type="button" value="西红柿"><input type="button" value="西红柿"><i...

2019-05-04 14:46:18 53

原创 实现点击按钮修改多个标签内容

document.getElementsByTagName(“标签的名字”);返回的是一个伪数组无论是单个标签还是多个,最终都是存储在数组里 <input type="button" value="修改文本" id="btn"> <div id="div1"> <p>我是第一组标签</p> <p...

2019-05-03 22:15:51 226

原创 点击按钮,改变p标签的显示内容

凡是成对的标签,中间的文本内容,设置的时候都可以使用innerText这个属性 <input type="button" value="改变p标签的内容" id="btn"> <p id="p1">我是一个p标签</p> <script> //根据id获取按钮,为按钮注册点击事件,添加事件处理函数 ...

2019-05-03 16:30:16 1650

空空如也

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人 TA的粉丝

提示
确定要删除当前文章?
取消 删除