JS
关注
分享
扫一扫
Leisure_Time
世上无难事， 只要肯努力！
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
记录Object.defineProperty使用以及Proxy的使用
【代码】记录Object.defineProperty使用以及Proxy的使用。原创 2024-06-05 10:36:24 · 275 阅读 · 0 评论 -
vue3 setup标签使用总结
引入element-plus引入vuex 使用props定义emit事件使用watch监听propscomputed 计算函数refs 使用vue-router使用原创 2024-05-07 11:40:10 · 489 阅读 · 1 评论 -
原生js实现扫雷
最近对扫雷比较感兴趣 就打算模仿者写一下算法全程都是自己想到的 不一定是标准的 但是可以用效果图如下：实现过程以及原理：1 生成网格信息实现思路：1.1：生成网格其中 则是最大格子数量，则是最大生成雷的数量，通过生成出来的数据可以包含以下信息：是否被扫开是否属于雷偏移量,y当前雷的坐标宽度。然后进行数据保存 我是通过对象的形式进行保存的 可以优化一些读取速度 具体形式如下：实现代码如下：1.2 第一次开图我目前是 的思路所以实现思路如下：其中 获取到的坐标点 通过 的方式 获原创 2023-10-24 17:34:22 · 192 阅读 · 0 评论 -
解决 uni-app app使用 onBackPress 监听返回后关闭popup 以及使用 uni-simple-router 有冲突问题
解决问题：**app弹出popup框弹**出后 用户使用**全面屏手势/虚拟按键返回** 关闭弹窗**阻止**页面跳转 可以跨越层级进行关闭弹窗优点：监听页面返回 如果有弹窗则先关闭弹窗阻止页面返回 可跨越层级进行监听 只需要定义在路由页面即可缺点：1.监听页面必须是路由页面（目前试下来是这样 封装的组件是无法使用 onBackPress 来监听的）；2.如果当前路由没办法进行返回了 则监听失效 将会进入 再按一次退出应用如不更改会导致 第一次监听使用成功 第二次无法返回问题原创 2022-11-28 17:59:03 · 2296 阅读 · 1 评论 -
jqGrid冻结列错行问题，将冻结表格（悬浮表格）与 正常表格进行高度同步
老项目用到了 jqGrid表格 当中如果使用了冻结表格后 会出现高度不一致的情况解决办法是通过表格渲染完成后 手动进行同步高度 代码改动最小也最方便解决后效果：在 中调用当前方法 在中调用...原创 2022-07-04 13:12:45 · 968 阅读 · 0 评论 -
uniapp 中使用 router后 监听再按一次退出应用
使用了 后只需要监听路由堆栈就可以实现监听退出应用一个简易的再按一次退出应用就可以实现了相关链接：https://hhyang.cn/v2/start/cross/navLock.html原创 2022-06-24 16:36:18 · 1815 阅读 · 1 评论 -
uniapp调试ESC指令热敏打印机 打印图片 以及 打印途中报10007特性不支持解决方案
图片需要通过 canvas进行处理 预先在canvas上绘制然后读取图片打印途中报 10007 特性不支持 解决方案 可以看文章最后的描述设置完图片后 我们就可以开始连接蓝牙打印机了思路就是1.先扫描蓝牙 选中具体的 deviceId后 进行连接蓝牙2.连接蓝牙后 进行连接服务3.服务连接后 进行获取特性分为三步 三步完事后 基本上就连上蓝牙了连完蓝牙 画完图片之后呢 我们就可以获取到具体的点位信息了打印获取完图片后 调用打印 打印代码如下：遇到部分错误解决方法如果设备特性 write原创 2022-06-17 14:31:09 · 3052 阅读 · 8 评论 -
ES6飞机大战篇-github托管游戏
研究了一下github 发现居然可以托管网页， 我这个页面也没啥东西 所以就设置了一下 代理了一下 这样就可以直接在线玩了。如果出现报错 可以等待所有资源加载完毕 毕竟是免费的托管 避免不了的请求慢。。。。https://sdsgk.github.io/plane-ES6/index.html：游戏试玩地址...原创 2022-02-22 17:11:34 · 2106 阅读 · 0 评论 -
ES6飞机大战篇-增加补给效果
本次更新增加了补给效果 目前只有两种效果增加攻击力 20%增加无敌时间 50%数据定义如下/** * describe：效果描述 * effTime：持续时间 */const effData = [ { describe: "增加 25% 攻击力，持续一分钟", describeEnd: "攻击力增幅时间结束", efftTime: 60000, nowEfftTime: 0, range: 0.25, keyName: 'hurt'原创 2022-02-18 15:27:08 · 592 阅读 · 0 评论 -
ES6飞机大战篇-增加游戏提示
这次更新添加了提示，动画效果采用的是animation来实现的 先添加一个简易的动画效果。那么提示也很简单class Notice { constructor() { // 队列 this.noticeQueue = new Queue() // 提示dom this.noticeDom = noticeDom // 最大index this.maxIndex = 1 // 提示元素 this.noticeDom = noticeDo原创 2022-01-24 15:02:59 · 2639 阅读 · 0 评论 -
ES6飞机大战篇-游戏介绍（优先看）
首先进行演示：当中设计到了 升级、攻击力、技能、暂停、敌机预设移动等等1.升级 我才用的是比较传统的方式 通过比率进行获取经验 格式如下 当前的等级 除去 比率 乘 敌机原本的血量 除以 比率 这么做可以让他持续升级 敌机也会随着等级提高血量变高。2.攻击力 攻击力升级时会进行提升 那么同样的 在不同的等级 将会发射多排子弹3.技能 技能我目前想到了三个k：代表着体积缩小移动速度加快，相对应的攻击力将会变小l：跟踪子弹 开启跟踪子弹 持续3秒 将会有10秒冷却i：火力全开 将射速提高到 32原创 2022-01-21 14:50:00 · 2540 阅读 · 1 评论 -
ES6飞机大战篇-切换渲染方式
众所周知 如果使用canvas进行绘图的话 那么gpu将会介入 那可是一件大好事啊所以 进行添加渲染方式切换代码如下： // 初始化画布function initCanvas() { clearCanvas(); playerImage.onload = () => { // 绘制玩家贴图 ctx.drawImage( playerImage, playerInfo.offsetLeft, playerInfo.offsetTop,原创 2022-01-21 14:24:00 · 201 阅读 · 0 评论 -
ES6飞机大战篇-添加子弹追踪功能
既然是飞机大战 那必定少不了子弹追踪那么添加子弹追踪功能的实现如下：// 原文链接：https://blog.youkuaiyun.com/erweimac/article/details/82256087// https://blog.youkuaiyun.com/weixin_30756499/article/details/97551805// https://blog.youkuaiyun.com/looffer/article/details/8846159// https://github.com/processing原创 2022-01-21 14:17:34 · 1014 阅读 · 0 评论 -
ES6飞机大战篇-敌机自动移动发射子弹
想要游戏变得有点难度的话 就得让敌机自己动起来（移动轨迹提前设置好）那么就得单独的来进行控制敌机上下左右发射首先制作数据：/** * health：生命值 * width：宽度 * height：高度 * image：图片 * enemyMoveFunc：function 返回自动移动的数据 * timer：ms 执行时间间隔时间 * moveDirection：移动方向、按下的键位 可以设置多个 , 作为分隔符 将会同时按下 * distance：一次性移动多少距离 * isHide原创 2022-01-21 14:10:33 · 3748 阅读 · 0 评论 -
ES6飞机大战篇-数据存储的封装（object）
在飞机大战中 需要处理的数据是大量的 所以做到尽量的节省性能 所以自己封装了一个数据的仓库众所周知 js的 对象就是一个哈希表 那么哈希表来进行存储的话 那么将会性能提高（至少在存储删除方面特别快）class Store { constructor(data) { this.Store = data || {}; } // 通过id获取单个数据 getId(id) { return this.Store[id]; } // 检测是否存在 hasOwnPrope原创 2022-01-21 13:57:26 · 293 阅读 · 0 评论 -
ES6飞机大战篇-封装全局定时器
最近在编写飞机大战，开发到一半想到 是否可以选择暂停游戏 常见的清理就是用 clearTimerout 或者 clearInterval 那么 如果数量多了 就会出现一会儿有些没用清理有些没用情理的问题 为了避免出现这些问题出现 我尝试分装了一下定时器 代码如下：class Interval { constructor(delayTimer) { this.intervalTimer = null; this.intervalFuncMap = {}; this.interva原创 2022-01-21 13:43:53 · 2463 阅读 · 0 评论 -
JavaScript按住鼠标左键选中元素， 实现框选（Rubberband）效果
效果图：代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>选择</title> <style type="text/css"> body, html, h1, h2, h3, ...原创 2020-02-26 21:06:41 · 3734 阅读 · 0 评论 -
解决React 中css-loader中的 options has an unknown property 'localIdentName'. These properties are valid
解决React中css-loader中的options has an unknown property 'localIdentName'. These properties are valid报错问题解决代码如下：const path = require('path') //引入path模块const HtmlWebpackPlugin = require('html-webpac...原创 2020-02-17 18:54:06 · 8502 阅读 · 3 评论 -
解决webpack打包报错 No module factory available for dependency type: CssDependency
问题描述：在打包过程出现没有可用于依赖类型的模块CssDependency在vue.config.js中添加module.exports = { css: { extract: false }};就可以解决问题，我也查找到了相对应的文档， 发现有些还是不能理解的， 也不清楚怎么会发生这种， 之前好好的， 突然就不可以打包了原文如下：css...原创 2020-02-13 13:31:39 · 17960 阅读 · 7 评论 -
使用webpack4x来进行打包项目
由于webpack4x以后的版本将webpack这个打包命令分开成为了webpack-cli这个模块， 没有安装的情况会报One CLI for webpack must be installed. These are recommended choices会出现这种情况， 那么如果按照给的提升输入y / yes， 则会自动安装webpack-cli， 但是安装后没有成功， 还是找不...原创 2020-02-09 13:57:12 · 164 阅读 · 0 评论 -
JavaScript实现判断是否是质数
质数：只能被1或者自身整除<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>判断是否为质数</title> </head> <body> <script type="text/javascript"&g...原创 2020-02-04 12:33:33 · 408 阅读 · 0 评论 -
JavaScript实现哈希表(链地址法)HashTable
使用js实现哈希表， 代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>哈希表， 链地址法</title> </head> <body> <script type="text/javascrip...原创 2020-02-03 19:32:02 · 272 阅读 · 0 评论 -
Vue项目上线服务器遇到的问题， 以及解决方法， 后台使用的是node， 附带node安装方法
第一个问题就是端口没打开在服务器管理的安全规则里面添加端口， tcp协议， 这样就能访问到网页了，添加之后， 记得重启服务器之后就可以将vue项目 使用 npm run build 来进行打包了， 放到相对应的位置， 如果访问， 则会自动查找index文件来打开第二个问题出现在后台方面， 首先必须安装node这个是必须的， 这个就有个坑， 如果直接使用sudo yu...原创 2020-01-30 19:18:23 · 1129 阅读 · 1 评论 -
JavaScript关于函数中的this一些常见的问题
脑子也有转不过来的时候， 这些this可能会出错<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>this</title> </head> <body> <div class="box" style="w...原创 2020-01-29 20:20:18 · 180 阅读 · 0 评论 -
JavaScript原生实现轮播图的滑动切换
实现了基本的效果， 做了个简易的效果， 可以触摸切换代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { padding: 0...原创 2020-01-27 14:41:25 · 345 阅读 · 0 评论 -
JavaScript数组去重的三种方法
介绍常用的三种方法代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>去重的方法</title> </head> <body> <script type="text/javascript">...原创 2020-01-25 19:10:10 · 173 阅读 · 0 评论 -
JavaScript实现简单的数字验证码
主要使用Math的随机数， 附加去重代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>数字验证码</title> </head> <body> <input type="text" name="...原创 2020-01-22 21:31:06 · 645 阅读 · 0 评论 -
css3实现超好看的旋转动画
核心代码border-radius， 以及animation:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>转啊转</title> <style type="text/css"> html,body,div,a,p,...原创 2020-01-17 21:38:36 · 624 阅读 · 0 评论 -
JavaScript实现双向链表es6
实现双向链表， 代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>双向链表</title> </head> <body> <script type="text/javascript">...原创 2020-01-13 20:17:44 · 334 阅读 · 0 评论 -
JavaScript实现拖动图片到指定位置验证码
代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { padding: 0; margin: 0; list-sty...原创 2020-01-11 19:55:27 · 1849 阅读 · 0 评论 -
使用Hbuilder打包vue项目app
vue项目， HBuilder / HBuilderX有的情况下第一步， 使用HBuilder创建一个app项目， 我使用的是HBuilderX， 步骤如下：选择左上角， 文件， -> 新建 -> 项目 会出先这样的画面：那么我们选择 5+App那个选项，这样我们就有一个基本的app模板了然后我们在打包我们的vue项目， 使用npm run builder...原创 2020-01-10 20:28:49 · 650 阅读 · 0 评论 -
JavaScript栈结构的进制转换10转2
栈结构的应用案例，将10进制转为2进制， 代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>转换进制</title> </head> <body> <script type="text/java...原创 2020-01-09 16:31:46 · 154 阅读 · 0 评论 -
JavaScript使用Math.atan2来实现眼睛跟随鼠标移动
利用Math.atan2来获取函数返回x在正x轴和射线之间的平面角度（以弧度为单位）代码如下:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Math.atan2,getBoundingCLientRect</title> <...原创 2020-01-06 19:47:33 · 516 阅读 · 0 评论 -
JavaScript的节流操作
实现代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>节流</title> </head> <body> <button type="button">节流按钮</button>...原创 2020-01-05 11:04:05 · 234 阅读 · 0 评论 -
JavaScript的防抖
利用定时器来实现防抖， 这样可以避免重复提交， 或者重复请求代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>防抖</title> </head> <body> <button>提交...原创 2020-01-04 12:06:17 · 215 阅读 · 0 评论 -
JavaScript实现点击文字验证
代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>txt</title> <style type="text/css"> * { padding: 0; margin: 0; } d...原创 2020-01-02 15:27:57 · 2509 阅读 · 0 评论 -
JavaScript实现基本链表
使用js实现了链表， 代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>链表</title> </head> <body> <script type="text/javascript">...原创 2019-12-30 18:24:55 · 178 阅读 · 0 评论 -
JavaScript中队列的优先级
用JavaScript中实现队列的优先级， 代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>优先队列</title> </head> <body> <script type="text/jav...原创 2019-12-28 19:38:46 · 260 阅读 · 0 评论 -
JavaScript实现深度克隆
介绍：JavaScript中赋值主要有两种赋值形式，一种是基本类型，另一种是引用类型（地址）。一般对象或数组赋值的时候，都是地址引用，所以在修改新对象的时候，其实修改了在内存区地址上的值。为了达到引用类型的效果，所以有 深度克隆的概念。实现方式一：将每一个值取出来变成引用类型， 然后赋值给对象或数组， 这样就会在内存空间中开辟一个新的空间从而实现克隆的效果代码如下：&...原创 2019-12-27 13:01:44 · 188 阅读 · 0 评论 -
JavaScript实现栈结构es6
实现基本的栈结构，代码如下:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>栈</title> </head> <body> <script type="text/javascript"> ...原创 2019-12-26 12:39:24 · 148 阅读 · 0 评论