JavaScript
肝JOJO
这个作者很懒,什么都没留下…
展开
-
JS 59 筋斗云案例
一.需求分析: 1.鼠标经过某个li,筋斗云跟着到当前位置 2.鼠标离开某个li,筋斗云复原为原来位置 3.鼠标点击某个li,筋斗云停留在这个li效果展示:二.实现思路: 1.利用动画函数做动画效果 2.原来筋斗云起始位置为0 3.鼠标经过某个li,把当前li的offsetLeft作为动画函数的目标值即可 4.鼠标离开li时,把目标设...原创 2019-11-07 00:03:29 · 593 阅读 · 0 评论 -
JS 58 缓慢动画原理
1.概念: 缓动动画就是让元素运动速度有所变化,最常见的是让速度慢慢停下来2.思路: ①让盒子每次移动的距离慢慢变小,速度就会慢慢落下来 ②核心算法:(目标值-现在的位置)/10 作为每次移动的距离 ③停止条件:当前盒子位置等于目标位置时停止计时器代码: div { width: 100px; h...原创 2019-10-24 11:26:44 · 288 阅读 · 0 评论 -
JS 57 动画原理
一.动画原理实现1.核心原理:通过定时器setInterval()不断移动盒子位置2.实现步骤:①获得当前盒子位置②让盒子在当前位置加上1个移动距离③用定时器不断重复④结束定时器来停止动画⑤注意元素需要添加定位,才能使用element.style.left3.案例:让一个盒子从左到右动起来代码: div { position: absolu...原创 2019-10-24 00:18:09 · 166 阅读 · 0 评论 -
JS 56 scroll滚动条
一.scroll系列属性 element.scrollTop 返回被卷去的上侧距离,无单位 element.scrollLeft 返回被卷去的左侧距离,无单位 element.scrollWidth 返回自身实际宽度,不含边框,无单位 element.scrollHeight 返回自身实际高度,不含边框,无单位 window.pageYOffset ...原创 2019-10-23 00:13:59 · 145 阅读 · 0 评论 -
JS 55 client元素可视区
1.client系列属性的作用: element.clientTop 返回元素上边框大小 element.clientLeft 返回元素左边框大小 element.clientWidth 返回自身包括padding,内容区的宽度,不含边框,返回值不带单位 element.clientHeight 返回自身包括padding,内容区的高度,不含边框,返回值不带...原创 2019-10-22 11:21:12 · 188 阅读 · 0 评论 -
JS 54 淘宝放大镜效果案例
效果图下:代码如下: <style> .preview_wrap{ width: 400px; height: 590px; } .preview_img{ position: relative; height: 398px; ...原创 2019-10-22 00:10:34 · 127 阅读 · 0 评论 -
JS 53 拖动模态框案例
案例要求:1.点击登录框弹出登录盒子,模态框和遮挡层显示出来2.点击关闭,模态框和遮挡层隐藏3.在title位置按下鼠标可以拖动(模态框的位置=鼠标的坐标-鼠标在盒子内的坐标)4.松开鼠标停止拖动(解除鼠标移动事件)效果展示:代码: <style> .login-header a{ font-size: 18px; ...原创 2019-10-20 22:47:22 · 216 阅读 · 0 评论 -
JS 52 offset偏移量
1.offset概述offset就是偏移量,我们使用offset系列相关属性可以动态的得到该元素的位置(偏移),大小等.获得元素距离定有定位父元素的位置.获取元素自身的大小(宽高).注:返回的数值都不带单位2.offset系列属性①element.offsetParent 返回带有定位的父元素,父元素无定位则反回body代码示例:var son=document.querySel...原创 2019-10-18 22:51:54 · 250 阅读 · 0 评论 -
JS 51 PC网页特效知识点
一.目标:1.能够说出常见offset系列属性的作用2.能够说出常见client系列属性的作用3.能够说出常见scroll系列属性的作用4.能够封装简单的动画函数5.能够写出网页轮播图案例...原创 2019-10-18 22:47:16 · 356 阅读 · 0 评论 -
JS 50 navigator和history对象
1.navigator对象包含有关浏览器的信息,他有很多属性,我们最常用的是userAgent,该属性可以返回由客户机发送服务器的user-agent头部的值例:判断用户使用哪个终端打开页面,实现跳转 if((navigator.userAgent.match(/(phone|pad)/i))){ window.location.href=''; //手机 ...原创 2019-10-17 22:17:21 · 125 阅读 · 0 评论 -
JS 49 location对象常见方法
location.assign()跟href一样,可以跳转页面(也称为重定向页面),记录历史,可以后退例:点击跳转到百度 var btn=document.querySelector('button'); btn.addEventListener('click',function(){ lo...原创 2019-10-17 21:48:34 · 182 阅读 · 0 评论 -
JS 48 location对象常见属性
1.什么是location对象 location对象用于获取或设置窗体的URL,并且可以用于解析URL,返回的是一个对象2.location对象的属性 location.href 获取或设置整个URL location.host 返回主机(域名) location.port 返回端口号 如果未写返回 空字符串 location.pathname ...原创 2019-10-16 22:00:19 · 281 阅读 · 0 评论 -
JS 47 同步和异步
1.JS的单线程 JS的一大特点是单线程,也就是说,同一时间只能做一件事.单线程就意味着,所有队列需要排队,前一个任务结束,才会执行后一个任务.这样导致的问题是:如果JS执行的时间长,就会造成页面的渲染不连贯,导致页面渲染加载阻塞的感觉2.同步和异步 为了解决单线程出现的问题,HTML5提出Web Worker标准,允许JS脚本创建多个线程.于是便出现了同步和异步 ...原创 2019-10-16 21:26:51 · 128 阅读 · 0 评论 -
JS 46 定时器setInterval
setInterval()定时器会每隔一段时间,就去调用一次函数1.语法:window.setInterval(回调函数,间隔的毫秒数);2.注意:①可以省略window②延迟时间单位为毫秒,可以省略,省略默认为0③这个调用函数可以直接写函数,也可以写函数名④页面中可能有很多计时器,我们通常给计时器加标识符(名字)3.案例:实现一个倒计时效果注意:①第一次执行也是间隔毫秒数,因此...原创 2019-10-14 21:45:24 · 304 阅读 · 0 评论 -
JS 45 定时器-setTimeout
1.setTimeout定时器:在定时器到期后执行调用函数语法:window.setTimeout(调用函数,延迟的毫秒数);①可以省略window②延迟时间单位为毫秒,可以省略,省略默认为0③这个调用函数可以直接写函数,也可以写函数名setTimeout(fn,2000);function fn(){ alert('2s');}④页面中可能有很多计时器,我们通常给计时器...原创 2019-10-14 21:09:09 · 276 阅读 · 0 评论 -
JS 44 BOM基础
一.目标:1.能说出什么是BOM2.能知道浏览器的顶级对象window3.能够写出页面加载事件以及注意事项4.能够写出两种定时器函数并说出区别5.能够说出JS执行机制6.能够使用location对象完成页面间的跳转7.能够知晓navigator对象涉及的属性8.能够使用history提供的方法实现页面刷新二.BOM概述1.BOM(Browser ObjectModel)即浏览器...原创 2019-10-13 21:45:22 · 178 阅读 · 0 评论 -
JS 43 常用的键盘事件
1.常用的键盘事件onkeyup 某个按键被松开时触发,不区分大小写 (最后执行)onkeydown 某个按键被按下时触发,不区分大小写 (先执行)onkeypress 某个按键被按下时触发,但是他不识别功能键 ctrl shift 箭头等 (后执行)例如:document.addEventListener('keyup',function(){ alert('松开触发'...原创 2019-10-12 21:13:04 · 198 阅读 · 0 评论 -
JS 42 获得鼠标在页面中的坐标
获得鼠标在页面中的坐标e.clientX 返回鼠标相对于浏览器窗口可视区域的X坐标e.clientY 返回鼠标相对于浏览器窗口可视区域的Y坐标e.pageX 返回鼠标相对于文档页面的X坐标 IE9+支持e.pageY 返回鼠标相对于文档页面的Y坐标 IE9+支持e.screenX 返回鼠标相对于电脑屏幕的X坐标e.screenY 返回鼠标相对于电脑屏幕的Y坐标1...原创 2019-10-11 21:45:53 · 132 阅读 · 0 评论 -
JS day8 有参函数及arguments
1.有参函数:到底输出几个是不确定的,我们把函数中不确定的值当做形参(形式上的参数)进行声明.有参函数封装过程:function 函数名(形参…){函数体;}例题:①:输出n个"新津暴徒" function print(n){ for(var i=1;i<=n;i++){ document.write("新津暴徒&...原创 2019-09-03 23:55:00 · 200 阅读 · 0 评论 -
JS day32 下拉菜单练习
一 . 思路分析:1.导航栏里面的li都要有鼠标经过事件2.当鼠标经过li时,里面的ul显示,离开时隐藏二.效果展示三.代码 <style> *{ margin: 0px; padding: 0px; } .nav{ background-color...原创 2019-09-27 22:05:20 · 116 阅读 · 0 评论 -
JS day33 留言板案列
一.思路分析:1.点击按钮之后,动态创建一个li,添加进ul里面2.创建li的同时,把文本框内的值通过li.innerHTML赋值给li3.发布的留言在最后用appendChild/在前面显示用insertBefore二.效果展示三.代码 <style> textarea{ color:#999; } ...原创 2019-09-28 13:33:47 · 116 阅读 · 0 评论 -
JS day34 动态生成表格案例
一.思路分析1.数据采用对象形式存储2.所有的数据放到tbody里面3.行数=数组长度4.单元格个数=数组中每个对象的属性个数5.将对象属性的值赋给单元格,然后将单元格插入tr行中6.最后一列单元格是删除,单独创建二.效果展示1会根据数据变化自动生成三.代码 <style> table{ width: 500px; ...原创 2019-10-02 01:08:01 · 151 阅读 · 0 评论 -
JS day35 三种动态创建元素的区别
1.document.write()直接将内容写入页面的内容流.当文档流加载完毕时,调用它会导致页面全部重绘document.write('<div>123</div>') //创建div标签2.element.innerHTML创建多个元素效率更高(不采取拼接字符串,采取数组形式),结构稍复杂①拼接字符串创建1000个a标签,效率低 var div=d...原创 2019-10-02 23:37:22 · 95 阅读 · 0 评论 -
JS day36 注册事件的两种方式
一.概念:给元素添加事件,称为注册事件或者绑定事件.二.注册方式:1传统注册方式①.例如onclick <button onclick="alert ("hi")"></button>btn.onclick=function(){}②.特点注册事件的唯一性.同一个元素,同一个事件只能设置一个处理函数,最后注册的事件会覆盖之前注册的事件③.代码示例 ...原创 2019-10-05 00:11:43 · 118 阅读 · 0 评论 -
JS day37 删除解绑事件
一.删除(解绑)事件的方式例题:点击div弹出一个对话框,只能弹一次,下次再点就不弹出1.传统注册方式div.οnclick=null;代码示例:var divs=document.querySelectorAll('div');divs[0].onclick=function(){ alert('11'); divs[0].onclick=null;}2.方法监听注册方式...原创 2019-10-05 23:38:40 · 127 阅读 · 0 评论 -
JS day38 DOM事件流
一.概念1.事件流描述的是从页面中接收事件的顺序2.事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即DOM事件流二.DOM事件流分为3阶段1.捕获阶段2.当前目标阶段3.冒泡阶段注:*事件冒泡:IE最早提出,事件开始时由最具体的元素接收,然后逐级向上传播到DOM最顶层的过程*事件捕获:网景最早提出,由DOM最顶层节点开始,然后逐级向下传播到最具体的元素接收过程三...原创 2019-10-07 00:46:14 · 113 阅读 · 0 评论 -
JS day39 事件对象
<div>1</div> <script> var div=document.querySelector('div'); div.onclick=function(event){ event=event || window.event console.log(event);...原创 2019-10-07 23:42:44 · 93 阅读 · 0 评论 -
JS day40 事件对象常见的属性和方法
事件对象常见的属性和方法1:e.target 返回触发事件的对象(标准)2:e.srcElement 返回触发事件的对象(非标准ie 6~8) <ul> <li>1</li> <li>2</li> </ul>var ul=document.querySelecto...原创 2019-10-08 23:38:30 · 129 阅读 · 0 评论 -
JS 41 事件委托与常用的鼠标事件
一. 事件委托事件委托也称事件代理,在jQuery里面成为委派1.原理不是每个子节点单独设置事件监听器,而把事件监听器设置在其父节点上,然后利用冒泡原理影响设置每个子节点2.例如给ul注册点击事件,然后利用事件对象的target来找到当前点击的Li.因为点击li,事件会冒泡到ul上,ul有注册事件,就会触发事件监听器.3.优点只操作了一次DOM,提高了程序的性能例如:<bo...原创 2019-10-10 20:48:23 · 272 阅读 · 0 评论 -
JS day31 节点操作
1.节点概述:①网页中的所有内容都是节点(标签.属性.文本.注释等),在DOM中,节点使用node来表示.HTML DOM树中的所有节点均可通过JS来访问,所有HTML元素(节点)均可被修改,也可以被创建或删除.实际开发中,节点主要操作元素②一般的,节点至少拥有nodeTyle(类型) nodeName(名称)和nodeValue(值)这三个基本属性*元素节点 nodeTyle 为 1...原创 2019-09-26 22:46:25 · 79 阅读 · 0 评论 -
JS day30 获取设置自定义属性值
<script type="text/javascript"> //一.获取属性值 window.onload=function(){ var div=document.querySelector('div'); div.id; //方法1.element.属性 获...原创 2019-09-24 21:52:19 · 153 阅读 · 0 评论 -
JS day14 数组_栈方法和队列方法
一.栈方法1.栈结构特点:先进后出①push进[格式]:数组.push(元素…)[功能]:给数组末尾添加元素[返回值]:添加元素以后,数组的长度例如: var arr=["孙笑川","李老八","五五开"]; var res=arr.push("PDD","炫炫炫") //给数组后添加元素 document.write(res); //返回添加元素后数组的长...原创 2019-09-06 23:41:21 · 107 阅读 · 0 评论 -
JS day13 数组
1.基本概念数组是复合数据类型,用来存储大量数据例如: var arr=new Array(1,true,"hello"); //创建一个新数组,也可以省略new var arr1=new Array(10); //此时表示数组长度为10的数组 var arr2=[1,2,3]; //一般用此方法创建 alert(arr2[0]); //访问对应数组中的第0个数...原创 2019-09-06 11:44:54 · 77 阅读 · 0 评论 -
JS day12 事件驱动函数
一.什么是事件驱动函数?在和页面交互过程中所调用的函数,该函数被称为事件驱动函数.二.什么是事件?和页面交互的行为称之为事件.比如:①鼠标点击某个按钮(onclick)②鼠标悬浮或离开③到某个区域时(onmouseover.onmouseout).④文本框获取焦点和失去焦点时(onfocus.onblur)等三.如何实现?使用:document.getElementById(“b...原创 2019-09-06 10:36:36 · 173 阅读 · 0 评论 -
JS day11 函数_递归
递归的概念:函数可以自己调用自己,称为递归调用.函数的递归调用:方法:1.首先去找临界值,即是无需计算,获得的值2.找这一次和上一次的关系3.假设当前函数已经可以使用了,调用自身计算上一次的运行结果,再写出这次的运行结果特点:1.必须有参数2.必须return注:递归会在短时间内使内存剧增. (因为在计算出最初始的值时才会释放内存)例题:1.求1~n的和?分析:sum(n)...原创 2019-09-05 11:44:43 · 104 阅读 · 0 评论 -
JS day10 函数练习
题目:1.判断一个年份是否是瑞年?分析:闰年条件:可以被400整除 或者 被4整除且不能被100整除参数:年份返回值:是否是闰年 function LeapYear(year) { if (year %400==0 || year%4==0 && year %100!=0){ return true; ...原创 2019-09-04 11:58:41 · 108 阅读 · 0 评论 -
JS day9 函数_返回值和作用域
希望能在外部获取到,函数调用的结果:如果我们是要在外部获取到函数内运行结果,可以通过return语句后面跟要返回的值[注]:执行到return之后就结束例如: function add (num1,num2){ //alert(num1+num2); 改为: return document.write(num1+num2); } ad...原创 2019-09-04 11:27:58 · 207 阅读 · 0 评论 -
JS day7 函数的概念及作用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...原创 2019-09-03 11:58:55 · 102 阅读 · 0 评论 -
JS day3 数码时钟练习
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...原创 2019-08-27 11:43:24 · 113 阅读 · 0 评论 -
JS day6 流程控制
一.顺序结构 :从上朝下执行例如: <script type="text/javascript"> //题目:输入两个数,然后交换两个数,再输出他们交换后的结果 var num1=1; var num2=2; var tem=num1; num1=num2; num2=tem; ...原创 2019-09-02 23:41:27 · 85 阅读 · 0 评论