javascript技巧

详解JavaScript中的Object.is()与"==="运算符总结

2020-06-16
三重相等运算符 === 严格检查2个值是否相同: 1 === 1; // => true 1 === '1'; // => false 1 === true; // => false 但是,ES2015规范引入了 Object.is(),其行为与严格的相等运算符几乎相同: Object.is(1, 1); // => true Object.is(1, '1'); // => false Object.is(1, true); // => false 主要问题是:什么时

JS实现躲避粒子小游戏

2020-06-16
本文实例为大家分享了JS实现躲避粒子小游戏的具体代码,供大家参考,具体内容如下 小项目的实战操作可以帮助我们更好的掌握javascript 躲避例子游戏规则:拖拽红球躲避绿球碰撞,拖拽过程不能触碰容器内壁,以赢得游戏持久度 页面效果: 实现过程 不积小流,无以成江海. 将页面效果的实现细分成小步实现:页面结构的构建,样式修饰,js中小绿球在容器顶部随机位置生成.小绿球非水平非垂直方向的运动.小绿球碰撞容器内壁后弹性运动.生成多个小绿球.拖拽红球.红球的边界判断.红球与绿球的碰撞检测."坚持n秒&

基于JS+HTML实现弹窗提示是否确认提交功能

2020-06-16
需求:当点击input按钮时候,弹出确认框,确认后提交到指定url,效果如下 分析:这里面要,引入三个库文件,如下是下载地址 layui样式文件:https://layer.layui.com/ layer弹窗组件:https://www.layui.com/ jquery代码库:http://www.jq22.com/ 代码:下载后放入响应的项目目录,最后代码如下 <!DOCTYPE html> <html> <head> <meta charset="

js实现ajax的用户简单登入功能

2020-06-16
本文实例为大家分享了js实现ajax的用户简单登入的具体代码,供大家参考,具体内容如下 原生js实现ajax html页面 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ajax登录</title> </head> <body> <div> <div id=&q

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

2020-06-16
壹 ❀ 引言 对于楼层导航而言,还有个重要的功能就是,随着滚动条滚动,达到某层时得同步点亮楼层导航的小图片. 由于我前面也说了不打算使用JQ,所以想着用JS去实现它,实现并不难,主要得弄清滚动满足怎样的条件才应该点亮对应楼层,我们先看看实现效果: 贰 ❀ 实现思路 第一点,因为是由滚动触发的楼层判断,所以肯定离不开onscroll事件. 第二点,我们貌似要获取每个楼层顶端距离视窗顶部的距离,随着滚动条往下滚动,此距离会不断缩小,当接近到某个距离时我们判定此楼层入画,当然其它楼层都满足此判定. 而

微信小程序点击生成朋友圈分享图(遇到的坑)

