JavaScript - 教程之家

47浏览

0评论

JavaScript canvas实现俄罗斯方块游戏

俄罗斯方块是个很经典的小游戏，也尝试写了一下。不过我想用尽量简洁逻辑清晰的代码实现。不用过多的代码记录下落方块的模型，或者记录每一个下落方块的x,y。想了下面的思路，然...

2021-08-10

39浏览

0评论

关于vue3编写挂载DOM的插件问题

vue3 跟 vue2 相比，多了一个 app 的概念，vue3 项目的创建也变成了// main.jsimport { createApp } from 'vue'import App from './App.vue'import ElementPlus from 'element-...

2021-08-10

48浏览

0评论

vue实现旋转木马动画

本文实例为大家分享了vue实现旋转木马动画的具体代码，供大家参考，具体内容如下图片数量可为任意值都能正常处理 [1-无限个]：<!DOCTYPE html><html><head> <title></title>...

2021-08-10

50浏览

0评论

Element树形控件整合带图标的下拉菜单(tree+dropdown+input)

目录需求说明：实现步骤：本文主要讲述：自定义树形控件<el-tree>需求说明：Element UI 官网提供的树形控件包含基础的、可选择的、自定义节点内容的、带节点过滤的以及可拖拽节点的...

2021-08-10

53浏览

0评论

react为什么不推荐使用index作为key

1.旧的虚拟dom和新的虚拟dom对比，首先看他们的key是否相同
2.相同继续对比他们的内容，不同生成新的真实dom进行替换
3.如果内容和key都相同，复用旧的真实dom 不做改变
那么如果...

2021-08-10

283浏览

0评论

node.js做一个简单的爬虫案例教程

准备工作首先，你需要下载 nodejs，这个应该没啥问题吧原文要求下载 webstrom，我电脑上本来就有，但其实不用下载，完全在命令行里面操作就行创建工程准备工作做完了，下面就开...

2021-08-10

38浏览

0评论

TypeScrip中泛型的案例详解

泛型的定义// 需求一：泛型可以支持不特定的数据类型，要求，传入的参数和返回参数一致// 这种方式虽然能实现传入和返回的参数一致，但是失去类型参数检验/*function getData(va...

2021-08-10

59浏览

0评论

TypeScript定义接口(interface)案例教程

接口的作用：接口，英文：interface，其作用可以简单的理解为：为我们的代码提供一种约定。在Typescript中是这么描述的： TypeScript的核心原则之一是对值所具有的结构进行类型检查...

2021-08-10

43浏览

0评论

vue实现一个滚动条样式

起初是想修改浏览器滚动条样式来达到效果
但是查阅了资料浏览器滚动条不能修改宽度与位置
没办法只能自己写
首先是滚动条样式<div class="scrollBar" v-if="roleList.leng...

2021-08-10

39浏览

0评论

React中useEffect 与 useLayoutEffect的区别

目录前置知识
useEffect
commitBeforeMutationEffects
commitMutationEffects
commitLayoutEffects
后续阶段
useLayoutEffect
结论
前置知识
我们可以将 React 的工作流程...

2021-08-10

43浏览

0评论

JavaScript css3实现简单视频弹幕功能

本文尝试写了一个demo模拟了最简单的视频弹幕功能。思路：设置一个<div>和所播放的video的大小一致，把这个div标签蒙在video上面用于放置弹幕。在video的右边放一个<ul>列表用...

2021-08-10

104浏览

0评论

vue中实现全屏以及对退出全屏的监听

目录前言：实现步骤：完整源码：更多资料：前言： vue中实现默认进来页面，某个div全屏，并监听退出全屏的次数，当退出全屏次数达到5的时候跳转到别的页面。实现步骤：1、页面...

2021-08-10

34浏览

0评论

Vue3.0 自己实现放大镜效果案例讲解

需要实现的效果是: 固定放大两倍,鼠标进入到左侧图片区域的时候,遮罩层显示,离开时,遮罩层隐藏。 css中的cursorhttps://www.runoob.com/cssref/pr-class-cursor.html&...

2021-08-10

48浏览

0评论

js判断移动端横竖屏视口检测实现的几种方法

目录1、不同视口的获取方法
2、JavaScript检测横竖屏
3、CSS检测横竖屏
4、meta标签属性设置
5、meta标签属性设置设置刘海屏&底部小黑条
1、不同视口的获取方法
// 获取视...

2021-08-10

33浏览

0评论

最全的package.json解析

目录1. 概述
2. name字段
3. version字段
4. description字段
5. keywords字段
6. homepage字段
7. bugs字段
8. license字段
9. author字段 contributors字段
10. files字...

2021-08-10

69浏览

0评论

vue实现点击翻转效果

用vue简单实现一个点击翻转的效果，供大家参考，具体内容如下1、2、3、//html代码测试 demo命名随便复制来的<div class="Demo"> <div class="Before" :class="isTop...

2021-08-10

47浏览

0评论

关于VUE的编译作用域及slot作用域插槽问题

