ICY___的js进阶
你想要的,我这都没有(啊哈哈哈)
ICY___
Hi~ o(* ̄▽ ̄*)ブ,我是ICY,一枚前端小白
关注我的公众号 不露脸的如花 更多的干货和毒鸡汤等着你
展开
-
模拟百度搜索
通过jsonp的跨域,实现对百度搜索接口的调用,最终实现模拟搜索的功能。<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> .block{...原创 2020-03-13 09:41:14 · 281 阅读 · 0 评论 -
js原生ajax五步走
ajax给web领域带来了无穷无尽的活力,而我的博客却只有一个jquery的说明,这怎么能行呢?不符合我的气质!ajax其实不复杂,一种技术的出现,是为了大家更方便的实现功能的,而不是难倒开发者。总结一下:①创建一个XMLHTTPRequest对象 ②利用open方法连接服务器(所谓的接口) ③利用send方法向服务器发送请求 ④创建请求读取完成的事件,执行设计的功能 ⑤...原创 2020-03-01 19:06:04 · 364 阅读 · 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 · 2593 阅读 · 0 评论 -
js小游戏案例(贪吃蛇)
贪吃蛇是我们都玩过的游戏,也是一代人的回忆。今天就带大家用原生js实现贪吃蛇游戏功能。基本思路:随机创建地图;利用top和left值,利用坐标的传递使蛇动起来;随机在地图上显示食物;利用蛇头的坐标进行判断;优化细节;开发模式:单例模式;(开发模式有时间一并分享给大家)实现效果如下:代码如下:<!DOCTYPE html><html lang="...原创 2019-02-23 10:11:51 · 3000 阅读 · 0 评论 -
js继承(一)原型继承
正式开工了继承在js中有着很大的地位,同时理解起来也比较抽象,我将分几篇博客来记录js的继承。原型继承:相当于将父类对象与子类对象打通桥梁,可以灵活实现追加属性与行为;子类拥有父类的一切行为和属性。 特点:非常纯粹的继承关系,实例是子类的实例,也是父类的实例父类新增原型方法/原型属性,子类都能访问到简单,易于实现缺点:要想为子类新增属性和方法,必须要在n...原创 2019-02-16 21:21:09 · 239 阅读 · 0 评论 -
js实现购物网站放大镜效果
在一些主流的购物网站上,我们经常能看到一些带有放大镜效果的图片框,看似神奇,指哪哪大,其实实现的原理很简单主要原理:实现放大镜的核心是需要有三套大小不同,形状相同的图片,通过坐标的改变来实现图片的区域切换; 代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UT...原创 2019-02-03 09:01:38 · 657 阅读 · 0 评论 -
js闭包问题
闭包可以说是js的一个疑难问题,之所以难,是因为连概念都很复杂,在百度上搜了搜,解释一大堆,愣是没看懂,依照我的理解,如果你是初学者,就将它理解成一种跨越局部和全局的桥梁吧,如果你是大佬,跪求通俗且合理的解释,留言谢谢。这里,我总结了一些题,大体思路以备注,由于是习题,所以我觉得每个人要有自己的理解和方法,表示曾今也被所谓的参考答案“害”的不能自己独立思考,所以只写出了最终答案,没有写自己...原创 2019-01-30 18:40:31 · 192 阅读 · 0 评论 -
原生js实现3D轮播图
3D轮播图是我做过复杂的图片轮播了,由于是利用坐标,层级之间的关系,所以实现起来原理比较简单但是bug巨多,在推推拖拖了好久后,下定决心重新整理成博客,与大家分享!首先分析一下3D图片轮播的功能需求:和其它图片轮播大体一致,无非就是点击按钮向左、右翻页,点击下方提示位置小点切换到小点表示对的位置页(我是真的不知道那个小点叫什么名字,大家将就着听吧)上代码:基本代码:<...原创 2019-01-29 17:23:56 · 1934 阅读 · 0 评论 -
js数据分页
这个案例大概是半个月之前做的,由于当时做完以后觉得比较难以接受且不太好理解(代码也比较多一点),就先将它放下了,沉淀过后,我觉得是时候拿出来与大家分享了!整体思想框架:(我想把这些注释拿出来会更好一些) 提前剧透一下,个人认为数据分页的页码算法是最复杂的,同时和图片轮播一样,关于当前页的bug会比较多,毕竟到达所需页的执行方式有多种(点击翻页页、点击页数、点击跳转页、三者混合操作),所以就...原创 2019-01-28 23:20:16 · 1732 阅读 · 0 评论 -
表单验证(实时判断)
上次的正则版表单验证的主要用意是为了正则表达式的应用,而这次的表单验证提供的更加完善的用户体验(实时判断了用户的输入数据正确与否),它是上个版本的延伸。实现效果:相应代码:<!DOCTYPE html><html lang="en"><!-- 此表单虽然样式比较简单,但功能实现还是比较复杂的,不同于一般的一步性验证而是将分步验证和最终验证结合在一...原创 2019-01-27 23:02:44 · 2109 阅读 · 4 评论 -
表达验证(正则版)
利用正则表达式表达式,可以充分的实现表单验证的数据格式的正确性验证,且从入门来看,正则表达式比较好学,(往深说就不一定了),下面的案例,将告诉你如何利用正则来实现表单验证。实现效果:代码如下:<!DOCTYPE html><html><!-- 总体思想:利用最终的验证事件进行一次验证,也就是提交的时候验证各个文本框之间的数据格式是否正确,...原创 2019-01-26 09:31:53 · 544 阅读 · 0 评论 -
js图片轮播(淡入淡出)
关于图片轮播,有太多的方法去实现,不同的样式,用的主要思想也不同,但不管怎么说,图片轮播离不开计时器。关于要注意的,要解释的,我都备注好了,说的可能不是很标准,但我尽量说的通俗,欢迎留言讨论,只要我看到的,都会回复的。<!-- 核心思想:利用层级关系 计时器和css3动画来实现这个功能完善的图片轮播案例 --><!-- 基本覆盖了轮播的所有功能 -->...原创 2019-01-21 08:47:06 · 1438 阅读 · 0 评论 -
js图片轮播(翻页切换)
前面已经介绍了两种常见的图片轮播样式,今天将介绍一种更为常见的图片轮播形式,和淘宝的功能样式类似,这三种轮播基本上涵盖了常见网站图片轮播的所有类型,难度的话,个人认为淡入淡出是比较难的,但只要用心,仔细的体会核心思想,一步步来,相信还是可以很好地掌握的!<!DOCTYPE html><html lang="en"><!-- 主要思想 结合无缝轮播,使得...原创 2019-01-22 22:06:30 · 3398 阅读 · 0 评论 -
正则表达式表达式及常用案例
正则表达式主要用来实现字符匹配,在表单验证中有着很强大,很巧妙的作用,在之后的博客中我会将正则表达式运用到表单验证中,那么,首先了解它的具体语法和常见案例用法吧!<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name=&quo原创 2019-01-23 19:57:23 · 309 阅读 · 0 评论