分类：js

2021
02-21

js 执行上下文和作用域的相关总结

前言如果你是或者你想成为一名合格的前端开发工作者，你必须知道JavaScript代码在执行过程，知道执行上下文、作用域、变量提升等相关概念，并且熟练应用到自己的代码中。本文参考了你不知道的JavaScript,和JavaScript高级程序设计，以及部分博客。正文    1.JavaScript代码的执行过程相关概念js代码的执行分为编译器的编译和js引擎与作用域执行两个阶段，其中编译器编译的阶段（预编译阶段）分为分... 继续阅读 >
2021
02-21

原生js 实现表单验证功能

表单验证是web前端最常见的功能之一，也属于前端开发的基本功。自己完成一个表单验证的开发，也有助于加深对字符串处理和正则表达式的理解。基本的表单验证包括如：字母验证、数字验证、字母和数字验证、汉字验证、密码验证、日期验证、手机验证、邮箱验证，密码验证等。现在就来完成这些验证代码的编写，先来看字母是怎么验证的。先编写需要的html代码，创建一个id为formContainer的表单元素，在里面加入需要验证英文字母的文本框... 继续阅读 >
2021
02-21

js面向对象封装级联下拉菜单列表的实现步骤

本实例开发的级联下拉菜单是根据已有json数据创建的DOM元素。点击文本框后，显示一级菜单。如果菜单中包含子菜单，菜单右侧会有指示箭头。点击菜单之后，会再显示下一级菜单，以此类推。当菜单下无子菜单时，选择菜单后会在文本框中显示。打开后的级联菜单效果如图所示：使用实例中封装好的插件，只需要有一个input元素，即可通过插件自动生成级联下拉菜单，html代码如下所示：<divstyle="margin-top:100px;text-align:center;"... 继续阅读 >
2021
02-21

JavaScript实现点击出现子菜单效果

JavaScript实现点击出现子菜单效果 本文实例为大家分享了JavaScript实现点击出现子菜单的具体代码，供大家参考，具体内容如下首先让我们看一下点击出现子菜单的效果如下图：点击黄色的按钮，出现子菜单如下图：让我们先看一下布局：<divclass="menu"><divclass="sign"id="sign"></div><divclass="lis"id="lis"><ul><li><ahref="">one</a></li><li><ahref="">two</a></li><li><ahref="">three</a></li><li><ahref="">four</a></li><li><ahref="">fi... 继续阅读 >
2021
02-21

深入理解javascript中的this

深入理解Js中的thisJavaScript作用域为静态作用域staticscope，但是在Js中的this却是一个例外，this的指向问题就类似于动态作用域，其并不关心函数和作用域是如何声明以及在何处声明的，只关心它们从何处调用，this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，当然实际上this的最终指向的是那个调用它的对象。作用域我们先来了解一下JavaScript的作用域，以便理解为什么说this更类似于动态作... 继续阅读 >
2021
02-21

js基于canvas实现时钟组件

canvas一直是前端开发中不可或缺的一种用来绘制图形的标签元素，比如压缩上传的图片、比如刮刮卡、比如制作海报、图表插件等，很多人在面试的过程中也会被问到有没有接触过canvas图形绘制。定义canvas元素用于图形的绘制，通过脚本(通常是JavaScript)来完成。canvas标签只是图形容器，您必须使用脚本来绘制图形。浏览器支持InternetExplorer9、Firefox、Opera、Chrome和Safari支持那么本篇文章就通过一个时钟组件来熟悉使用... 继续阅读 >
2021
02-21

js实现类选择器和name属性选择器的示例步骤

jQuery的出现，大大的提升了我们操作dom的效率，使得我们的开发更上一层楼，如jQuery的选择器就是一个很强大的功能，它包含了类选择器、id选择器、属性选择器、元素选择器、层级选择器、内容筛选选择器等等，很是方便快捷，并且这些选择器的兼容性都很好，可以说操作dom使用jq选择器一时爽，一直使用一直爽！只是，目前Vue、React、Angular三大框架的出现大大降低了JQuery的使用频率，而且JQuery在操作dom和绑定数据时确实存在一定... 继续阅读 >
2021
02-21

javascript中layim之查找好友查找群组

