![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JavaScript
塞上江南果
如果你知道自己去哪,全世界都会为你让路
展开
-
JavaScript实现简单的图片切换
JavaScript实现图片切换,主要用到setInterval()函数和clearInterval()函数,前者功能是开启动画,后者功能则为清除动画(可理解为使动画停止),为了使动画停止,则需要定义全局变量作为标志,标志返回setInterval()函数的id,id作为clearInterval()函数的引用,目的是为了告诉clearInterval()函数动画暂停的位置。下面是实现的代码:部分H原创 2016-09-29 22:57:12 · 787 阅读 · 0 评论 -
用HTML5audio组件实现一个音乐播放器
心血来潮就用h5的新标签写了个简单的音乐播放器,实现的过程还是很简单的,对于前端来说最难的部分应该是让音乐盒歌词同步了吧。下面简单的说一下实现的步骤吧!先看一下成品的图片吧:一. 首先去网站下一些lrc歌词文件,一定要和歌曲的版本对应,不然是不会同步的。二. 解析lrc文件这一步是很重要的,由于js只能通过事件来上传文件(点击input[type=file]按钮),所以我们不能...原创 2017-04-21 22:34:22 · 3845 阅读 · 1 评论 -
JavaScript分页插件
前一段时间课设时,写了个分页插件的半成品,最后并没有派上用场,然而今天无意间看到了,就改造了一下,算是比较完整的插件。 已上传至github:https://github.com/lwjcode/paging 因为之前在做一个OJ,需要敢不同的算法,数据结构等对题目分类,自然分页时也需要携带相对应类别的参数。所以就写了个除了可以指定当前页和最大页,还可以指定某种类型。使用方法:...原创 2017-06-19 22:32:29 · 349 阅读 · 0 评论 -
JavaScript中的闭包
前言:问题放在那,一直都是问题,因为害怕不敢去了解,不是把问题看得太神圣,就是太安于现状。其实当自己下定决心要弄个明白时,一切就不是那么可怕了。对于JavaScript中的闭包这个概念,之前一直在闪躲,可是当你直面问题时,说不好就弄明白了呢!下面就来说说闭包吧。一. 什么是闭包相信你在想要弄明白闭包的时候,一定知道了“JavaScript的作用域和作用域链”了,如果还没明白,可以先去看下这篇:htt原创 2017-02-26 16:30:30 · 375 阅读 · 0 评论 -
js的setAttribute的使用
最近在写一个剧院管理系统的前端页面,需要动态生存座位,给每个座位都要注明它的状态,查了一些资料,可以给每个座位绑定一个属性,在用的时候只要获得座位的id调用属性就行。就用了setAttribute(”class”,”value”)这个方法。这是w3school里的方法说明: 看到两个参数都是string类型,就想着自己要添加的是座位状态,就写了这么一行代码:img.setAttribute("原创 2016-10-24 19:08:21 · 1490 阅读 · 0 评论 -
支持POST的跨域请求CORS
关于跨域请求在之前已经总结了JSONP方法,Fetch方法,还有XDM方法,但是这些方法都只支持GET方法,不支持POST方法,所以今天就来简单的总结下,关于支持POST方法的跨域请求如何实现。一. CORS简介CORS是Cross-Origin Resource Sharing的缩写,翻译过来就是,跨源资源共享。CORS的实现原理就是使用自定义的HTTP头部让浏览器和服务器进行沟通,从而决定请求或原创 2017-07-17 21:12:44 · 3409 阅读 · 0 评论 -
JavaScript惰性载入函数
因为各大浏览器所使用的JS引擎不同,所以在实现某一个功能时都或多或少的存在差异,导致在写代码时要针对每一个功能给出兼容浏览器的不同实现方式,这样在运行代码时就会造成性能的损耗。所以就出现了惰性载入函数的概念。原理就是:当前浏览器第一次支持以该方法实现某功能,那么在这个页面运行期间会一直都支持该方法。一般在写兼容性较好的代码时,我们会使用多个if分支语句来判断当前浏览器支持哪种方法,这时如果每次调用函原创 2017-07-18 18:39:54 · 522 阅读 · 0 评论 -
JavaScript实现浏览器顶部的进度显示条
后来打开很多网页在导航栏顶部都有一个进度显示条,就在想如何显示进度呢?那样的JS要如何写?如何知道网页加载到哪了呢?就上网搜了下如何实现,发现实现的思路很巧妙,今天来简单的总结下。一. 原理原理特别简单,我想知道浏览器是如何解析并渲染网页的都知道,HTML文档的代码是按照出现的顺序,从上往下一条一条的执行的。所以我们就可以根据网页代码执行的顺序在合适的位置加上JS代码,去控制进度条的长度变化就可以了原创 2017-08-02 20:55:14 · 3062 阅读 · 2 评论 -
JavaScript预解析
JS是解释型语言,在运行前不需要编译,也就是边解释边执行,但是在执行之前有一个预处理的过程,以便在后续的执行过程中确定程序的上下文关系。一. 预解析的对象是什么?预解析是针对var声明的变量或函数,以及用function声明的函数,和函数定义时的形参,都会进行预先的声明并赋初值。(1)对于var: 在处理用var声明的变量或函数时,会赋初值为undefined,尽管在声明时已经赋初值,但预解析阶段原创 2017-08-04 13:59:57 · 472 阅读 · 0 评论 -
JavaScript的原型和原型链
前言:学习JavaScript已经有一段时间,之前也知道它可以和Java语言一样实现继承,但没有深入的去了解过,通过这段时间的深入学习,今天就来总结一下,在JavaScript中的原型和原型链,以及如何用它们来实现继承机制。一. 什么是原型 (1)隐式原型(__proto__) 在JS中一切皆对象,任意对象都有一个内置属性[[prototype]],在ES5之前没有标准的方法访问这个内置属性,但原创 2017-02-25 23:17:35 · 357 阅读 · 0 评论 -
Rgb颜色和十六进制颜色值的相互转换
前言:最近答了各大厂的笔试题,答得都很不好,还是基础太差了,尤其在正则表达式方面老是不会写,今天就做两个练习题巩固一下。一. 将rgb颜色值转换为十六进制值输出,转换前验证rgb的格式是否正确关于这个题主要就是考察正则表达式的运用了1 . 验证rgb的正则表达式:var reg = /^rgb\((\s*[1-2]?[0-9]?[0-9]{1}\,)(\s*[1-2]?[0-9]?[0-9]{1原创 2017-08-27 16:57:37 · 3806 阅读 · 0 评论 -
单页面应用路由的实现方式
好久不曾写博客了,九月以来一直忙着笔试面试,都已经两旬过去了,如今还是两手空空,再怎么受挫,再怎么不如意,该走的路一步都不能少,今天就来总结下面试时被问:到单页面应用的路由是如何实现的?如今前端框架层出不穷,手机端单页面应用越来越多的出现在人们的视野中,作为前端开发者,掌握一两中主流框架是很有必要的,了解ajax的都知道ajax异步刷新页面是不会存在历史记录中的,也就是我们不能通过浏览器的前进和后退原创 2017-09-20 22:27:14 · 2534 阅读 · 0 评论 -
js中的call和apply
今天来总结一下js中的call和apply的用法。call 和 apply 都是为了改变某个函数运行时的上下文而存在的,换句话说,就是为了改变函数体内部 this 的指向。二者的作用完全一样,只是接受参数的方式不太一样。一.call和apply的区别有一个函数定义如下:function foo(a, b){}; 我们可以通过foo.call(this, a, b)或foo.apply(this,原创 2017-02-15 23:56:52 · 438 阅读 · 0 评论 -
JavaScript中的delete运算符
一. delete概述先看下面的一些delete的操作://删除全局变量str = "nihao";console.log(delete str); //trueconsole.log(str); //报错//删除对象成员var obj = { name: 'lihua', age: 33};console.log(delete obj.name); //trueco原创 2017-04-15 22:35:47 · 607 阅读 · 0 评论 -
JavaScript中的eval函数
相信知道js的肯定都知道js有一个功能强大的函数,就是eval(),它可以来执行一个表达式或者一段语句,下面就来具体看一下这个函数是如何使用的。一. 参数该函数的参数是一个字符串,字符串可以是表达式、语句、或者一个函数,如下:(1)声明一个变量eval('var x = 1;');console.log(x); //1(2)执行一个表达式var a = eval('1+2');console原创 2017-04-15 17:15:47 · 585 阅读 · 0 评论 -
js窗口震动小程序
前言:窗口震动的应用是很常见的,比如最常用的聊天软件qq,就有一个窗口抖动,还有在填表单时的出错提醒,所以自己也写了个很简单的示例,以下是具体的代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html原创 2016-11-14 21:07:59 · 601 阅读 · 0 评论 -
JavaScript空中避难小游戏
前言:最近在看js中的事件,之前也一直有用到事件,用到最多的就是onclick单击事件,还有填写表单信息时的用到的onfocus聚焦时间,和onblur事件,最近看到了onmousemove鼠标移动事件,觉得很神奇,就突然很想写一个小游戏。游戏的功能也很简单,就是天上掉纸片,小人儿要不停的躲,一旦纸片和小人儿相撞,就会game over!代码如下:<!DOCTYPE html><html><hea原创 2016-11-30 23:09:24 · 1178 阅读 · 2 评论 -
邮箱地址的自动匹配
自动匹配技术:简单的来说就是“根据用户输入的信息来提示一些相似项供用户选择”。具有很广泛的应用,比如我们最常用的百度,当输入一些搜索内容后会自动匹配很多相关信息;再比如我们最常用的输入法,都是使用这种技术,当然这些都比较难了。下面这个例子是比较简单的我们常用邮箱的匹配。代码如下:1.css代码 #match_email { margin-left:48px;原创 2016-11-27 22:53:33 · 1190 阅读 · 2 评论 -
JS中的arguments
最近在看一些关于前端的练习题,遇到一个无从下手的,还是因为学识不精,懂的太少,但经过一番查找,最终还是解决了,这是牛客网上的一个真题,题目如下: 看到题目要求,传入参数个数不定,就有点犯怵,还没在js中见过有什么方法可以获取个数不定的参数,因此就涨姿势了。。。一. arguments的特性: (1)arguments是个类似数组但不是数组的对象,说他类似数组是因为其具备数组相同的访问性质及方式,原创 2017-02-04 17:07:53 · 365 阅读 · 0 评论 -
JS中的with关键字
之前在看书时也有看到过with关键字,可是书上说不推荐使用,就没有深入了解了,所以对它几乎没有啥印象,今天看书时又看到了,心里想着“存在即合理“,所以就深入的学习了一下。一. with语句的作用:with语句能够针对对象来创建程序块,设置代码在特定对象中的作用域。二. 语句的格式:with(expression) statement;三. 使用with可以简化代码: (1)优化前的代码:funct原创 2017-02-07 20:39:06 · 561 阅读 · 0 评论 -
用伸缩布局实现日历展示
前言:flex布局方式使网页的布局定位更加简单,大量的减少了css代码,使用起来非常方便,在之前的博客也有写过关于flex布局的内容,今天附上一个小例子,github展示地址:https://spiritliftedhigh.github.io/demo/canlendar.html 具体内容如下:<!DOCTYPE html><html><head> <title>日历</title原创 2017-02-13 13:57:32 · 1235 阅读 · 0 评论 -
JavaScript的作用域和作用域链
前言:在初学JavaScript时,觉得它就和其他语言没啥区别,尤其是作用域这块,想当然的以为“全局变量就是在整个程序的任何地方都可以访问,也就是写在函数外的变量,局部变量也就是写在函数内部或循环体内部,出了循环体和函数就不可访问”,但是在JavaScript中并不是这么简单,需要去深入的学习。一. 什么是作用域 任何程序语言都有作用域的概念,简单的说,作用域就是变量与函数的可访问范围。比如C/C原创 2017-02-25 00:38:08 · 447 阅读 · 0 评论 -
JavaScript中的基本类型和引用类型
学到一些新东西,总想记下来,不然总觉得会忘记。一. 基本类型所谓基本类型就是简单的数据段,比如: Undefined,Null,Number,Boolean,String都是JavaScript中的基本类型,它存储在栈中,可以直接进行访问。如下代码:var a = 20;var b = a;a = 30;console.log(a); //30console.log(b); //20说原创 2017-02-26 23:03:12 · 330 阅读 · 0 评论 -
说不完的JavaScript的作用域
昨天在作某厂的笔试题,答的一塌糊涂,感觉很熟悉,却又说不出正确答案,还是因为平时真正深刻理解的东西太少,关于js的作用域问题是个永远都说不完的话题,昨天就遇到了。题目大概如下:var user = { name: "jack", getname: function(){ return this.name; }};var obj = user.getname;原创 2017-03-26 18:38:52 · 328 阅读 · 0 评论 -
setTimeout到底是如何执行的
一. setTimeout会被放到阻塞队列中首先来看下这个题目,看会输出什么:for (var i = 0; i < 5; i++){ setTimeout(function(){ console.log(new Date(), i); }, 1000);}setTimeout(function(){ console.log(new Date(), i);原创 2017-03-21 13:29:28 · 763 阅读 · 0 评论 -
CSS的clip实现元素的逐渐显示和消失
前言:只想说一句,CSS的功能太强大了!!!一. clip属性的用法clip属性的值指定了元素的剪切区域,目前它的剪切区域只能是矩形的。语法:clip: rect(top right bottom left);单位:为像素为长度值,不允许使用百分比,可以使用负数,表示剪切区域的可以延伸到指定元素的长度之外;可以使用auto:表示剪切区域与相应边界一致;JavaScript语法:element原创 2017-03-12 11:21:14 · 6905 阅读 · 0 评论 -
跨域请求XDM
前言:今天又get了一个跨域请求的新方法,跨文档消息传送(cross-document messaging),简称为XMD,这是一个兼容性比较好的实现跨域请求的方法,截止目前算上这篇博客已经总结了三种跨域请求的方法,分别是jsonp,fetch(ES6的,老版浏览器不支持),xmd。对其他两种不了解的请看这两篇博客: http://blog.csdn.net/picking_up_stones/a原创 2017-07-16 18:35:50 · 977 阅读 · 0 评论