前端
关注
分享
扫一扫
Windy Z
这个作者很懒，什么都没留下…
展开
-
使用 canvas 和面向对象思想绘制流星动画
本人也是前端小白，正在努力学习的路上奔跑~最近看到一位博主大大的绘制星空博文，加上最近对面向对象编程思想的理解，也照葫芦画瓢复现了一个demo，顺便熟悉一下canvas的一些API。源代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initi.原创 2020-12-13 18:06:56 · 93347 阅读 · 0 评论 -
前端基础算法题解法
代码均为自己手写，如有错误或更优解法，劳烦小伙伴们指教哈~1、斐波那契数列// 解法一function a (n, a1 = 1, a2 = 1) { if (n <= 1) return a1 return a(n - 1, a2, a1 + a2)}let res = a(5)console.log(res)// 解法二let a1 = 1, a2 = 1function b (n) { if (n <= 1) return a for.原创 2020-10-04 00:58:57 · 242063 阅读 · 3 评论 -
React 移动端开发样式问题记录
React 移动端开发样式问题记录1、 input 输入框无法聚焦输入文字将样式中的 user-select: none; 更改为 user-select: text !important;2、 背景设置 transparent 无效经过 IOS 真机测试，transparent 在移动端支持不好，将 transparent 更改为 rgba(0, 0, 0, 0) 等效透明效果即可3、 设置了 backdrop-filter: blur(20px) 后，模糊效果出现位置偏移情况box-s原创 2020-09-07 14:21:04 · 134666 阅读 · 0 评论 -
使用 React 和 Threejs 创建一个VR全景项目
最近我在学习使用 React 配合 Three.js 来搭建一个可以浏览720全景图片的项目实现的是加载一张 2:1 的720全景分享一下我的创建过程一、搭建框架并安装需要的插件npx create-react-app parano // 创建一个 React 项目npm install -S typescript // 安装 typescript，这个是类型辅助插件，与全景项目关系不大npm install -S @types/three // 安装 typescript 支持的 thre.原创 2020-08-17 00:12:36 · 138481 阅读 · 0 评论 -
在React项目中使用redux
前言： 此博文是记录我在b站上观看redux教学视频的记录原视频链接在此 react-redux看这个视频就够了！一、安装相关的插件1、安装 reduxnpm install -S redux2、安装 redux-thunknpm install -S redux-thunk3、在 chrome 应用商店安装 redux-devtools二、引入相关插件import {createStore, combineReducers, compose, applyMiddleware} fr.原创 2020-08-02 18:27:15 · 139156 阅读 · 0 评论 -
React中使用路由进行父子组件的通信
最近我在学习 React.js 框架，在此记录一下我使用 react-router-dom 来实现单页应用（SPA）的路由跳转时，怎么处理父子组件间的通信。本文使用的是 HashRouter。父组件中的路由配置/** * 我使用了 react-router-dom 里面的 Switch 进行页面内的路由更新 * NavPage 是父组件 * Content 是子组件 */class NavPage extends React.Component { render () { ret.原创 2020-06-19 23:10:08 · 135215 阅读 · 0 评论 -
使用 Electron 打包 Web 应用
1、 npm 初始化项目新建一个文件夹作为项目文件夹使用 npm init 初始化文件夹生成一个 package.json 文件修改 package.json 里面的 "main": "index.js"2、 安装 electron 到项目文件夹在项目文件夹下执行以下命令npm install --save-dev electron/** * 这一步我用 cnpm 安装的，cnpm 的具体安装方法可百度 * --save-dev 可以自动更新 package.json 里面的 "原创 2020-06-05 11:18:53 · 137057 阅读 · 0 评论 -
微信小程序同一个方法内部多次 setData 无效解决方法
近期我在进行微信小程序开发的时候，遇到了一个函数需要多次 setData在 setData 进行完毕后，通过 console.log( this ) 来查看数据，发现数据是已经更新成功了但是页面却没有渲染出结果来因此推测可能是因为多次执行 setData，加上本身执行的操作比较复杂，导致小程序页面没能反应过来。解决方法后来通过定义一个对象，把所有要 setData 的数据都存放进对象里面，等执行的差不多的时候再一次性通过 setData 方法把数据更新过去let setData: any = {原创 2020-05-22 16:53:33 · 136355 阅读 · 0 评论 -
微信小程序实现毛玻璃弹窗效果
使用方法：使用 backdrop-filter : blur()配合background : rgba()来实现弹窗的毛玻璃效果。优点：这种方式省去了多设置一个after伪类来进行背景模糊的麻烦而且backdrop-filter : blur()是自动把该元素后面的背景进行模糊处理，而不需要指定固定的背景来进行模糊Demo代码：WXML 页面：<view class='bg_contain'> <view class='blur_demo'></view&原创 2020-05-17 14:48:54 · 141309 阅读 · 2 评论 -
jQuery学习笔记
前言此博文是笔者在w3school学习jQuery时整理的笔记，有所不足，欢迎大家批评指正~1. jQuery语法基础语法：$(selector).action()$ 为 jQuery 的简写// selector可以为this,id,class名称,标签名字,属性文档就绪函数$(document).ready(function(){ //function内容});...原创 2020-04-23 20:23:01 · 140746 阅读 · 0 评论 -
响应式布局学习
1. 响应式布局简介响应式布局是指通过判断设备类型、或设备的屏幕宽度来呈现不同的显示效果。比如一个网页，在电脑端和手机端的显示是不一样的。2. 媒体设备类型常见的媒体设备类型有：screen、print等在<style>或<link>中加入 media="print" / media="screen" 来指定样式应用的媒体类型3. 简化如果每个不同的样式...原创 2020-04-23 16:18:46 · 136748 阅读 · 0 评论 -
Grid布局学习
1. grid布局简介与对比简介：grid采用网格布局方案，把一块区域划分为多个网格，然后分别用元素去填充这些网格。与flex布局对比：整体布局理念与flex有点类似，但grid布局在实现固定区域布局的时候显得更灵活更易用。flex布局是基于弹性盒子模型，让元素按先后顺序塞进大盒子里，可以说是简化的float布局。grid布局则是类似于表格，用一个大网格来划分出若干个小网格，元...原创 2020-04-23 16:17:34 · 135905 阅读 · 0 评论 -
JS学习笔记
前言本学习笔记系作者在学习JS时，摘抄自W3SCHOOL1.运算符取幂运算符（ES7）：var x = 5;var z = x ** 2; //结果为25，等同于Math.pow(5,2)2. 数据类型2.1 数据类型基本数据类型：number,string,boolean,undefined,null引用数据类型：object,函数,正则表达式注意：js数组属于对象，...原创 2020-04-23 00:12:45 · 137439 阅读 · 0 评论 -
Animation学习笔记
Animation的学习1. Animation基本用法<!--由@keyframes来定义新的animation动作-->@keyframes animation1{ 0%{ transform:translate(100px,200px); } 100%{ transform:translate(0px,0px); }}@keyframes anima...原创 2020-04-22 00:02:36 · 137578 阅读 · 0 评论 -
CSS学习笔记
前言这篇博客是我的CSS学习笔记1. float布局知识点：1. 设置浮动：float：none/left/right2. 设置float布局将脱离文档流，不会占据页面的空间3. 浮动元素的外边缘不会超过父元素的内边缘3. 浮动元素不会相互重叠4. 浮动元素只能左右浮动5. 浮动元素的display属性将完全失效并可以设置宽高，不会独占一行6. 清除浮动：clear:bot...原创 2020-04-21 17:57:29 · 138645 阅读 · 0 评论 -
Canvas的使用
Canvas的使用1. 创建<canvas>创建<canvas>元素并声明width、height和<canvas width="600" height="400"></canvas>2. JS中获取组件1. JS获取组件//querySelector返回值类型为静态NodeList集合，是克隆整个对象，所以速度慢var mycan...原创 2020-04-21 11:27:20 · 135334 阅读 · 0 评论 -
前端学习之路 --ES6新特性
#前言这篇博客是我在b站进行学习es6课程时的笔记总结与补充。此处贴出up主的教程视频地址：深入解读ES6系列(全18讲)1、ES6学习之路1.1 ES6新特性1. 变量2. 函数3. 数组4. 字符串5. 面向对象6. Promise7. generator //类似于Promise8. 模块化1.2 变量1.2.1 let、var、const和作用域知识点：...原创 2020-04-19 17:39:52 · 136128 阅读 · 0 评论