javascript中layim之查找好友查找群组 目前layui官方暂没提供layim查找好友页面的结构与样式，我个人好奇心极强，自己弄了一套，现在上传与大家分享。小生不是做前端的，有些方面不够全面，请各位大神指点一二！先呈上效果图压压惊Layim查找好友、查找群组、添加好友、加入群组：附上源码，积分下载一、绑定用户成员列表/**html代码*/<textareatitle="用户模版"id="LAY_Friend"style="display:none;">{{#layui.each(d.data,function(index,item){}}<divcla... 继续阅读 >
2021
02-21

JavaScript中layim之整合右键菜单的示例代码

JavaScript中layim之整合右键菜单的示例代码 一.效果演示1.1、好友右键菜单：1.2、分组右键菜单：1.3、群组右键菜单：二.实现教程接下来我们以好友右键菜单为例，实现步骤如下：2.1、绑定好友右击事件：/*绑定好友右击事件*/$('body').on('mousedown','.layim-list-friendliulli',function(e){//过滤非右击事件if(3!=e.which){return;}//不再派发事件e.stopPropagation();varothis=$(this);//获取好友编号，方便后期实现功能使用（需要修改layim.... 继续阅读 >
2021
02-21

javascript实现数字时钟效果

javascript实现数字时钟效果 本文实例为大家分享了javascript实现数字时钟效果的具体代码，供大家参考，具体内容如下效果图需求分析1、通过date获取时间2、通过间隔定时器setInterval动态获取时间3、间隔定时器setInterval间隔设置为1000毫秒（1秒）获取一次时间4、为了样式好看，我们这是用数字图片来代替数字的源代码HTML部分<divid="div"><imgsrc="img/0.png"/><imgsrc="img/0.png"/>时<imgsrc="img/0.png"/><imgsrc="img/0.png"/>分<imgs... 继续阅读 >
2021
02-21

js属性对象的hasOwnProperty方法的使用

Object的hasOwnProperty()方法返回一个布尔值，判断对象是否包含特定的自身（非继承）属性。判断自身属性是否存在varo=newObject();o.prop='exists';functionchangeO(){o.newprop=o.prop;deleteo.prop;}o.hasOwnProperty('prop');//truechangeO();o.hasOwnProperty('prop');//false判断自身属性与继承属性functionfoo(){this.name='foo'this.sayHi=function(){console.log('SayHi')}}foo.prototype... 继续阅读 >
2021
02-02

JavaScript实现点击自制菜单效果

JavaScript实现点击自制菜单效果 本文实例为大家分享了JavaScript实现点击自制菜单效果的具体代码，供大家参考，具体内容如下应用场景：当我们希望用户再点击右键的时候不希望弹出浏览器的默认菜单时，需要阻止浏览器默认行为，并执行我们想要的效果第一种方式，通过创建元素的方式<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title><style>... 继续阅读 >
2021
02-01

js实现简单商品筛选功能

js实现简单商品筛选功能 本文实例为大家分享了js实现商品筛选功能的具体代码，供大家参考，具体内容如下应用场景：商品筛选<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><styletype="text/css">*{margin:0;padding:0;list-style:none;text-decoration:none;}.choose{width:500px;height:auto;margin:auto;}.choosenav{height:50px;background-color:red;}.choosena... 继续阅读 >
2021
02-01

如何在现代JavaScript中编写异步任务

前言在本文中，我们将探讨过去异步执行的JavaScript的演变，以及它是怎样改变我们编写代码的方式的。我们将从最早的Web开发开始，一直到现代异步模式。作为编程语言，JavaScript有两个主要特征，这两个特征对于理解我们的代码如何工作非常重要。首先是它的同步特性，这意味着代码将逐行运行，其次是单线程，任何时候都仅执行一个命令。随着语言的发展，允许异步执行的新工件出现在场景中。开发人员在解决更复杂的算法和数据... 继续阅读 >
2021
02-01

Javascript生成器（Generator）的介绍与使用

什么是生成器？生成器是在函数内部运行的一些代码返回值后，它会自行暂停，并且——调用程序可以要求取消暂停并返回另一个值这种“返回”不是传统的从函数return。所以它被赋予了一个特殊的名称——yield。生成器语法因语言而异。Javascript的生成器语法类似于PHP，但是区别也很大，如果你希望它们的作用相同，那么最终你会感到非常困惑。在javascript中，如果想要使用生成器，则需要：定义特殊的生成器函数调用该... 继续阅读 >
2021
02-01

javascript实现拼图游戏

本文实例为大家分享了javascript实现拼图游戏的具体代码，供大家参考，具体内容如下<divid="container"><!--最外面的DIV，用来包含里面的结构--><divid="game"><!--游戏区,大DIV方块--><divid="d1"onclick="move(1)">1</div><!--小DIV，也就是8个小方块。当点击的时候执行move()函数，参数是显示的编号，这样我们就知道点击了哪个方块--><divid="d2"onclick="move(2)">2</div><divid="d3"onclick="move(3)">3... 继续阅读 >