分类：JS

2020
10-08

JS实现网站楼层导航效果代码实例

JS实现网站楼层导航效果代码实例 壹❀引言对于楼层导航而言，还有个重要的功能就是，随着滚动条滚动，达到某层时得同步点亮楼层导航的小图片。由于我前面也说了不打算使用JQ，所以想着用JS去实现它，实现并不难，主要得弄清滚动满足怎样的条件才应该点亮对应楼层，我们先看看实现效果：贰❀实现思路第一点，因为是由滚动触发的楼层判断，所以肯定离不开onscroll事件。第二点，我们貌似要获取每个楼层顶端距离视窗顶部的距离，随着滚动条往下滚动，... 继续阅读 >
2020
10-08

JS 5种遍历对象的方式

几天前一个小伙伴问我Object.getOwnPropertyNames()是干什么用的平时还真没有使用到这个方法，一时不知如何回答从方法名称来分析，应该是返回的是对象自身属性名组成的数组那和Object.keys()方法不就一样了吗感觉事情并不这么简单，于是我仔细看了一下这几种遍历对象的方法的区别forinforin循环是最基础的遍历对象的方式，它还会得到对象原型链上的属性//创建一个对象并指定其原型，bar为原型上的属性constobj=Object.... 继续阅读 >
2020
10-08

详解JS预解析原理

预解析的的不同机制预解析也叫预声明，是提前解析声明的意思；预解析是针对变量和函数来说的；但是变量和function的的预解析是两套不同的机制；当浏览器加载我们的HTML页面的时候，首先会提供一个供JS代码执行的环境->全局作用域global（浏览器中的全局作用域，也叫顶级作用域是window）JS中的内存空间分为两种：栈内存、堆内存栈内存；提供JS代码执行的环境，存储基本数据类型的值；->全局作用域或者私有的作用域其实都是栈... 继续阅读 >
2020
10-08

深入了解JS之作用域和闭包

作用域和闭包ECMAScript5:JS的代码没有代码块；使用函数运行的机制进行创建闭包；闭包就是作用域的意思；ES5中，JS中只有函数才可以创建能操作的作用域；JavaScript中的内存也分为栈内存和堆内存。一般来说，栈内存中存放的是存储对象的地址，而堆内存中存放的是存储对象的具体内容。对于原始类型的值而言，其地址和具体内容都存在与栈内存中；而基于引用类型的值，其地址存在栈内存，其具体内容存在堆内存中。堆内存与栈内存是... 继续阅读 >
2020
10-08

深入了解JS之作用域和闭包

作用域和闭包ECMAScript5:JS的代码没有代码块；使用函数运行的机制进行创建闭包；闭包就是作用域的意思；ES5中，JS中只有函数才可以创建能操作的作用域；JavaScript中的内存也分为栈内存和堆内存。一般来说，栈内存中存放的是存储对象的地址，而堆内存中存放的是存储对象的具体内容。对于原始类型的值而言，其地址和具体内容都存在与栈内存中；而基于引用类型的值，其地址存在栈内存，其具体内容存在堆内存中。堆内存与栈内存是... 继续阅读 >
2020
10-08

JS数组及对象遍历方法代码汇总

文中的范例基于以下数组和对象。vararrTmp=["value1","value2","value3"];varobjTmp={aa:"value1",bb:"value2",cc:function(){console.log("value3")}}一、JS原生方法1.javascript遍历的常用的遍历方法是for循环和for-in，ES5的时候加上了forEach方法（IE9以下不支持）。/****js原生遍历****///for循环遍历数组for(vari=0;i<arrTmp.length;i++){console.log(i+":"+arrTmp[i])}//for-in遍历对象属性,i指代... 继续阅读 >
2020
10-08

原生JS实现天气预报

本文实例为大家分享了JS实现天气预报的具体代码，供大家参考，具体内容如下HTML代码<!doctypehtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>Document</title><linkrel="stylesheet"href="tianqi.css"><linkrel="s... 继续阅读 >
2020
10-08

原生JS实现无缝轮播图片

