Javascript
文章平均质量分 71
案例详细分析,可实操。基础到进阶
jasmine s
这个作者很懒,什么都没留下…
展开
-
动画原理复盘
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一、动画实现原理二、动画函数的简单封装1.注意函数需要传进两个参数,动画对象和移动的距离2.给不同元素标记不同的定时器3.缓动动画原理4.缓动动画基本代码实现5.缓动动画多个目标值之间的移动6.动画函数添加回调函数总结前言提示:这里可以添加本文要记录的大概内容:例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。提示:以下是本篇文章正文内容,下面案例原创 2021-07-20 16:09:56 · 346 阅读 · 0 评论 -
ajax函数
1.1ajax入门(实现步骤)1.2服务器响应的数据格式原创 2020-08-04 21:01:59 · 697 阅读 · 0 评论 -
递归函数的案例
递归函数通俗的讲就是自己调用自己,可以用来解决数学问题,如上图此案例是打印对应的序号,因为有内外两层,定义一个函数首先foreach遍历外层函数(item),否则的不存在的话遍历内层函数,这时需要用到递归函数。返回一个数据,首先定义一个对象用来存存储数据,来判断内层函数是否有item 长度是否为0。将return的值给了getID,是重新赋予o的值,最后返回o...原创 2020-06-16 10:35:42 · 311 阅读 · 0 评论 -
JS高级ES5新增方法forEach\some\filter
产品的价格查询使用some()是因为它返回的是布尔值,遇到true时不再迭代,而forEach\filter不会终止迭代,值得注意的是some返回的是对象,需要定义一个数组,来通过push渲染到tbody中。原创 2020-06-05 10:41:21 · 134 阅读 · 0 评论 -
JS高级面向对象tab栏切换
Tab栏切换 添加功能1、点击+实现添加新的选项卡和内容2、第一步:创建新的选项卡li和新的内容section3、第二步:把创建的li和section放在相应的父元素中4、以前的做法是:动态创建元素createElement,但是元素里面的内容较多,需要innerHTML赋值,在appendChild追加到父元素里面5、高级方法:利用insertAdjacentHTML()可以直接把字符串格式元素添加到父元素中6、appendChild不支持追加字符串的子元素,insertAdjecentHTM原创 2020-05-30 11:41:05 · 240 阅读 · 0 评论 -
Js移动端轮播图
移动端轮播图与PC端基本一致自动播放图片但可以1、可以自动播放图片2、开启定时器3、移动端移动,可以用translate移动无缝滚动4、自动无缝播放5、等到过渡完成之后再去判断6、添加检测过渡完成事件 transtionend7、判断条件:如果索引号等于3,走到最后这一张,此时索引号就要复原为08、去掉过渡,重新计算index=0重新开始9、如果索引号小于0,说明反方向走,让...原创 2020-04-24 11:36:54 · 247 阅读 · 0 评论 -
JS移动端拖动元素
需要注意的是,书写css时,相对定位不要忘记移动端移动的核心思路:1、计算手指移动的距离:手指移动之后的坐标 -手指初始化坐标2、盒子移动距离:手指移动的距离加上盒子初始化坐标3、需要touchstart、touchmove 搭配使用4、这时需要注意区分PC端的方法mouseover mouseout mousemove5、最后e.preventDefault()是用来防止屏幕滚动的默...原创 2020-04-22 09:27:38 · 363 阅读 · 0 评论 -
Javascript元素滚动scoll系列 (仿淘宝固定右侧侧边栏)和移动端区别
效果:1、原先侧边栏是绝对定位2、当页面移动到一定位置,侧边栏改为固定定位3、页面继续滚动,会让返回顶部显示出来案例分析:1、需要用页面滚动事件scoll 因为页面滚动,所以事件源是document2、滚动到某个位置,就是判断页面被卷上去的上部值3、页面被卷上去的头部:可以通过window.pageYOffset 获得 如果被卷去的是左侧 window.pageXOffset4、注意...原创 2020-04-10 10:33:39 · 726 阅读 · 0 评论 -
轮播图案例
案例分析:1、点击右侧按钮一次,图片移动一张2、声明一个变量num,点击一次,自增一,让这个变量乘以图片的宽度,就是ul的移动距离3、图片的无缝滚动4、把ul的第一个li复制一份,放在ul最后面5、当图片滚动到最后面一张图片时,让ul快速的,不做动画的跳转到做左侧 left为06、同时num赋值为0,重新滚动7、自动生成最后一张照片,自动克隆8、克隆ul第一个li,cloneNode...原创 2020-04-20 08:51:36 · 327 阅读 · 0 评论 -
仿京东放大镜案例详细分析与模态框区别
与拖拽模拟框不同的是,模拟框是鼠标的坐标减去盒子内的坐标而放大镜来说 是得到鼠标内的坐标 之后把鼠标值给黄色的坐标1、黄色遮盖层跟随鼠标功能2、把鼠标给遮盖曾不合适 因为遮盖层坐标以父元素为准3、首先获得鼠标在盒子的坐标4、之后把 数值给遮盖层作为left和 top值5、此时用鼠标移动事件,但还是在小图片盒子内移动6、发现遮盖层位置不对,需要就去盒子宽度和高度的一半7、遮盖层不能...原创 2020-04-07 10:00:24 · 231 阅读 · 0 评论 -
Javascript模拟框拖拽案例详细分析
案例分析:1、点击弹出框,模块框和遮挡层就会显示出来 display:block;2、点击关闭按钮,模块框和遮挡层就会隐藏出来3、鼠标在页面中的拖拽原理:鼠标按下并且移动,之后再松开鼠标4、触发事件为鼠标按下mousedown 鼠标移动mousemove 鼠标弹起mouseup5、拖拽过程:鼠标移动中,获得最新的值赋给模态框的top和l...原创 2020-04-05 11:09:39 · 387 阅读 · 0 评论 -
JS中定时器的使用以及lacation对象的多个案例
5秒之后页面跳转注册绑定事件之后,需要URL部分只是 location.href得到的是整个链接 ,将跳转的页面内容赋给div ,使用定时器倒计时实现时间的变化。手机短信的倒计时案例分析:获取URL参数数据 数据在不同页面的相互传递1、第一次登录页面,里面有提交表单 action提交到index.html页面2、第二个页面,可以使用第一个页面的参数,这样实现了一个数据不同页面的...原创 2020-03-30 11:45:04 · 190 阅读 · 0 评论 -
Js如何动态创建表格
要求:1、因为里面的学生数据是动态的,需要js生成。这里模拟数据,定义好数据,数据采用对象形式存储。2、所有的数据都放在tbody里面。3、因为行多,我们需要创建多个行4、每个行里有多个单元格,继续创建单元格5、最后一列单元格删除,需要单独创建单元格首先创建数据,放在数组中定义属性。获取tbody,for循坏创建tr行,关键是要把tr放在tbody里面,赋值给他。接着创建td...原创 2020-03-18 12:07:48 · 421 阅读 · 0 评论 -
JS简单版发布留言 删除留言
核心思路:1 点击按钮之后,动态生成一个li,添加到ul里面2 创建li的同时,又把文本域里面的li.innerHTML赋值给li3 如果想要新的留言后面显示就用appendChild ,如果想要留言前面显示就用insertBeforeshu...原创 2020-03-16 12:45:42 · 828 阅读 · 2 评论 -
Javascript 之tap切换栏详解 及JQuery方法
HEML部分分为两个内容,包括上面的选择框和下面的内容框,分别为tab_list和tab_con。tab_list包含ul和li。下面的内容框使用div来写。值得注意的是要隐藏内容,所以在item中给了display属性none,在商品内容为block.获取tab-list和li,for循环绑定事件。再用for循环清除li的class属性,留下this.className (谁点击了谁就是...原创 2020-03-13 13:04:27 · 1210 阅读 · 0 评论 -
Javascript表单全选取消、全选反选案例
要求: 点击上面的复选框,下面的复选框全部选中 再次点击复选框,下面所有的复选框都不选中思路分析:下面所有的复选框的checked属性跟随全选按钮 商品 价钱 iphon8 8000 ipad P...原创 2020-03-11 13:28:45 · 555 阅读 · 0 评论 -
Javascript表格的隔行换色效果
案例分析1、用到鼠标事件 鼠标经过onmouseover 离开onmouseout2、核心思路:鼠标经过行,当前行变换颜色 离去去掉当前背景颜色3、注意:第一行不需要变色 获取的是body 行标签定义格式 书写css样式的使用,值得一提的是 类标签的使用 为鼠标经过中的做铺垫 调用经过时tr可用到的颜色第一行 :获...原创 2020-03-09 12:10:10 · 304 阅读 · 0 评论