什么是插槽？插槽的指令为v-slot，它目前取代了slot和slot-scope，插槽内容，vue实例一套内容分发的api，将slot元素作为承载分发内容的出口。插槽分为单个插槽，具名插槽，还有作用域插槽...

2021-08-10

72浏览

0评论

小程序通过小程序云实现微信支付功能实例

目录一、开通微信支付 1.1 关联商户号1.2 添加商户号1.3 管理员授权二、云函数开发2.1 新建云函数2.2 云函数代码2.3 云函数上传并部署三、小程序调用3.1 统一下单3.2 支付...

2021-08-10

40浏览

0评论

webpack文件打包错误异常

在进行webpack打包前我们要确保已完成的工作：1）安装webpack：推荐全局命令 npm install -g webpack 查看webpack版本 webpack -v2）此时对文件进行打包可能出现错误，提示脚手架文件...

2021-08-10

46浏览

0评论

React+TypeScript进行项目构建案例讲解

    react项目构建可以很简单，但是如果是结合typescript，其实也不是很麻烦，官网也有很明确的说明。有两种办法：    1、直接构建带有typescript的react项目，...

2021-08-10

59浏览

0评论

微信小程序实现拼图游戏

本文实例为大家分享了微信小程序实现拼图游戏的具体代码，供大家参考，具体内容如下页面展示项目链接微信小程序实现拼图游戏项目设计首页面wxml<view class="...

2021-08-10

91浏览

0评论

jQuery实现发送验证码控制按钮禁用功能

需求效果：点击发送验证码之后，按钮禁用，5秒之后取消禁用。
效果图如下：点击发送之后禁用按钮5秒之后取消禁用，重新发送代码如下：<!DOCTYPE html><html lang="en"><head> <meta ch...

2021-08-10

46浏览

0评论

小程序实现购物车完整版

小程序实现完整购物车[全选/反选计算金额/加减计算数量跟金额]，供大家参考，具体内容如下一、wxml页面代码模块<view wx:if="{{hasList}}"> <view class="order_list"> <vi...

2021-08-10

49浏览

0评论

JavaScript之事件循环案例讲解

js中的事件循环因为JavaScript是单线程的，同一事件只能执行一种方法，所以会将程序中的方法加入到执行栈中按照后进先出的顺序依次执行，当遇见异步任务时不会被阻塞，而是将任务放...

2021-08-10

52浏览

0评论

Vue3 style CSS 变量注入的实现

目录摘要
基础示例
动机
设计细节
编译细节
采用策略
实践
提示
绑定恰当的属性
注意 style 的更新
参考资料
摘要
在单文件组件样式中支持使用组件状态驱动的 CSS 变量（ CSS...

2021-08-10

49浏览

0评论

Vue如何优雅的清除定时器

