- 博客(29)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 AI代码提示工具
之前一直用国外的Github copilar代码指示工具，写代码效率提高了30%-50%，但是这个工具需要付费而且有时候出现连接问题，后来发现国内也有一款相同的代码只能提示工具，我们只需要在Vscode或者JetBrains里面安装这个插件，就可以使用代码指示功能，很多代码我们只需要敲一个开头，会自动提示后面所有的代码，主要是国内的AI插件不但反应速度快，而且很好用。
2024-03-09 17:41:49
474
原创 父子组件通信方式详解
最近一段时间会更新各种vue面试题，这些面试题都是平时我们面试大概率会遇到的。所有的题目会优先发布在公众号上，网站的文章会延迟几天，如果大家想很快看到最新的面试题，欢迎关注[前端每日技巧]公众号......
2022-06-28 23:06:28
747
1
原创 微信小程序中组件和存储以及传递数据
input、button、checkbox-group、checkbox、radio-group、radio、textarea、picker微信小程序中，也有本地存储对象。异步存储wx.setStorage({key: 存储的名称,value: 存储的内容，success: 存储完毕之后的回调函数})同步存储wx.setStorageSync(key, value);key: 存储的名称value: 存储的内容demo:存储结果：从控制台面板的Storage面板中查看异步提取数据wx.getStorage
2022-06-20 16:12:10
665
原创 微信小程序中数据和事件以及路由
Page构造函数，接收一个对象，对象有data属性，该属性是页面中的数据的存储地点。我们想要在页面运行一段时间之后，修改页面上的数据。因为是数据驱动，所以我们修改数据。修改方式： 该对象的某一个方法内 调用this.setData来修改数据this.setData(obj);obj.key: 要修改的层级路径obj.value: 层级路径对应的值这样就可以在修改数据的同时，修改页面上的显示内容demo:原始页面：原始数据:渲染页面：千万不要直接this.data.xxx = xxx;因为此时只是修改了数
2022-06-13 11:20:26
559
原创 微信小程序中的页面文件和组件
页面的JS文件，用于书写当前页面所需要的脚本代码以及生命周期函数。Page() : 注册了一个页面接收一个对象，该对象用于配置当前页面所需内容。该对象拥有的属性：页面配置文件 JSON文件该文件是针对单个页面的配置 与app.json类似。该文件是当前页面的骨架文件 等效于纯HTML文件该文件只负责当前页面的样式 等效于CSS文件所谓的组件，其实就是HTML中的标签。微信将原本的HTML标签封装了一次，然后叫做组件。因为封装了，所以原来的属性，方法，JS包都将无法在这里使用。微信小程序是双线程的。一个线
2022-06-08 10:28:32
947
原创 微信小程序开发前配置
微信小程序这是嵌入在微信应用程序中的一个更小的应用程序。属于：混合开发。混合开发： 一处开发，多端应用。前端分类网站方向： 普通静态网站 、 网站APP应用方向： 混合开发一个公司，制作一个项目时，如果想要同时支持IOS系统和Android系统，需要招聘两套人马。成本比较高。此时，可以选择招聘一套前端人马。使用混合开发的方式，临时制作一个APP。它可以同时安装在安卓系统和苹果系统上。混合开发有三种分类：浏览器引擎渲染： 以 H5+为代表更贴近原生API的react native： rea
2022-05-16 09:45:34
1145
原创 Less语法知识点
Less编译Less编译Less指的是将Less代码编译成css代码。这个行为应该由谁来完成？在体验Less案例中，我们引入了一个Less.js文件。编译过程是发生在前端的。会导致用户比较晚的看到页面。浏览器端编译Less:如果使用的是style标签书写的less代码，请必须将type属性修改为text/less<style type="text/less">……</style>如果使用的是link标签书写的外链less代码，请必须将rel属性修改为styleshe
2022-05-09 09:52:36
1174
原创 Node服务器与AJAX(一)
服务器简介之前我们写好页面，如果想要给自己看，直接用浏览器打开。如果想要给其他人看，就发给他。但是如果要看的人数太多，此时不可能一个一个的发送。于是架设一台服务器。这个服务器是放在公网上的。只要你把你的网站放在该服务器上，别人就可以通过公网访问到。（得有域名：域名指的是你的服务器在公网上的一个id）简而言之，服务器就是用于提供服务的机器。我们根据服务器的用途不一样，划分出不同的服务器来。我们学习的是最简单的web服务器。NodeJS服务器之前，有一个server.js文件，就是一个简单的Node
2022-04-25 11:06:10
315
原创 Vue中的操作指令
指令v-if<body> <div id="root"> </div> <script> // data & methods & computed & watcher const app = Vue.createApp({ data () { return { tip: 'Vue学习第四天', show: true }
2022-04-08 09:27:20
1425
原创 KOA中间件
静态中间件中间件名称：koa-static下载: npm install koa-static使用：// 引入KOAconst Koa = require("koa");// 搭建服务器const app = new Koa();// 引入中间件 koa-staticconst serv = require("koa-static");// 使用中间件功能app.use(serv("static"))// 监听端口号app.listen(3000)注：在访问static下的内容
2022-04-01 16:08:59
459
原创 JavaScript实现气球打字游戏
实现效果定义球的类气球类中我们需要对26个字符进行处理this.arr = "abcdefghijklmnopqrstuvwxyz".split("");生成一个随机字母this.index = parseInt(Math.random() * this.arr.length);// 定义随机字符this.str = this.arr[this.index];生成一个div标签并对图片进行处理// 元素属性this.dom = document.createElement("div
2022-03-14 23:07:35
5222
原创 JavaScript星星连线技巧
效果图一个星星的实现对视口进行处理：// 获取视口的宽var width = document.documentElement.clientWidth;// 获取视口的高var height = document.documentElement.clientHeight;对canvas处理：// 获取canvasvar canvas = document.getElementById("myCanvas");// 获取画笔var ctx = canvas.getContext("2
2022-03-10 19:34:17
1837
原创 JavaScript实现猫吃鱼小游戏
贪吃猫小游戏作为一名前端人员，撸猫我决定使用面向对象的方式书写贪吃猫小游戏，灵感来自有贪食蛇小游戏。我们可以把整个游戏看成是一个游戏类，游戏类可以有各种各样的属性。我们可以把贪吃猫中的猫作为一个属性，还有地图属性、食物属性、障碍物属性。我们可以把猫当做一个"猫"类，有数组属性、有方向属性、有增长方法、有移动方法。可以把地图看成一个地图类，有行属性、有列属性、有宽度属性 （总宽）、有高度属性 （总高）。有一个数组属性，数组中存放的是每一个小方格。可以把食物看成一个食物类，有一个x属性，有一个.
2022-03-08 20:36:20
3941
原创 Echarts折线图曲线图和三维图
1 折线图 鼠标放在点上时显示的数据效果，在代码中用到的就是tooltip这个参数，其中show的默认值是true，可以省略，当我们不想显示悬浮提示效果，将show修改为false。trigger设置这个参数，效果是可以看到一个竖直的虚线，不添加则不显示。backgroundColor效果是显示数据的弹窗对应的背景色，需要什么颜色自行设置。extraCssText可以设置弹窗显示的阴影效果。配置项的全部代码options: { title:&n
2022-03-04 15:36:53
7565
3
原创 Vue3学习第二天
数据,方法,计算属性和侦听器如果我们在click方法中使用箭头函数,因为this会一层一层往上找,那么此时的this执行的是window<body> <div id="root"> </div> <script> // this = window // data & methods & computed & watcher const app = Vue.createApp({ da
2021-04-19 15:43:39
178
原创 Vue3学习第一天
vue中的应用我们在vue3中如何使用vue?<div id="root"></div>// createApp创建一个 Vue 的应用, 存储到 app 变量中,全称是createApplication// 传入的参数表示,这个应用最外层的组件,应该如何展示// Vue的编程是面向数据的编程// mvvm 设计模式, m -> model 数据, v -> view 视图, vm -> viewModel 视图数据连接层const app = Vue
2021-04-19 09:16:27
578
原创 比较运算符
比较运算符比较运算符常见问题比较运算符结果一定是布尔值(true false)两侧都是纯数字比较纯数字字符串，布尔值，null参与运算，会进行隐式转换等于，在判断两边关系时，尽可能让两侧相等，只判断数值不判断类型，null比较特殊，在参数=时不隐式转换为0。console.log(123 == "123");console.log(true == 1);console.log(...
2020-04-17 14:37:10
733
原创 number与string类型相互转换
数据类型相互转换1. number类型转为string类型+：js中+可以表示数学运算符+，两侧必须都是number类型的值+：js中+表示连接符，用于将两侧的值拼接console.log(5 + "5"); 结果55将number转为string直接拼接一个空字符串+ " "例如： 10 +""2. string转为numberprompt()：js内置的方法，调用对象也是w...
2020-04-15 17:50:11
9605
原创 前端学习教程
我搭建了一个前端博客，用来给学习前端的小白提供学习上的帮助，博客每天会更新前端文章，而且前端学习视频免费分享给大家，每天都会添加前端面试题目和练习题。欢迎大家来我的博客。我的博客中有个welcome的文章，大家扫文章中的群二维码，所有的资料在群里都可以看到，而且随时回答提出的问题。我的群号：920770747...
2018-11-24 22:08:22
1655
2
原创 异型滚动参与多元素的运动
异型滚动参与多元素运动思路：异型滚动就是没有火车的概念，每个“车厢”都是单独的个体，点击按钮之后：下一个图片变为上一个图片的状态，包括宽度、高度、位置都会进行轮替。也可以叫做“样式轮替轮播”。上图中的轮播看似是5张图片，实际上需要7张图片。因为左右各有小图片当做猫腻。jQuery的animate是不能把一个left，动画为right定位的。比如一个div天生left:100px;现在你让他动...
2018-10-10 23:54:35
168
原创 篮球积分系统数组思维制作方法
篮球积分系统数组思维：将相同类型的元素或者对象存放在数组中，通过下标得到任何一项。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type
2018-10-10 23:45:10
256
原创 带蒙版的手风琴制作
带蒙版的手风琴效果1、这个手风琴增加了蒙版效果，看起来更好看2、代码采用了jquery的方法，比不带手风琴的代码看起来更美观，更容易理解，整体思路可以参考不带手风琴的思路。举例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>D
2018-10-10 22:07:20
198
原创 不带蒙版的手风琴制作
不带蒙版的手风琴效果分析：我们定义手风琴图的宽为900px, 里面有5张图片，每一张的图片的间隔应该是180px。当鼠标移入图片的时候， 当前图片展开（560px）, 剩余的四张图片压缩，每一张图片的间隔应该是85px。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">...
2018-10-10 22:00:28
183
原创 间歇模型制作原理
间歇模型制作编程思路：使用定时器，我们要想使图片每2000ms更换一次，然后完成动画的时间是600ms，那么定时器的时间应该是它们的加和，所以应该是2600ms。拉动的策略就是右按钮的策略。Unit的高度要足够高 并且要能够盛放3张图片。举例<!DOCTYPE html><html lang="en"><head> <meta chars...
2018-10-10 21:55:15
171
原创 三位置法实现无缝滚动轮播图
三位置法实现无缝滚动轮播图三位置：候场位置、登场位置、退场位置缺点：虽然可以实现无缝轮播图，但是有一个缺点就是当鼠标在小圆点中来回滑动时，会显示出现空白现象，所以一般实现滚动轮播图都实现我上篇文章的滚动轮播图的方法注意：举例中所引入的jquery包可以去我上传的资料中下载，里面有相关包及手册，我使用的jquery的包版本是jquery-1.12.3.min.js举例：<!DOCTY...
2018-10-09 23:09:05
431
原创 滚动轮播图制作原理
滚动轮播图滚动轮播图布局关键：是所有图片并排在一起，所以unit的宽要足够宽。克隆第一张图片追加到最后一张右按钮拉动策略：先拉动，再瞬移左按钮拉动策略：先瞬移，再拉动与呼吸轮播图一样，需要做防流氓策略复制代码：将我代码中的图片更换为你的图片，注意图片路径，还需要引入js库，我引入的是jquery-1.12.3.min.js的版本，需要js这个库的同学可以去我上传的资料中下载，引入的时候...
2018-10-09 21:58:13
1335
原创 呼吸轮播图制作原理
呼吸轮播图轮播图：carousel呼吸轮播图变种布局重点：所有的图片摞一起。jquery选择元素的能力非常好，但是我们习惯将用到的元素，提前保存到变量。通常我们使用id选中元素。一般我们以$box。左右按钮防流氓的策略：当图片运动时，不进行任何操作。is()小圆点的防流氓的策略：立即响应新事件。stop(true)注意：使用代码时将图片更换，以及需要引入jquery库。举例：<...
2018-10-08 20:11:17
503
原创 jQuery处理动画积累的方法
jQuery防止动画积累一个元素身上可以存在多个动画事件，尤其是在不经意间就会造成动画积累，此时我们就要防止(也叫防流氓)比如：现有一个队伍在上海，接到了命令，前往北京，在去北京的路上又接到了命令，回上海。此时这支队伍有两个策略：①：立即执行新的任务，放弃原有任务利用**stop(true)**可以实现举例<!DOCTYPE html><html lang="en...
2018-10-08 17:08:29
516
原创 Jquery中stop()的用法
stop()stop()：表示让运动的元素立即停止动画。接收两个参数，都是布尔值，默认值都是false第一个参数：是否清空当前动画队列。第二个参数：是否立即完成当前动画。①stop(false，false)等价方式stop()表示立即进入下一个动画，立即停止当前动画。②stop(false，true)表示立即进入下一个动画，立即停止并完成当前动画。③stop(true，true)表示...
2018-10-08 15:07:48
3963
jquery所用的包及手册，我资料中引入的jquery也在里面，解压后可以直接使用。
2018-10-09
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人