javascript技巧

微信小程序实现手势解锁的示例详解

2022-04-28
目录 一.项目展示 二.设置手势.手势解锁 三.手势重置 一.项目展示 这是一款简单实用的手势解锁工具 手势解锁是当下常用的解锁方式 本实例以工具的形式 可以嵌入到不同的项目之中 二.设置手势.手势解锁 wxlocker.prototype.storePass = function(psw,cb) {// touchend结束之后对密码和状态的处理 if (this.pswObj.step == 1) {//step==1表示还没有设置密码状态 if (this.checkPass(this.p

18个高频使用的JS工具方法总结

2022-04-28
目录 前言 1. 回到顶部 2. 删除数组指定项 3. 获取 url 某一个参数 4. 复制文本 5. 禁止复制文本 6. 复制文本带版权信息 7. 判断数据类型和数据值 8. ua 环境判断 9. 时间格式转换 10. 函数防抖 11. 全屏/退出全屏 12. 禁止打开控制台调试 13. 密码强度展示 14. 五星好评 15. 保留 n 位小数 16. 金额转大写 17. 常用正则判断 18. 解决运算精度丢失的问题 前言 将自己做前端6年以来在项目中使用很高频的工具方法整理了出来,分享一下,

微信小程序天气预报功能实现(支持自动定位,附源码)

2022-04-28
前言由于和风天气API的更新,之前写的那篇文章 可能会出现版本不兼容的 情况.所以 更新了 这个 使用新版API的 小程序. 效果图   天气API获取这里我用的是和风天气的API,打开官网注册或者登陆你的账号 进入控制台,选择应用管理,新建应用(应用版本 选择 免费开发版,key的类型 选择 Web API) 创建成功后就可以看到 待会要用到的 key了 微信小程序后台域名配置登陆小程序后台,分别点击开发和开发设置 点击修改,将我们要用到的 API的域名添加到request合法域名里面,htt

微信小程序图片上传功能的实现方法

2022-04-26
目录 前言 首先是静态布局和样式部分 下面是js的部分,我已详细备注--- 总结 前言 最近做了个小程序,涉及到了图片上传的功能,今天给大家详细介绍下如何实现小程序图片上传,话不多说先上代码 首先是静态布局和样式部分 .wxml代码部分 <view class='load-img'> <view class='load-box'> <view class='img-item' wx:for="{{fileList}}" wx:key="index

JS中浮点数精度问题的分析与解决方法

2022-04-26
目录 前言 问题的发现 浮点数运算后的精度问题 toFixed奇葩问题 为什么会产生 浮点数的存储 浮点数的运算 解决方法 解决toFixed 解决浮点数运算精度 附:JS浮点数精度问题的一些实用建议 总结 前言 最近在做项目的时候,涉及到商品价格的计算,经常会出现计算出现精度问题.刚开始草草了事,直接用toFixed就解决了问题,并没有好好的思考一下这个问题.后来慢慢的,问题越来越多,连toFixed也出现了(允悲),后来经过搜索网上的各种博客和论坛,整理总结了一下. 问题的发现 总结了一下,

webpack-cli在webpack打包中的作用小结

2022-04-26
目录 webpack & webpack-cli webpack Introduction webpack-cli 详解 Reference webpack & webpack-cli webpack Introduction webpack 是一个静态的模块化打包工具,为现代的JavaScript应用程序服务 打包 bundler:webpack可以帮助我们进行打包,所以它是一个打包工具 静态的static:将代码打包成最终的静态资源(部署到静态服务器) 模块化module:webpac

JQuery操作与遍历元素并设置其属性、样式和内容

2022-04-26
目录 一.操作属性 二.操作样式 三.操作元素内容 四.创建和添加元素 五.删除元素 六.遍历元素 一.操作属性 属性分类 固有属性 href.src..... 共有属性 id,class,name...... 自定义属性 abc= '1234' 操作属性的方法 区别 1.prop不能操作自定义属性 2.prop获取Boolean类型的属性是 true/false 获取属性值 attr(属性名称) 操作 checkbox 时, 获取指定的属性值,选中返回 checked,没有选中返回 undef

如何在TypeScript中处理日期字符串

2022-04-25
目录 前言: 一.模板字面量类型 二.类型谓词缩小范围 三.定义日期字符串 总结: 前言: 在我最近的一个项目中,我必须去处理多个自定义的日期字符串表示法,比如YYYY-MM-DD和YYYYMMDD.由于这些日期是字符串变量,TypeScript默认会推断成为string类型.虽然这在技术实现上没有错,但是在工作中使用这样的类型定义是很宽泛的,使得有效处理这些日期字符串变得很困难.例如,let dog = 'alfie'也被推断为一个string类型. 在这篇文章中,我会将我的解决方法呈现给你,

一文理解JavaScript装饰器模式

2022-04-25
装饰器模式想必大家并不陌生:它允许向一个现有的对象添加新的功能,同时又不改变其结构,属于结构型模式,它是作为现有的类的一个包装. 这种模式创建了一个装饰类,用来包装原有的类,并在保持类方法签名完整性的前提下,提供了额外的功能. 在 JS 中,装饰器(Decorator)是ES7中的一个新语法,它可以对​​类.方法.属性​​进行​​修饰​​,从而进行一些相关功能定制.它的写法与Java的注解(Annotation)非常相似,但是功能还是有很大区别. 代码示例: 不使用装饰器: const log

JS利用window.print()实现网页打印功能

2022-04-25
目录 前言 一.print()方法 二.打印样式 1.使用打印样式表 2.使用媒介查询 3.内联样式使用media属性 4.在css中使用@import引入打印样式表 三.打印指定区域部分内容 1.方法一 2.方法二 3.方法三 四.强制插入分页 五.设置打印布局(横向.纵向.边距) 六.去除浏览器默认页眉页脚 七.打印方法封装 前言 print作为浏览已经比较成熟的技术可以经常被用来打印页面的部分内容,我们可以在MDN上查看到相关的简单介绍. 一.print()方法 print() 方法用于打

如何利用moment处理时间戳并计算时间的差值

2022-04-25
项目使用nodejs写服务端,有个功能就是统计代理服务器流量,然后把统计的数据通过echarts渲染到页面. 当然统计数据这里用到了 定时器,在使用的是 var schedule = require( 'node-schedule'); 有兴趣的同学可以在npm上搜一搜关于js定时任务的事,其实都大同小异,差不多都是运用corn表达式. 以下是我的 定时从代理服务器获取数据 并存库. schedule.scheduleJob('*/15 * * * * * ', function () { co

CommonJS与ES6 Module的使用区别分析

2022-04-24
目录 前言 1. CommonJS 1.1 导出 1.2 导入 2. ES6 Module 2.1 导出 2.2 导入 3. CommonJS 与 ES6 Module 的区别 3.1 区别一 3.2 区别二 4. The end 前言 学了JS并且用过Node.js后,对模块化应该是有所了解和使用了,那么一定见过以下两种模块导入导出的方式 第一种: ES6 Module // B.js function show() { console.log('show方法被执行') } export de

微信小程序实战之打卡时钟的绘制

2022-04-24
目录 一.项目展示 二.首页 三.设置 一.项目展示 这是一款简单实用的小时钟工具 分为工作和休息两种状态 用户可以设置相应的时间 所有的时钟记录都会被保存下来 二.首页 首页由计时器.任务输入框和两个计时按钮组成 <view class="container timer {{isRuning ? 'timer--runing': ''}}"> <view class="timer_main"> <view class="ti

JavaScript数组操作之旋转二维数组

2022-04-24
目录 一.题目描述​ 二.思路与实现 三.总结 一.题目描述​ 给定一个 n × n 的二维矩阵 matrix 表示一个图像.请你将图像顺时针旋转 90 度. 你必须在 原地 旋转图像,这意味着你需要直接修改输入的二维矩阵.请不要 使用另一个矩阵来旋转图像. 示例 1: 输入:matrix = [[1,2,3],[4,5,6],[7,8,9]] 输出:[[7,4,1],[8,5,2],[9,6,3]] 示例 2: 输入:matrix = [[5,1,9,11],[2,4,8,10],[13,3,

JS实现读取Excel文件内容并生成二维码

2022-04-24
目录 需求 实现方案 puppeteer node-canvas 浏览器 问题分解 具体实现 启动一个本地服务器 创建html,引入资源库 解析xls文件 写入中间logo 写入底部文字 canvas转化为图片,并下载到本地 递归调用 最终效果 需求 一次普通的技术需求会议 ​ 项目经理首先发言 我们技术这边需要将xls表格中的几千条数据变成二维码,并且中间镶嵌logo,图片底部放置编号,由于xls表格数据私密,不能通过第三方完成 ​ 平常这个事情都是后端处理的,前端就是来摸鱼的,但是这次一反常

three.js响应式设计实例详解

2022-04-24
目录 1-canvas 的响应式布局 示例:三维插图 2-自适应设备分辨率 总结 源码地址:github.com/buglas/thre… 1-canvas 的响应式布局 canvas 画布的尺寸有两种: 像素尺寸,即canvas画布在高度和宽度上有多少个像素,默认是300*150 css 尺寸,即css 里的width和height 在web前端,dom元素的响应式布局一般是通过css 实现的. 而canvas 则并非如此,canvas 的响应式布局需要考虑其像素尺寸. 接下来,咱们就通过让c

基于JS实现Flappy Bird游戏的示例代码

2022-04-24
前言 Flappy Bird 是一款无尽的游戏,玩家可以控制一只鸟.玩家必须保护小鸟免于与管道等障碍物相撞.每次小鸟通过管道时,分数都会增加一.当小鸟与管道碰撞或因重力而坠落时,游戏结束.以下部分描述了构建此游戏必须采取的步骤. 游戏可以通过这个链接进入 完整源码地址 实现代码 HTML 部分:在此部分中,创建和加载游戏的元素.选择背景.鸟类.障碍和得分元素的图像.接下来,我们创建并链接 style.css 和 index.js 文件. <!DOCTYPE html> <html>

HTML+CSS+JS实现抓娃娃机游戏

2022-04-24
目录 前言 效果 地址 布局 总结 前言 前段时间去商场吃饭的时候看到一个有趣的娃娃机,一个密封的机器里底部放着一些被捆绑好的龙虾,可以买币去抓龙虾,抓到以后可以初加工费找附近的商家给做成龙虾大餐,感觉很有意思,把抓抓玩出了一个新的高度~ 主要是抓到以后还可以出手工费进行烹饪,很吸引人,周边围观的人也很多,观察了一会发现.爪子的抓力不够,龙虾在水里还能移动,而且感觉每一个个头都不小,那小爪感觉根本抓不起来~~ 到家后孩子就说爸爸你可不可以做一个娃娃机呢? 身为一个程序员,这点要求我感觉还是难不倒

JavaScript组合模式Composite&nbsp;Pattern

2022-04-24
组合模式(Composite Pattern),又叫部分整体模式,是用于把一组相似的对象当作一个单一的对象. 组合模式依据树形结构来组合对象,用来表示部分以及整体层次.这种类型的设计模式属于结构型模式,它创建了对象组的树形结构. 树对象和叶对象接口统一,树对象增加一个缓存数组,存储叶对象.执行树对象方法时,将请求传递给其下叶对象执行. // 树对象 - 文件目录 class CFolder { constructor(name) { this.name = name; this.files =

分享JavaScript的&nbsp;3&nbsp;种工厂模式的用法

2022-04-24
目录 一.简单工厂模式 二.工厂方法模式 抽象工厂模式 三.小结 前言; 工厂模式(Factory Pattern)是设计模式中最常用的设计模式之一. 这种类型的设计模式属于创建型模式,它提供了一种创建对象的最佳方式. 在工厂模式中,我们在创建对象时不会对客户端暴露创建逻辑,并且是通过使用一个共同的接口来指向新创建的对象. 工厂模式分为: 简单工厂模式 工厂方法模式 抽象工厂模式 一.简单工厂模式 简单工厂模式,也可以叫静态工厂模式,用一个工厂对象创建同一类对象类的实例. 比如: // 0.0.