目录前言
优化
衍生问题：beforeDestroy 没有触发？
前言
清除定时器，相信有相当一部分人是这么写的：
export default { data() { reurn { timer: null } }, moun...

2021-08-10

51浏览

0评论

Vue实现牌面翻转效果

本文实例为大家分享了Vue实现牌面翻转效果的具体代码，供大家参考，具体内容如下1.实现效果实现一个点击沿中心Y轴翻转的翻转效果。2.方法分前（front）、后(behind)两部分，behind的d...

2021-08-10

39浏览

0评论

JavaScript中let避免闭包造成问题

关于 let 避免闭包带来的问题利用面向对象思想完成买家信息删除功能，每一条信息包含：

姓名
电话
电话号码
省份

实现以下要求：
不能借用任何第三方库，需要使用原生代码...

2021-08-10

54浏览

0评论

vue动态加载本地图片的处理方法

发现问题今天遇到一个在vue文件中引入本地图片的问题，于是有了这篇文章。通常，我们的一个img标签在html中是这么写的：<img src="../images/demo.png">这种写法只能引用相对路径...

2021-08-10

59浏览

0评论

React事件绑定的方式详解

一、是什么在react应用中，事件名都是用小驼峰格式进行书写，例如onclick要改写成onClick最简单的事件绑定如下：class ShowAlert extends React.Component { showAlert() { c...

2021-08-10

44浏览

0评论

Vue3.0 手写放大镜效果

需要实现的效果是: 固定放大两倍,鼠标进入到左侧图片区域的时候,遮罩层显示,离开时,遮罩层隐藏。 css中的cursor 鼠标跟随效果如何实现: (子绝父相)绝对定位 + 修改top,le...

2021-08-10

74浏览

0评论

jQuery实现带展开动画的导航栏效果

设计和自定义一个带展开动画效果的导航栏，尝试写了一个demo，加上设计和调试差不多写了一天吧。
这里就来讲讲如何从设计->写布局->写样式->写JS代码完成一个完全自己设计的导...

2021-08-10

57浏览

0评论

详解React中组件之间通信的方式

一、是什么我们将组件间通信可以拆分为两个词：组件通信回顾Vue系列的文章，组件是vue中最强大的功能之一，同样组件化是React的核心思想相比vue，React的组件更加灵活和多...

2021-08-10

43浏览

0评论

Vue组件实现旋转木马动画

本文实例为大家分享了Vue组件实现旋转木马动画的具体代码，供大家参考，具体内容如下源码如下<template> <div id="wrapper"> <transition-group name="list" tag="ul" mode...

2021-08-10

63浏览

0评论

Vue封装通用table组件的完整步骤记录

目录前言
为什么需要封装table组件？
第一步：定义通用组件
第二步：父组件与子组件进行render通信
第三步：使用组件
总结
前言
随着业务的发展和功能的增多，我们发现不少页面都具备...

2021-08-10

49浏览

0评论

关于React状态管理的三个规则总结

目录前言No.1 一个关注点
No.2 提取复杂的状态逻辑
No.3 提取多个状态操作
总结
前言React 组件内部的状态是在渲染过程之间保持不变的封装数据。useState() 是 React hook，...

2021-08-10

41浏览

0评论

Vue + element实现动态显示后台数据到options的操作方法

需求：实现selector选择器中选项值options 数据的动态显示，而非写死的数据，我的角色ID数据如下：现在实现把这些数据请求显示option上实现如下：使用element-ui中selector 选择器：<el...

2021-08-10

33浏览

0评论

JavaScript平铺数组转树形结构的实现示例

目录后台丢来了1w条数据
递归方式非递归方式总结后台丢来了1w条数据
千算万算，还是没有逃过，后台真的就上万条数据一次丢给前端了。好吧，好在还不是10w条。如下，后台返回的是这...

2021-08-10

58浏览

0评论

JavaScript实现网页版五子棋游戏

本文实例为大家分享了JavaScript实现网页版五子棋游戏的具体代码，供大家参考，具体内容如下学习js的第三天，跟着老师完成的五子棋小游戏，记录学习成果欢迎大佬们一起分享经验，批评...

2021-08-10

37浏览

0评论

js中getBoundingClientRect( )方法案例详解

一.getBoundingClientRect() 解析getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。语法rectObject = object.getBoundingClientRect();值rectObject.top：...

2021-08-10

55浏览

0评论

JS实现微信"炸屎"大作战功能

大家好，我是秋风，近日，微信又发布了新功能（更新到微信8.0.6）。最火热的非"炸屎"功能莫属了，各种群里纷纷玩起了炸屎的功能。不知道大家是否经历过那样一个时候，小时候（我是说很小的...

2021-08-10

49浏览

0评论

React开启代理的2种实用方式

开启代理的两种方式react并没有封装好了的ajax请求的代码供我们直接使用，在进行交互的时候，我们需要自己封装ajax代码或者使用第三方ajax库，一般我们用axios(轻量级)。先说一下...

2021-08-10

47浏览

0评论

小程序原生实现左滑抽屉菜单

目录WXS 响应事件
方案A
页面结构和样式
WXS 事件回调函数
WXS 脚本
遮罩层
方案B
为什么要使用 WXS
结语 & 参考资料
参考资料：在移动端，侧滑菜单是一个很常用的组件（通常称作...

2021-08-10

42浏览

0评论

vue中keepAlive组件的作用和使用方法详解

前言在面试的时候，很多面试官再问vue的时候可能就会提一嘴，你知道keep-alive有什么作用吗？keep-alive是vue内置的一个组件，而这个组件的作用就是能够缓存不活动的组件，我们能够知...

2021-08-10

46浏览

0评论

H5微信公众号授权的简单实现步骤

前言昨天因为有一个项目上面需要实现h5微信授权工作。所以花了两个小时来完成这个功能。开始工作前做的准备流程说明【提前沟通过的流程】微信授权具有时...

2021-08-10

35浏览

0评论

js实现0ms延时定时器的几种方式

目录queueMicrotask
async/await
MessageChannel
最后
附录
这两天看到一篇介绍《如何实现准时的 setTimeout？》的文章，文章起源于一道面试题：有什么办法让setTimeout准时呀？具...

2021-08-10

42浏览

0评论

Vue插件报错:Vue.js is detected on this page.问题解决

Vue插件报错：Vue.js is detected on this pag下载Vue插件下载地址：https://chrome.pictureknow.com/将下载好的crx文件拖进拓展程序首先去https://www.bilibili.com/ 验...

2021-08-10

49浏览

0评论

JavaScript实现网页版贪吃蛇游戏

本文实例为大家分享了JavaScript实现网页贪吃蛇游戏的具体代码，供大家参考，具体内容如下<!DOCTYPE html><html><head><title>贪吃蛇</title></head><body><canvas id="canvas"...

2021-08-10

94浏览

0评论

Vue 可拖拽组件Vue Smooth DnD的使用详解

目录简介和 Demo 展示API: Container属性生命周期回调事件API: Draggable实战简介和 Demo 展示最近需要有个拖拽列表的需求，发现一个简单好用的 Vue 可拖拽组件。安利一下~Vu...

2021-08-10

50浏览

0评论

Vue生命周期区别详解

生命周期分类vue每个组件都是独立的，每个组件都有一个属于它的生命周期，从一个组件创建、数据初始化、挂载、更新、销毁，这就是一个组件所谓的生命周期。
在组件中具体的方法有...

2021-08-10

热门文章