背景 想查看下webpack版本,但执行webpack -v报错 解决方案 步骤一:运行命令npm list --depth=0 -g 检测下webpack.webpack-cli等版本兼容情况 例如以上提示,你安装了webpack-dev-server@4.1.0版本,但你的webpack版本不匹配(提示版本过低),需安装v4.37.0以上的版本,或者直接安装v5.0.0版本(例如直接安装v4.37.0版本:npm install -g webpack@4.37.0) 步骤二:再次运行命令np
javascript技巧
webpack -v报错解决方案
关于微信小程序实现云支付那些事儿
目录 一.前言 二.思路分析 三.云支付小案例 1.云函数 1-1.获取免鉴权参数云函数(wxPay) 1-2.支付回调云函数(payCallBack) 2.小程序端(js代码) 3.支付结果 4.代码目录结构 四.为什么这样写 五.结语 一.前言 稍微玩过微信小程序云开发的同学都基本知道微信小程序云开发目前已经支持云支付这一能力. 那么在云支付的能力支持之下,整个支付的流程是怎样的呢? 例如:用户发起支付前.支付中.支付后的逻辑处理应该是怎样的,该如何设计会比较保险,降低出错的概率. 那么本文
原生js自定义右键菜单
本文实例为大家分享了js自定义右键菜单的具体代码,供大家参考,具体内容如下 1.右键菜单触发的基本过程 实现自定义右键菜单我们首先需要了解以下内容: 浏览器默认的右键菜单触发的基本过程 1).单击右键,菜单出现 2).菜单出现,鼠标箭头一直在菜单左上角 3).再换个位置点击右键,原菜单消失,新菜单出现在指定位置 4).点击左键,中键,菜单消失 以上为大致实现过程,不全面,仅供参考 也许文字过于抽象,我们来看看代码吧: 2.HTML结构 <!--start右键菜单的结构--> <div i
js实现简单的放大镜效果
本文实例为大家分享了js实现简单放大镜效果的具体代码,供大家参考,具体内容如下 效果 效果,鼠标在原图片移动,黄色小盒子跟随鼠标移动,黄色小盒子盖住的部分,在显示区显示 效果图如下: 核心思路 1.鼠标放置在图片上,显示区出现,鼠标离开小盒子,显示区消失 2.鼠标在图片上移动时,小盒子跟随鼠标移动,且鼠标在黄色小盒子中间位置 3.小盒子给判断,让其不能超出图片区域 4.小盒在图片上移动多少,显示区域要移动同比例的距离 5.当显示区大小发生改变,或显示区内容增大变小,原来图片上的黄色小盒子随之改变
javascript实现花样轮播效果
本文实例为大家分享了javascript实现花样轮播效果的两种实现方法,供大家参考,具体内容如下 第一种:简单的带按钮的轮播 介绍:左右按钮控制轮播,点击左按钮切换上一张图片,点击右按钮切换下一张 html如下: <div class="box"> <div class="imgbox"> <a><img src="img/banner1.jpg" alt=""></a&g
JavaScript数组方法-系统性总结详解
目录 数组常用方法 数组元素增添和删除 操作数组头部 操作数组尾部 任意位置增删 数组拼接 数组转换成字符串 截取数组 数组排序方法 排序 顺序翻转 数组迭代方法 数组遍历查找 返回值为下标 返回值为内容 数组遍历处理 callback(value[,index[,array]]) callback(total,value[,index[,array]]) 数组其他方法 总结 首先总结的意义就是让杂乱无章变得更加井然有序,这样在使用的过程思路会更加清晰. 数组使用方法注意点: 变异方法和非变异方
一款好用的移动端滚动插件BetterScroll
目录 让滚动更流畅 BetterScroll 的滚动体验 惯性滚动 边缘回弹 如何应用于各种需求场景 普通滚动列表 滚动条 下拉刷新 上拉加载 选择器 轮播图 特殊场景 索引列表 开屏引导 自由滚动 小结 作者:滴滴webapp架构组-付楠 BetterScroll是一款重点解决移动端各种滚动场景需求的开源插件(GitHub地址),适用于滚动列表.选择器.轮播图.索引列表.开屏引导等应用场景. 为了满足这些场景,它不仅支持惯性滚动.边界回弹.滚动条淡入淡出等效果的灵活配置,让滚动更加流畅,同时还
JavaScript贪吃蛇的实现代码
本文实例为大家分享了JavaScript实现贪吃蛇的具体代码,供大家参考,具体内容如下 首先我们要确定贪吃蛇应有的功能 1.通过键盘的上下左右控制蛇的移动方向 2.边界判定,即蛇头超出边界则游戏结束 3.碰撞判定,即蛇头和食物块发生触碰 4.吃到食物积分加1 具体实现 一.html代码 <div class="container"> <!--小蛇移动的操场--> <div id="playground"> <!--小蛇--&
JavaScript实现网页下拉列表的省市联动
大家好,今天我和大家分享网页中下拉列表的省市联动.在我们平常填写一些信息时就会有省市联动,就是在第一个下拉列表中选择我们所在的省,后面一个下拉列表显示该省的所有城市. 既然是省市联动,我们就不能把数据直接写到网页上,我们应该通过第一个下拉列表的省动态生成该省的所有城市.我们可以先定义一个JSON对象表示省,在对象中定义一个数组存储一个省中的所有城市(这里的城市也是JSON对象),最后用数组存储所有的省.我们可以利用JavaScript在网页上面添加选项option.联动这块我们可以为第一个下拉列
js实现数据双向绑定（访问器监听）
本文实例为大家分享了js实现数据双向绑定的具体代码,供大家参考,具体内容如下 双向绑定: 双向绑定基于MVVM模型:model-view-viewModel model: 模型层,负责业务逻辑以及与数据库的交互 view:视图层,负责将数据模型与UI结合,展示到页面中 viewModel:视图模型层,作为model和view的通信桥梁 双向绑定的含义:当model数据发生变化的时候,会通知到view层,当用户修改了view层的数据的时候,会反映到模型层. 而双向数据绑定的好处在于:只关注于数据操
对于JavaScript继承你到底了解多少
目录 前言 构造函数,原型对象,实例对象三者之间的关系 原型链继承 借⽤构造函数继承 原型式继承 寄生式继承 组合继承(组合原型链继承和借用构造函数继承) 寄生组合式继承 总结 前言 关于继承,你到底了解多少,什么样的继承是最最优的,让我们一起来学习一些关于继承的那些知识点,带你了解他们的实现过程,以及他们的优缺点 构造函数,原型对象,实例对象三者之间的关系 先来了解他们的关系有助于对继承更好的理解 原型链继承 核⼼:将⽗类实例作为⼦类原型 代码实现过程: function Parent(nam
用js实现轮播图效果
今天来说一下利用js实现轮播图效果,供大家参考,具体内容如下 思路 1.首先我们要把需要用到的元素获取过来 <div class="all" id='box'> <div class="screen"> <!-- 无序列表 --> <ul> <li><img src="./wf1.jpg" width="500" height="200" /
一篇文章教你JS函数继承
目录 一. 前言: 二.原型链继承: 三.借用构造函数继承(对象伪装): 四.组合继承: 五.寄生组合继承: 六.class继承: 七.总结: 一. 前言: Hello,大家最近过得好吗,
js中函数的length是多少
目录 前言 为什么 到底是多少? 形参个数 默认参数 剩余参数 总结 前言 我今天给大家讲讲function的length,到底是怎么算的.希望大家能从中学到东西,并且可以巩固一下基础. 为什么 为什么我会想到这个知识点呢?因为昨晚,在一个群里,有一位同学在讨论一道字节跳动的面试题 123['toString'].length + 123 = ? 说实话这道题,我一开始也没答出来.其实我是知道,面试官想考Number原型上的toString方法,但是我卡在了toString函数的length是多
JS实现随机生成验证码
本文实例为大家分享了JS实现随机生成验证码的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> </style> </head> <body> <div> <h1>111111</h1><
原生js实现简单轮播图效果
本文实例为大家分享了js实现简单轮播图效果的具体代码,供大家参考,具体内容如下 效果如下: 分析: 分析效果: 分析实现: 1.通过 document.querySelector('.类名') 的形式获取到装轮播图的大盒子(.carousel).装轮播图左右按钮的标签的父元素(.chevron).获取左右按钮(.chevron-left ..chevron-right).获取放轮播图图片的父元素ul(.carousel-body)[注:这里获取ul而不是回去li,是因为移动轮播图的时候是整个ul
JavaScript数组常用方法实例讲解总结
目录 数组常用方法 concat() 方法 join() 方法 pop() 方法 push() 方法 reverse() 方法 shift() 方法 slice() 方法 sort() 方法 splice() 方法 toSource() 方法 toString() 方法 toLocaleString() 方法 unshift() 方法 valueOf() 方法 导读:在实际开发中,前端工程师除了写页面布局及样式还要对后端返回的数据进行处理,返回的数据大多数是json格式,一般都是返回一个对象或者
js实现图片切割功能
本文实例为大家分享了js实现图片切割的具体代码,供大家参考,具体内容如下 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .cube{ height: 0; width: 0; position: absolute; left: 0; top
微信小程序中正确使用地图的方法实例
目录 前言 1. 准备 2. 实战 2.1 配置小程序权限 2.2 封装工具函数 2.2.1 全局函数与变量 2.2.2 工具函数 2.3 跳转选址页面前的处理 2.4 跳转后的处理 2.4.1 页面初始化 2.4.2 搜索功能实现 2.4.3 下滑到底获取更多 2.4.4 提交数据 2.4.5 切换城市 总结 前言 今天是我的小兄弟(微信小程序方面)在工作中遇到的一个场景--选择某个位置周围的学校,感觉很有用,就让他给大家分享一下. 这次想分享一下关于微信小程序中选择全国中的一个学校和地址的方
TypeScript中枚举类型的理解与应用场景
目录 一.是什么 二.使用 数字枚举 字符串枚举 异构枚举 本质 三.应用场景 总结 一.是什么 枚举是一个被命名的整型常数的集合,用于声明一组命名的常数,当一个变量有几种可能的取值时,可以将它定义为枚举类型 通俗来说,枚举就是一个对象的所有可能取值的集合 在日常生活中也很常见,例如表示星期的SUNDAY.MONDAY.TUESDAY.WEDNESDAY.THURSDAY.FRIDAY.SATURDAY就可以看成是一个枚举 枚举的说明与结构和联合相似,其形式为: enum 枚举名{ 标识