js
文章平均质量分 53
ICY___
Hi~ o(* ̄▽ ̄*)ブ,我是ICY,一枚前端小白
关注我的公众号 不露脸的如花 更多的干货和毒鸡汤等着你
展开
-
js字符串方法
let string='HELLO word'; // 1.字符串大小写 console.log(string.toLocaleLowerCase());//转小写 hello word 多加了local是针对一些特定地区的优化 console.log(string.toLocaleUpperCase());//转大写 HELLO WORD...原创 2020-03-18 22:06:17 · 186 阅读 · 0 评论 -
函数柯里化
百度百科中:在计算机科学中,柯里化(Currying)是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数且返回结果的新函数的技术。 let add=(x,y)=>{ return x+y; } add(1,2);//3 let push=add(22...原创 2020-03-10 07:57:49 · 156 阅读 · 0 评论 -
js闭包问题
闭包可以说是js的一个疑难问题,之所以难,是因为连概念都很复杂,在百度上搜了搜,解释一大堆,愣是没看懂,依照我的理解,如果你是初学者,就将它理解成一种跨越局部和全局的桥梁吧,如果你是大佬,跪求通俗且合理的解释,留言谢谢。这里,我总结了一些题,大体思路以备注,由于是习题,所以我觉得每个人要有自己的理解和方法,表示曾今也被所谓的参考答案“害”的不能自己独立思考,所以只写出了最终答案,没有写自己...原创 2019-01-30 18:40:31 · 191 阅读 · 0 评论 -
js继承(一)原型继承
正式开工了继承在js中有着很大的地位,同时理解起来也比较抽象,我将分几篇博客来记录js的继承。原型继承:相当于将父类对象与子类对象打通桥梁,可以灵活实现追加属性与行为;子类拥有父类的一切行为和属性。 特点:非常纯粹的继承关系,实例是子类的实例,也是父类的实例父类新增原型方法/原型属性,子类都能访问到简单,易于实现缺点:要想为子类新增属性和方法,必须要在n...原创 2019-02-16 21:21:09 · 235 阅读 · 0 评论 -
重写HTML5 video播放器
自从H5进宫以来,flash一直被冷落以至于要停止维护。可见,H5还是有很大的优势的,在播放器上,H5自带的播放器已经很强大了,今天将要重写H5播放器(虽然好丑)放在前面的总结:谷歌浏览器表现的差强人意,本地视频上无法实现进度条的操作,火狐可以,至少我没有找到解决办法,远程视频没有问题,有好多video属性之前听都没听说过,只能神农尝百草,还是比较头疼的,代码不算很多,毕竟是经常在用的东...原创 2019-02-23 11:30:09 · 1209 阅读 · 0 评论 -
js开发模式
首先,我是小白,对此理解不深,自己百度谷歌越查越乱,可能要做更多的项目和实战的经验才能深入理解吧。但由于之前用过单例模式写过东西,所以此博客仅为大家介绍不同开发模式的样式写法。(谁让我之前说过要写开发模式的博客呢)<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"&g...原创 2019-02-23 16:32:46 · 296 阅读 · 0 评论 -
手机触屏事件(jquery)
在移动端,点击事件和悬停事件都同统一为点击事件,所以对于手机或者带有触屏的电子设备来说,触屏事件不可忽视,当然,在不可触摸的屏幕上,这写事件就没有作用了。触摸开始事件:touchstart当手指放在屏幕上时触发,一次性事件触摸移动事件:touchmove当手指在屏幕上移动时触发,连续事件触摸结束事件 touchend与前两者搭配使用,用于判断事件是否完成...原创 2019-03-01 16:43:36 · 1248 阅读 · 0 评论 -
js小游戏案例(贪吃蛇)
贪吃蛇是我们都玩过的游戏,也是一代人的回忆。今天就带大家用原生js实现贪吃蛇游戏功能。基本思路:随机创建地图;利用top和left值,利用坐标的传递使蛇动起来;随机在地图上显示食物;利用蛇头的坐标进行判断;优化细节;开发模式:单例模式;(开发模式有时间一并分享给大家)实现效果如下:代码如下:<!DOCTYPE html><html lang="...原创 2019-02-23 10:11:51 · 2991 阅读 · 0 评论 -
js继承与实现(总结)
之前说要将js继承写完全,好像时间和能力不太允许,所以,将笔记分享给大家,与大家一同学习,一起进步!【转】 幻天芒 :https://www.cnblogs.com/humin/p/4556820.html的博客,感谢大佬的分享!JS继承的实现方式既然要实现继承,那么首先我们得有一个父类,代码如下:// 定义一个动物类function Animal (name) { ...转载 2019-02-27 10:54:00 · 120 阅读 · 0 评论 -
es6基本语法
为了更好地学习语法和之后的vue,es6是必不可少的一步!<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, in原创 2019-03-17 20:56:00 · 213 阅读 · 0 评论 -
构建自己的第一款app(开篇)
因为参加比赛,我制作了一款app来实现软硬件结合等等一系列功能,虽然之前已经做过几次app了,但都是demo类,不是没有打包,就是规模太小,趁着这次的机会,与大家分享这过程中的从头到尾!该系列博客将记录我在开发过程中的所思所感,bug吐槽和经验分享。本文是第一篇,介绍项目实施中的整体的流程。我想,一张流程图足以!现在开始,要想做一个app,其实需要我们投入很大的精力去思考...原创 2019-05-09 15:14:32 · 309 阅读 · 0 评论 -
h5计时器(requestAnimationFrame)
上次写节拍器的时候用到了h5计时器,但只是简单的记录了一点,今天特在此总结一下。<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body><s...原创 2019-05-27 19:56:56 · 2588 阅读 · 0 评论 -
vue使用百度地图api(原生js同样适用)
在之前的一个小项目中,用到的显示当地的地图功能,因为之前有了解过百度地图的开放平台,所以选择了百度地图作为的api作为示例,高德地图也类似。此文以百度为例,讲讲如何在vue或者原生js中使用这个强大的api!背景说明,我用的是js的api,不同的类型有不同的api,百度地图开放平台-js-api; 第一步,注册,申请密匙,按照步骤去填写相关的资料。然后创建应用(这里面选择使用的场景...原创 2019-06-04 18:30:52 · 5274 阅读 · 3 评论 -
js垃圾收集机制
作为任何一门高级语言,想必都是要了解一下垃圾回收机制的,之前压根就没理会这方面的问题,看书和一些面试题后,总结如下:方式一:标记清除:JavaScript中最常用的垃圾收集方式垃圾收集器给储存在内存中的所有变量都加上标记 去掉环境中的变量以及被环境中变量引用的标记 垃圾收集器完成内存清除操作,销毁那些标记的值并返回他们所占用的内存空间;方式二:引用计数:不太常见引用计数的含义是跟...原创 2019-06-04 22:29:54 · 272 阅读 · 0 评论 -
10分钟了解熟悉date类型
有好久没碰csdn了,加上考试后综合征,让我迟迟不能进入状态,前几天复习js的时候发现之前好像没写关于date整体的博客,特总结如下:Date类型使用UTC1970/1/1零点开始经过的毫秒数来保存日期(也就是最大精确度为毫秒)。使用时,第一步,创建一个日期对象var time = new Date();下面列举常用方法和案例:定义初始时间:var times1 = ...原创 2019-07-25 06:55:30 · 209 阅读 · 0 评论 -
js字符串转数组
split()方法var colors="red,blue, yellow";//字符串var colorsA=colors.split(",");//以 , 进行分割字符串,返回数组console.log(colorsA);原创 2019-07-21 07:26:00 · 2548 阅读 · 0 评论 -
原生js实现3D轮播图
3D轮播图是我做过复杂的图片轮播了,由于是利用坐标,层级之间的关系,所以实现起来原理比较简单但是bug巨多,在推推拖拖了好久后,下定决心重新整理成博客,与大家分享!首先分析一下3D图片轮播的功能需求:和其它图片轮播大体一致,无非就是点击按钮向左、右翻页,点击下方提示位置小点切换到小点表示对的位置页(我是真的不知道那个小点叫什么名字,大家将就着听吧)上代码:基本代码:<...原创 2019-01-29 17:23:56 · 1929 阅读 · 0 评论 -
js数据分页
这个案例大概是半个月之前做的,由于当时做完以后觉得比较难以接受且不太好理解(代码也比较多一点),就先将它放下了,沉淀过后,我觉得是时候拿出来与大家分享了!整体思想框架:(我想把这些注释拿出来会更好一些) 提前剧透一下,个人认为数据分页的页码算法是最复杂的,同时和图片轮播一样,关于当前页的bug会比较多,毕竟到达所需页的执行方式有多种(点击翻页页、点击页数、点击跳转页、三者混合操作),所以就...原创 2019-01-28 23:20:16 · 1728 阅读 · 0 评论 -
js实现购物网站放大镜效果
在一些主流的购物网站上,我们经常能看到一些带有放大镜效果的图片框,看似神奇,指哪哪大,其实实现的原理很简单主要原理:实现放大镜的核心是需要有三套大小不同,形状相同的图片,通过坐标的改变来实现图片的区域切换; 代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UT...原创 2019-02-03 09:01:38 · 653 阅读 · 0 评论 -
dom元素事件的理解和应用
dom 是一组用来描述脚本和结构之间如何交互的web标准;它是中立于平台和语言的接口。html dom定义了所有html元素的对象和属性,以及访问它们的方法。document对象指的是所有的html对象1.dom元素的获取getElementsByClassName 获取的是集合类型,可以借助数组类型来理解 (是用的比较多的类型) getElementById ...原创 2018-12-24 22:29:28 · 258 阅读 · 2 评论 -
js案例——实现验证码功能
今天的内容是用js的基本语法实现网页中常见的验证码功能。大体思想:核心语法为math中随机数的使用 利用随机数字来实现随机的数字 字符 汉字 ,利用字符串的拼接来实现随机字体大小、旋转角度和各种颜色,利用css样式来禁止从网页上复制和粘贴,最后用弹窗来实现验证结果提示。实现结果:具体代码及注释:<!DOCTYPE html><html lang="e...原创 2019-01-17 10:08:51 · 1427 阅读 · 0 评论 -
js实现省市区选项卡三级联动
在网站上,我们经常使用到一些地理位置选项卡,其实原理很简单,利用一些基础语法就能实现。主要思路:利用文本改变事件,在选项卡上选择对应的省时,动态创建市选项卡的内容,选择市的时候,动态创建区(县)内容html css 代码: <!DOCTYPE html><html lang="en"><head> <meta charse...原创 2019-01-17 15:33:44 · 936 阅读 · 0 评论 -
js Math对象
Math 对象用于执行数学任务,也就是数学计算,对于常见的运算方法,js都有内置。直接上代码<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <原创 2019-01-17 06:53:50 · 198 阅读 · 0 评论 -
多功能计算器制作详解
在学习了js的基本语法后,我们就能利用所学来制作一个多功能计算器了,原理很简单,往下看,有惊喜哦!基本原理:利用表格来完成计算机页面的分割 利用元素的获取和对象的绑定来实现点击按键后的事件 利用数组来记录存储键入的值和运算符 利用eval函数计算字符串的值 需要处理一些比较繁琐的bug //重点解释话不多说,直接上代码(为了好表述,将html,css,js 写在了一起)...原创 2019-01-03 08:48:07 · 1444 阅读 · 0 评论 -
正则表达式表达式及常用案例
正则表达式主要用来实现字符匹配,在表单验证中有着很强大,很巧妙的作用,在之后的博客中我会将正则表达式运用到表单验证中,那么,首先了解它的具体语法和常见案例用法吧!<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name=&quo原创 2019-01-23 19:57:23 · 304 阅读 · 0 评论 -
js时钟案例
之前觉得利用js来实现时钟功能是一件 特别优秀的事,现在,我发现它不仅优秀而且可以练习代码,难度适中。总体思想:时钟的针及表框为图片;各种针的转动为css样式;利用date属性获取一次当前的属性;利用时 分 秒的关系得出角度;案例用图:代码及注释如下<!DOCTYPE html><html><!-- 利用计时器来实现时钟的时针 分针 秒针...原创 2019-01-18 22:16:29 · 920 阅读 · 0 评论 -
js倒计时案例
在很多购物网站中,我们都能见到倒计时类的模块,那么常用的倒计时模块是怎么靠js实现的呢?下面告诉你答案!核心语法:date的使用;关键思想:利用时间差来计算和换算时间;代码如下:<!-- 主要思想是利用date属性不断获取当前时间,利用计时器做差来动态计算先在时间与设定时间的总毫秒数 --><!-- 利用毫秒 秒 分 时 天 的关系,实现倒计时的功能 -...原创 2019-01-19 06:38:06 · 923 阅读 · 0 评论 -
dom元素的操作方式
好久不见呀,CSDN。最近一直才忙,今天先从一个基础知识点,dom元素的操作来说起吧。关于dom元素的操作,之前也有接触过一点点,但需要注意的是,dom元素过多的创建会影响浏览器的性能。所以呢,求人不如求己,与其抱怨浏览器的性能和其他,不如先从优化自己的代码开始。再唠叨一下,何为dom (DOM: Document Object Module, 文档对象模型),通俗将就是可以实现从编程中更...原创 2019-01-14 18:46:33 · 233 阅读 · 0 评论 -
js图片无缝滚动
虽然是一个简单的案例,但思想确实很巧妙,且一通百通!主要原理:利用利用动态创建一个与当前相同的图片条,利用scrollLeft(滚动条的左水平偏移来实现滚动 用利用视觉暂留效应,实现图条的无缝循环;<!-- 像电子屏一样的循环滚动 --><!DOCTYPE html><html lang="en"><head> <...原创 2019-01-19 21:07:36 · 524 阅读 · 1 评论 -
js图片轮播(淡入淡出)
关于图片轮播,有太多的方法去实现,不同的样式,用的主要思想也不同,但不管怎么说,图片轮播离不开计时器。关于要注意的,要解释的,我都备注好了,说的可能不是很标准,但我尽量说的通俗,欢迎留言讨论,只要我看到的,都会回复的。<!-- 核心思想:利用层级关系 计时器和css3动画来实现这个功能完善的图片轮播案例 --><!-- 基本覆盖了轮播的所有功能 -->...原创 2019-01-21 08:47:06 · 1433 阅读 · 0 评论 -
表达验证(正则版)
利用正则表达式表达式,可以充分的实现表单验证的数据格式的正确性验证,且从入门来看,正则表达式比较好学,(往深说就不一定了),下面的案例,将告诉你如何利用正则来实现表单验证。实现效果:代码如下:<!DOCTYPE html><html><!-- 总体思想:利用最终的验证事件进行一次验证,也就是提交的时候验证各个文本框之间的数据格式是否正确,...原创 2019-01-26 09:31:53 · 541 阅读 · 0 评论 -
深刻理解js内置计时器
计时器对于图片轮播和倒计时之类的与时间相关的项目有着很大的联系,它是实现这些的核心语法,如何一次深刻理解js计时器?往下看你就知道,有惊喜哦!js计时器有两种,一种为延时后单次的执行,另一种为延时多次执行。通过函数的递归,前者也可以打破壁垒,拥有循环执行的功能。setTimeout( javascript语句 , 毫秒); (其中第一个值可以是一个函数 需要加" ",也可以是...原创 2019-01-16 22:03:09 · 455 阅读 · 0 评论 -
表单验证(实时判断)
上次的正则版表单验证的主要用意是为了正则表达式的应用,而这次的表单验证提供的更加完善的用户体验(实时判断了用户的输入数据正确与否),它是上个版本的延伸。实现效果:相应代码:<!DOCTYPE html><html lang="en"><!-- 此表单虽然样式比较简单,但功能实现还是比较复杂的,不同于一般的一步性验证而是将分步验证和最终验证结合在一...原创 2019-01-27 23:02:44 · 2105 阅读 · 4 评论 -
js图片轮播(翻页切换)
前面已经介绍了两种常见的图片轮播样式,今天将介绍一种更为常见的图片轮播形式,和淘宝的功能样式类似,这三种轮播基本上涵盖了常见网站图片轮播的所有类型,难度的话,个人认为淡入淡出是比较难的,但只要用心,仔细的体会核心思想,一步步来,相信还是可以很好地掌握的!<!DOCTYPE html><html lang="en"><!-- 主要思想 结合无缝轮播,使得...原创 2019-01-22 22:06:30 · 3390 阅读 · 0 评论 -
js基础语法小全
js,作为前端中的“c“,在圈中的地位是不言而喻的,和每一门编程语言一样,它们之间都有大致相同的语法。js的历史及其作用为啥叫JavaScript,因为跟风,和现在蹭流量蹭热度类似吧,JavaScript和Java其实并没有太大的联系。作用,和html css 一样重要,它是整个项目的灵魂!引入方法{内部,外部大致和css相同,但引入的位置不同效果也不同基本语法 ...原创 2018-12-19 17:33:14 · 152 阅读 · 3 评论