2020-06-16
上个月boss交给我个微信小程序的活,告诉我只需要负责前端页面这块,问我多久做完,于是我不知天高地厚的说 一礼拜就能完工,哈哈哈,果然,现实总是那么无情的来打脸了...磨磨蹭蹭一共用了将近3个礼拜才算完事. 今天就来总结下遇到的各种坑好了~~~ 由于做的是仿照包你说的小程序,这里就借用包你说的截图好啦 (这个做出来是模拟器跟真机上都会显示生成的图片的,鬼知道是为啥..) 唔,不废话了,直接上代码好啦 A:wxml(一定要加上image标签,如果你没有加的话,那么即使图片生成了,在页面上也是不会显

为react组件库添加typescript类型提示的方法

2020-06-15
以我自己的组件react-better-countdown为例, 首先在package.json里面添加types: types/index.d.ts, , 然后文件目录上添加对应文件夹和文件, 最后是index.d.ts文件的编写,具体看代码: import * as React from 'react'; interface CountdownProps { count?: number; dayText?: string | React.ReactElement; hourText?: s

JavaScript装箱及拆箱boxing及unBoxing用法解析

2020-06-14
首先我们来看看这段代码 var s1 = "abc"; var s2 = s1.indexOf("a") s1 是个 string 啊,怎么会有 indexOf() 方法呢? 这里就涉及到了 JavaScript 中的装箱与拆箱的概念了 装箱:把基本数据类型转化为对应的引用数据类型的操作 在<javascript高级程序设计>中有这样一句话: 每当读取一个基本类型的时候,后台就会创建一个对应的基本包装类型对象,从而让我们能够调用一些方法来操作这些数据.

JavaScript中的全局属性与方法深入解析

2020-06-13
今天来补充JavaScript中的最后一部分内容,JavaScript中的全局属性和方法(函数). 1.全局属性 // 属性 // Infinity 代表正的无穷大的数值. // 在Javascript中,超出 1.7976931348623157E+103088 的数值即为Infinity,小于 -1.7976931348623157E+103088 的数值为无穷小. var num1 = 1.7976931348623157E+103088; var num2 = -1.7976931348

利用webpack理解CommonJS和ES Modules的差异区别

2020-06-13
前言 问: CommonJS 和 ES Modules 中模块引入的区别? CommonJS 输出的是一个值的拷贝:ES Modules 生成一个引用,等到真的需要用到时,再到模块里面去取值,模块里面的变量,绑定其所在的模块. 我相信很多人已经把这个答案背得滚瓜烂熟,好,那继续提问. 问:CommonJS 输出的值是浅拷贝还是深拷贝? 问:你能模拟实现 ES Modules 的引用生成吗? 对于以上两个问题,我也是感到一脸懵逼,好在有 webpack 的帮助,作为一个打包工具,它让 ES Mod

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

2020-06-13
文中的范例基于以下数组和对象. var arrTmp = ["value1","value2","value3"]; var objTmp = { aa:"value1", bb:"value2", cc:function(){ console.log("value3") } } 一.JS原生方法 1. javascript遍历的常用的遍历方法是for循环和for-in,ES5的时候加上

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

2020-06-13
功能 默认情况无限循环向右移动 点击数字切换到对应图片 点击左右切换可切换图片 原理 首先说下原理. 在布局上所有的图片都是重叠的,即只要保证Y方向对齐即可,当前可见的图z-index层级最高. 每隔3s中更换一张图片,使用setTimeout定时. 使用gIndex记录当前可视区域的展示的是哪张图片下标,每次更换,计算下一张图片的下标. 通过requestAnimationFrame实现一次图片切换的动画. 这种方法也可以做到整个页面始终只有2个img标签,而不必把所有的img节点全部创建出来

通过实例解析JavaScript for in及for of区别

2020-06-13
对数组的遍历大家最常用的就是for循环,ES5的话也可以使用forEach,ES5具有遍历数组功能的还有map.filter.some.every.reduce.reduceRight等,只不过他们的返回结果不一样.但是使用foreach遍历数组的话,使用break不能中断循环,使用return也不能返回到外层函数. 那么接下来我们一起看一下for in 和for of 的区别吧. for in 看一个简单的例子 //for in 应用于数组 Array.prototype.sayHello =

基于Web Audio API实现音频可视化效果

2020-06-11
网页音频接口最有趣的特性之一它就是可以获取频率.波形和其它来自声源的数据,这些数据可以被用作音频可视化.这篇文章将解释如何做到可视化,并提供了一些基础使用案例. 基本概念节 要从你的音频源获取数据,你需要一个 AnalyserNode节点,它可以用 AudioContext.createAnalyser() 方法创建,比如: var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); var analyser

微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)

2020-06-11
1.wxml代码: <view class="page"> <import src="../../components/catering-item/catering-item.wxml" /> <!-- 左侧滚动栏 --> <view class='under_line'></view> <view class="body"> <view style='float: l

学前端,css与javascript重难点浅析

2020-06-11
JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果.通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的. CSS(Cascading Style Sheet)层叠样式表单 表现(presentation)--设计网页的表现样式,即"如何显示有关内容" CSS是将样式信息与网页内容分离的一种标记语言,我们使用css为每个元素定义样式:它主要用于美化HTML页面. 语法为:sele

如何在微信小程序中使用骨架屏的步骤

2020-06-10
本文介绍了微信小程序中使用骨架屏,分享给大家,具体如下: 先上效果图 ​ 骨架屏主要起到占位作用,向用户说明该区域有内容,有一定的心理准备. 聊聊背景:刚上线一款小程序,随着上架的东西越来越多,微信小程序加载越来越慢,会出现一段时间的白屏(大概2-3s),这对用户体验上来讲特别不友好.所以在网上开始找这方面的资料,骨架屏主要分为两种方案,下面来说说这两种方案. 1.为每个需要使用骨架屏的页面定制一套静态页面.这种方法缺点很明显,需要为每个页面单独定制,布局如果修改则需要同时修改两个页面,增加了维

JavaScript Event Loop相关原理解析

2020-06-10
1.单线程模型 单线程模型指的是,JavaScript只能在一个线程上运行,也就是说只能同时指向一个任务,其他任务都必须在后面排队等待.注意:虽然JavaScript只在一个线程上运行,但并不代码JavaScript引擎只有一个线程.事实上,JavaScript引擎有多个线程,单个脚本只能在一个线程上运行(主线程),其他线程都是在后台配合. JavaScript为什么要采用单线程,而不是多线程? 不想让浏览器变得复杂(避免复杂性),因为多线程需要共享资源.且可能修改彼此运行的结果. 该模式会导致

JS定时器如何实现提交成功提示功能

2020-06-10
应用场景: 用户评论后,在合适位置弹出"评论成功",2秒钟后自动消失,提示用户评论成功. HTML: {#评论成功提示#} <div class="popup_con" style="display: none; margin-left: 300px"> <div class="popup" > <p style="color: red; font-size: 16px">

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

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