本文实例为大家分享了JS实现无缝轮播图的具体代码，供大家参考，具体内容如下运动插件functionanimove(obj,distance,speed,callback){//调用的变量目标距离速度回调函数clearInterval(obj.timer);obj.timer=setInterval(function(){letstep=(distance-obj.offsetLeft)/10;step=step>0?Math.ceil(step):Math.floor(step);if(obj.offsetLeft==distance){clearInterval(obj.timer);if(... 继续阅读 >
2020
10-08

js+css实现全屏侧边栏

js+css实现全屏侧边栏 本文实例为大家分享了js实现全屏侧边栏的具体代码，供大家参考，具体内容如下在浏览网站时我们经常会看到一个菜单按钮，点一下就会出现一栏侧边导航栏，直接上代码！HTML部分<divid="mySidenav"class="sidenav"><ahref="javascript:void(0)"class="closebtn"onclick="closeNav()">&times;</a><ahref="#">About</a><ahref="#">Services</a><ahref="#">Clients</a><ahref="#">Contact</a></div><h2>全屏幕侧边栏</h2... 继续阅读 >
2020
10-08

原生JS利用transform实现banner的无限滚动示例代码

原生JS利用transform实现banner的无限滚动示例代码 功能默认情况无限循环向右移动点击数字切换到对应图片点击左右切换可切换图片原理首先说下原理。在布局上所有的图片都是重叠的，即只要保证Y方向对齐即可，当前可见的图z-index层级最高。每隔3s中更换一张图片，使用setTimeout定时。使用gIndex记录当前可视区域的展示的是哪张图片下标，每次更换，计算下一张图片的下标。通过requestAnimationFrame实现一次图片切换的动画。这种方法也可以做到整个页面始终只有2个im... 继续阅读 >
2020
10-08

js实现mp3录音通过websocket实时传送+简易波形图效果

js实现mp3录音通过websocket实时传送+简易波形图效果 波形图：https://www.jb51.net/article/188545.htm废话：想不到我的第一篇博客是关于前端，作为一名后端的小菜，前端方面肯定还有很多不足之处，如果文章有任何问题欢迎指正。感谢大家。好了！废话不多说下面讲一下需求。需求：公司要求实现web端的录音并通过websocket实时上传至java后台，而且能通过vlc实时播放，简单一点讲就是我用网页在那一边讲话，一个大喇叭就能实时把我的话播出去，这样是不是通俗易懂呀，而且呢公司要求用... 继续阅读 >
2020
10-07

使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解

下面通过实例代码给大家介绍js扫码枪扫描条形码的实现方法，具体代码如下所示：varkeycode="";varlastTime=null,nextTime;varlastCode=null,nextCode;document.οnkeydοwn=function(e){if(window.event){//IEnextCode=e.keyCode}elseif(e.which){//Netscape/Firefox/OperanextCode=e.which}//+键，增加新数据行if(nextCode==107||nextCode==187){addNewGoodLine();}//-键，... 继续阅读 >
2020
10-07

js 获取扫码枪输入数据的方法

1、扫码枪相当于键盘输入设备，输入一连串数字后加一个enter键。但在实际开发中需要区分是扫描枪输入还是键盘用户输入，区别在于扫码枪输入很快。letcode='';letlastTime,nextTime;letlastCode,nextCode;window.document.onkeypress=(e)=>{if(window.event){//IEnextCode=e.keyCode;}elseif(e.which){//Netscape/Firefox/OperanextCode=e.which;}if(nextCode===1... 继续阅读 >
2020
10-06

JS原型对象操作实例分析

本文实例讲述了JS原型对象操作。分享给大家供大家参考，具体如下：万物皆对象，函数也同样是对象，是特殊的函数对象functionfn(){}leta=newfn();letb=newFunction()console.log(typeofa);//objectconsole.log(typeofb);//function打开浏览器，输入fn，会发现fn有一个prototype(原型)属性，这个属性是一个指针，指向原型对象，这个对象包括了特定类型所有共享的属性和方法。换句话说，prototype对象包含了函数所... 继续阅读 >
2020
10-06

JS中的继承操作实例总结

本文实例讲述了JS中的继承操作。分享给大家供大家参考，具体如下：1.原型链继承functionSuperType(){this.property=true;}SuperType.prototype.getSuperValue=function(){returnthis.property;}functionSubType(){ths.subproperty=false;}SubType.prototype=newSuperType();//实现继承SubType.prototype.getSubValue=function(){returnthis.subproperty;}varinstance=newSubType();console.lo... 继续阅读 >
2020
10-06

JS 数组和对象的深拷贝操作示例

本文实例讲述了JS数组和对象的深拷贝操作。分享给大家供大家参考，具体如下：一.数组的深拷贝letarr=[undefined,function(){console.log(123);},true,null,{name:"123",age:23}];//arr作为拷贝对象1.Array.from()Array.from()能将一个类数组转化成一个真正的数组，因此它返回的是一个新数组。letarr1=Array.from(arr);arr[0]=2;console.log(arr1);//[undefined,[Function],true,null,{name:'123'... 继续阅读 >