js练习
关注
分享
扫一扫
文章平均质量分 81
冰雪为融
我与我周旋久，宁做我
展开
-
数组对象比较处理（面试题，附答案）
闲来无事，看到一个面试题，做了一下写了几个工具函数：需要引入一下/** 判断是否为数组* */function isArray (params) { return params instanceof Array}/** 判断是否为对象* */function isObject (params) { return params instanceof Object}/** 判断参数是否为同一个类型，比如是否都为对象，或者是否都为数组等等* */f.原创 2020-06-30 17:47:52 · 457 阅读 · 0 评论 -
js将日期格式转化为YYYY-MM-DD HH:MM:SS
一、js将日期格式转化为YYYY-MM-DD HH:MM:SS Date.prototype.Format = function (fmt) { var o = { "M+": this.getMonth() + 1, //月份 "d+": this.getDate(), //日 "h+": this.getHours(), //...转载 2018-12-01 16:03:41 · 21461 阅读 · 0 评论 -
全选功能的实现（将类数组转化为数组，利用every实现）
就是一个小小的全选功能的实现，主要是利用类数组转为真正的数组，然后利用数组的every方法，实现的一个全选的功能 。比较简单，直接看例子（完整的代码）：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>全选按钮功能的原创 2018-09-14 18:38:05 · 571 阅读 · 0 评论 -
js易错问题总结系列
整理遇到的掌握的不是特别好的问题，方便以后重点学习一、JavaScript的三种消息框alert，confirm，prompt1. alert是弹出警告框，在文本里面加入\n就可以换行。2. confirm弹出确认框，会返回布尔值，通过这个值可以判断点击时确认还是取消。true表示点击了确认，false表示点击了取消。3. prompt弹出输入框，点击确认返回输入框中的值，点击取消...原创 2018-08-04 19:27:05 · 291 阅读 · 0 评论 -
原生js实现3D照片墙
效果：1、点击Start View进入照片墙2、只有一张图片是在中间显示，其他图片在中间的图片两侧随机排序，并且随机旋转一定的角度，层级也是随机的哦3、点击上面的导航条，可以让对应的图片在中间显示4、点击中间的图片该照片翻转，显示背面（照片的描述信息）实现过程：1、用数据生成结构（模拟的数据，此处不再提供）2、对所有图片进行排序3、计算两侧图片的随机范围4、控制图片翻转5、控制导航按钮切换图片6、...原创 2018-07-04 21:50:04 · 6281 阅读 · 1 评论 -
展示页效果制作
嗯、先看一下效果图，大致就是点击图片，让点击的图片到达中间的位置思路：1、封装一个tab(n)函数，然图片排成上面的效果，n是几就代表第几张图片在中间的位置2、封装两个函数，上一个和下一个3、判断点击div时执行上一个还是下一个操作 1）、记录鼠标点击时的位置 disX 2）、封装一个函数计算中间的图片的右边到屏幕左侧的距离 disR 3）、封装一个函数计算中间的图片的左边...原创 2018-07-02 15:20:43 · 344 阅读 · 0 评论 -
折扇效果的实现
思路：封装函数使每个div进行旋转点击最后一个div将所有div重置到初始位置使用延迟定时器调用函数（实现页面加载完成之后的展开动画）点击除了最后一个div以外的展开动画（根据点击的div的所引致，让所有div进行旋转，设置点击元素之前和之后的div的旋转偏移值）大致效果，点击最上面的div，实现扇子的折叠和展开效果，点击其他任意一个div，就让当前这个div在垂直位置显示看一个效果图：代码如下：...原创 2018-07-01 20:56:14 · 909 阅读 · 0 评论 -
原生js打造自定义播放器
用到的技术，主要是video的相关知识：实现的功能是去掉自带的控制条，按自己想要的形式设置视频的控制条：有播放与暂停（play()方法和pause()方法）、拖拽控制条控制视频的播放进度，并且控制条随着视频的播放进度自动前进或后退，还有视频播放的当前时间和视频的总时间，以及音量大小的控制，和是否全屏播放按钮，这里的全屏播放，只用了一条语句oV.mozRequestFullScreen();//按E...原创 2018-04-12 23:22:02 · 2509 阅读 · 0 评论 -
js倒计时原理及实例总结
倒计时原理：用未来的时间-当前的时间未来的时间：可以利用date对象传参的方式，获取到未来的时间,参数的形式有两种：数字形式和字符串形式new Date(2018,3,22,6,44,30)或者是new Date('April 22,2018 6:44:30')现在的时间：用new Date()即可注意事项：用这种方法得到的时间单位是毫秒，所以要首先转为秒这样好计算（除以1000即可），不要忘记...原创 2018-04-22 19:06:09 · 1467 阅读 · 0 评论 -
原生js+css实现带预览图片的幻灯片效果实例
先总结一下，里面的用到的关键知识点CSS中用到的知识点有：过渡效果：transition，下面是语法，用到时候一般要加上浏览器内核前缀。本实例中主要用到过渡的地方是opacity和righttransition: property duration timing-function delay;图片垂直居中：（这个我之前详细写过怎么实现水平垂直居中，原理一样，如果有兴趣的可以点击https://bl...原创 2018-04-10 20:48:19 · 2045 阅读 · 0 评论 -
原生js实现去掉滚动条后的整屏切换（平滑过渡效果）
记得上学期实习的时候，想要用原生的js实现整屏切换（平滑过渡）的效果，百度了好久都没找到合适的方法，最后采用了很low的措施使用scrollTo();方法实现滚动鼠标到达想要的页面，之后也一直放不下这个问题，终于今天又重新尝试解决这个问题，没想到一会儿就搞定了（心里还在想怎么这么简单，当时咋就不会呢？），哈哈，果然是以前自己技术太烂（其实现在也还是很烂）嗯，回归正题，先说一下效果：1、去掉了右...原创 2018-03-31 10:00:22 · 4481 阅读 · 3 评论 -
原生js实现QQ邮箱邮件拖拽删除功能
步骤分析：根据数据结构生成HTML结构全选和单选功能的实现，以及当其为选中状态时它的父级的颜色变化的点击删除，删除结构同时删除数据给每一个li绑定mousedown，tip显示，并且定位在鼠标位置鼠标移动时，tip跟随，取消默认行为碰撞检测是否拖到“已删除”项鼠标松开、删除结构和数据过程实现HTML代码<body><div class="wrap" id="box"> ...原创 2018-03-15 20:48:26 · 2101 阅读 · 0 评论 -
原生js实现弹性菜单功能
弹性菜单，主要运用到的是弹性运动。只要知道了弹性运动是怎样实现的，弹性菜单就很好实现了，下面我首先总结一下，我是怎样一步一步实现弹性运动的，然后再写弹性菜单的代码。弹性运动用到的知识：js基础、dom、定时器弹性运动实现步骤：声明和获取要运用到的变量清空定时器开启定时器，在定时器内求出速度：速度 +=（目标点 - 当前值）/系数（系数一般取6、7、8），因为需要最终让运动停止，所以还要有摩擦力。所...原创 2018-03-17 11:22:10 · 866 阅读 · 0 评论 -
原生js实现拖动图片左右弹性切换（模仿iPhone弹性拖拽的功能）
因为弹性运动我在弹性菜单实例中已经列过详细的步骤了，所以此处不再赘述，有不懂的或有兴趣的请点击原生js实现弹性菜单这个例子里面我们主要解决的问题有1、弹性运动的实现（不再详细讲解）2、怎样判断鼠标是向左拖动还是向右拖动当抬起鼠标的位置大于按下鼠标的位置时，则判断为向左拖拽，当抬起鼠标的位置小与按下鼠标的位置时，则判断为向右拖拽。解决了上面两个问题，然后我们直接上代码HTML代码<div id...原创 2018-03-17 11:47:34 · 2673 阅读 · 0 评论 -
原生js实现分页的效果
想必大家都用过百度查找过我们想要的信息，每次我们查找东西的时候，百度都会返给我们很多很多相似和有关的结果，而这些结果是不可能一页就显示完全的，一般都会分很多很多页，效果图如下。所以我们今天就是要分享一下，这个分页效果是怎么实现的。首先我们观察这个分页一页中显示的页码数是固定的当当期页码大于等于2的时候，开始显示‘上一页’按钮，当总页数比当前显示的页码大于等于1的时候，开始显示'下一页'按钮的按钮如...原创 2018-03-18 19:08:38 · 4344 阅读 · 1 评论 -
原生js实现苹果菜单效果
主要用到的知识点Math.pow(a,b);//a的b次方Math.sqrt(a);//a的开方其他的并不难，直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>苹果菜单练习</title>原创 2018-03-23 16:26:19 · 1129 阅读 · 0 评论 -
原生js模仿京东图片放大镜效果
实现放大镜效果，是需要两张图片，记得两张图片的比例要保持一致哦嗯，挺简单的，所以直接上代码喽，有不懂的可以评论区留言哦<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>放大镜练习</title>原创 2018-03-23 17:06:55 · 1436 阅读 · 0 评论 -
原生js实现照片墙的效果（拖拽图片与另一张图片交换位置）
用到的功能有：布局转换（将float布局转换为定位布局）图片拖拽效果的实现碰撞检测计算两点之间的斜线距离找最小值具体的实现在代码中我都有注释，嗯，直接上代码。注：这里还需要有一个运动框架，需要的请点击js运动框架<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...原创 2018-03-24 12:13:15 · 5480 阅读 · 3 评论 -
拖拽上传图片，及删除小实例
主要还是对draggable的练习，因为之前遇到了点小问题，所以今天才整理，对draggable不太了解的请点击深入理解js中的draggable，该有的解释已经在注释中了，所以此处不再过多解释，嗯、直接上代码<!DOCTYPE HTML><html><head> <meta http-equiv="Content-Type" content...原创 2018-03-29 19:31:40 · 1206 阅读 · 0 评论