- 博客(95)
- 收藏
- 关注
原创 阅读推荐--CSS世界
《CSS世界》张鑫旭大佬CSS三部曲中的第一作 同时也是笔者入行读的第一本书 CSS入手简单,深入难 越到后面就会觉得错综重叠的样式出现不合预期的现象便难以定位。 而这本书将会从表现渗透到本质,从样式的基础结构进行解析. 比如: 对于一个图片浮动,认为只有float起作用,实际上,行高、字体、鼠标手形等都在起作用. 实际上CSS属性和其他多个CSS属性发生着千丝万缕的关系。 多次翻读,多实践此书的内容,至少会让你在CSS上得到一番领悟。
2023-04-07 17:24:44
127
原创 桶排序(基数排序)js
桶排序顾名思义,桶是装东西的这里是把需要排序的东西,根据某种映射关系和桶关联起来,再放进去那么桶的选择就非常重要,比如有一个很多大数的数组,我们要用桶排序需要建立若干个桶形成映射,当然这不太合适,所以这种场景下就不要使用桶排序了简单举个例子,就能理解桶排序了假设有个待排序数组:[100,101,045,021]其中个位最大的是是5,建立一个下标能到5的桶[[],[],[],[],[],[]]1.根据个位[[100],[101, 21],[],[],[],[45]]2.从左到右倒出来[1
2021-09-26 02:25:09
93
原创 堆,堆排序js
概念:堆是一个脑补的二叉树既然当作树来看,就满足树的一些特点:某个节点i的左孩子位置在2*i+1右孩子位置在2*i+2父节点位置在i-1/2比如: [1,2,3,4,5]可以看作是一个二叉树,下标是节点,数组中对应的就是值,0是1,1是2,2是3, 3是4, 4是5值2的位置在1,左孩子位置是2*1+1=3 可以拿到4右孩子位置是2*1+2=4 可以拿到5父节点位置在0 可以拿到1大根堆:二叉树中每个子树的最大值都在顶部是每个子树的根节点小根堆:二叉树中每个子树的最小值都
2021-09-23 23:13:49
67
原创 理解快速排序分治法实现js
function quickSort(arr) { if (!arr || arr.length<2) { return } quickSortMain(arr, 0, arr.length-1)}function quickSortMain(arr, L, R) { if (L<R) { // 随机取个值下标的数当作中间值指标,并和最后一个值交换位置 // 交换的目的是方便设置左边界,在midBorder函数中 // Math.random()生成[0,1)的随机
2021-09-13 21:31:11
84
原创 理解归并排序js
function mergeSort(arr, L, R) { // 递归终止条件,到达最小单元,此时单个元素一定有序 if (L===R) { return } // 移位运算符优先级小于+ // 中点下标为(L+R)/2 // 但是L+R可能溢出 // 所以使用 2L/2 + (R-L)/2的形式 // >> 移位符,>>1相当于除以2 // 2的二进制为010 // 右移一位 001 为1 // 6的二进制110 // 右移一位011 为3 //
2021-09-12 22:23:43
111
原创 理解插入排序--js
插入排序是一个O(n^2)的排序算法实现上来说就是维护一个前n个数为有序的序列(当然反过来也可以)例如,排序出一个升序的[6,5,4,3,2,1,0]默认第一个数 6 为有序从5开始往前看5小于6,交换[5,6,4,3,2,1,0]4往前看4小于6,交换[5,4,6,3,2,1,0]继续往前看,直到比他小,或者没有下一个数4小于5,交换[4, 5,6,3,2,1,0]。。。。。。其实这个过程很像打牌时的手牌重组比如:一开始没有手牌发了一张k给我手上只有一张是有序的
2021-09-07 23:45:12
51
原创 react 使用对象创建虚拟dom
一般我们用jsx是通过map数组的形式如const arr = [1,2,3]render(){ return ( <div> { arr.map((ele,idx)=>{ return ( <div key={idx}>{ele}</div> ) }) } </div> )}那如果是一个对象,怎么遍历,创建虚拟dom呢 关键API: Object.keys 参数:要
2021-09-06 19:45:54
131
原创 屏幕适配方案
适配核心–等比概念回顾视口理解:布局视口,视觉视口,理想视口1.viewport适配步骤<meta name = "viewport " content="width=设计稿宽度"/>例如设计稿宽度为375<meta name = "viewport" content="width=375"/>,然后按照设计稿做就行了这样布局视口就一直是375优点: 不需要复杂计算,按照设计稿标注做即可缺点: 不能使用完整的meta标签,会导致安卓手机出现严重兼容问题 导致
2021-09-02 21:06:46
106
原创 视口理解:布局视口,视觉视口,理想视口
在pc端默认宽度和浏览器窗口的宽度一致,在css标准文档中,视口也被称为:初始包含块是所有css百分比宽度推算的根源可以理解成浏览器的屏幕是一个可变的盒子例子:全屏显示时宽度就是屏幕宽度,假设是1000有一个盒子占宽20%则它的宽为200如果把窗口拉到原来的一半,现在是500则盒子占100,即宽为100所以有时候看到浏览器在拉小时内容错位了,就是因为包容的容器盒子变化了一些参考的值显示区域 document.documentElement.clientWidth 常用显示区域 +
2021-09-02 20:50:52
1041
原创 javascript倒计时功能
假设有一个100000000的时间戳那么总共就有100000秒(100000000 / 1000)100000%60 就是去除掉整分钟数 剩下的秒数 就是秒占40100000/60 是整的分钟数 总共1666分钟100000/60%60 是分钟数不到一个小时的部分 为46 占2760 = 4660100000/3600 是整的小时数为27100000/3600%24 是小时数不到一天的部分 这里为3 占10800 = 36060100000/3600/24 是整数天的天数这里为1 占86400
2021-08-24 21:49:02
198
原创 js 继承方式扩展(原型式,寄生式)
温故而知新:js中构造函数,原型,实例的关系,原型链是什么js/javascript 继承方式主要有哪些?及其优缺点特点// 原型式// 概念: 使用已存在的对象创建一个新的对象,而不必创建新的自定义对象类型// 实现方法function inherit(father) { function Tmp() {} // 继承父类的对象(直接把父对象当原型对象) Tmp.prototype = father return new Tmp() /* 回顾new的过程 1.创建了新的对象,
2021-08-24 20:57:08
148
原创 微信小程序 自定义头部导航栏
关键APIgetSystemInfoSyncgetMenuButtonBoundingClientRect链接: getSystemInfoSync.链接: getMenuButtonBoundingClientRect.自定义头部导航栏的适配1.通过getSystemInfoSync获取到statusBarHeight实现状态栏高度(电池等信息的状态栏)2.getMenuButtonBoundingClientRect获取到右上角胶囊的指标(可省略第一步)top: 胶囊顶部到手机顶部的
2021-08-21 01:59:38
318
原创 Taro微信小程序底部动画弹窗
// 蒙层部分@keyframes slideBgUp { from { visibility: visible; background: transparent; } to { background: rgba(0,0,0,.7); }}@keyframes slideBgDown { from { background: rgba(0, 0 ,0 , .7); } to { background: transparent;
2021-08-21 01:46:38
1665
1
原创 微信小程序 调试器看不到子组件的样式
思路因为之前是能看到的所以对比了一下最近两个版本的代码发现主要写了keyframe动画注释掉后发现就能看到了解决方法把keyframe相关的css先注释掉其他可能还有其他的原因共同导致的,如果大家有其他的方法或思路,欢迎一起分享...
2021-08-07 16:15:34
442
原创 Taro学习笔记_发送请求、静态数据引入
import { useState, useEffect } from 'react'import Taro from '@tarojs/taro'import { View, Image } from '@tarojs/components'import './index.less'// 引入图片,不然直接引入(使用src属性)会找不到文件,因为编译后可能出现文件位置变化// static是自己建的目录src/staticimport pic from '../../static/111.jp
2021-07-04 15:17:12
366
原创 Taro学习笔记_路由配置、传参、跳转
路由配置src/app.config.js下的pages属性进行设置谁在第一项打开的页面就在哪里window属性是设置小程序一些样式的使用 taro create xxx 可以快速在pages下创建页面跳转APInavigateTo 页面跳转,可以返回redirectTo 不记录上一页跳转switchTab Tab之间切换,配合Taro的导航栏一起使用navigateBack 返回上一页relaunch 关闭所有页面,打开一个页面getCurrentPages 获得当前页面的一些配置
2021-07-04 15:09:09
1115
原创 Taro学习笔记_写子组件并传参
子组件文件位置/src/pages/index/son.jsx// 这里这是演示,要规范子组件的位置哦import { View, Text } from '@tarojs/components'function Son(props) { return ( <View> <Text>Im son get father value props: { props.por }</Text> </View> )}export defau
2021-07-04 14:55:55
190
原创 Taro学习笔记_使用Hooks和列表渲染
笔者Taro版本v3.2.13文件位置/src/pages/index/index.jsximport { useState } from 'react'import { View, Text } from '@tarojs/components'function Index() { const list = [ { id: 1, name: 'z1'}, { id: 2, name: 'z2'}, { id: 3, name: 'z3'}, { id: 4, name: 'z4
2021-07-04 14:50:52
285
原创 Taro学习笔记_环境搭建
安装注意包管理工具的配置这里说一下yarn的配置npm i yarn -g 全局安装yarn控制台执行 yarn -v 如果打印出了yarn的版本则全局安装yarn成功yarn config list 命令查看yarn的配置把源换成淘宝的yarn config set registry https://registry.npm.taobao.org/设置全局安装目录,找个位置新建一个global文件夹yarn config set global-folder "E:\xx\global
2021-07-04 14:42:29
332
原创 js异步理解(进阶)
之前说了基本的事件循环现在来进一步理解es6中的事件循环Promise是ES6发布的一种异步实现方案如果和setTimeout一起使用的结果是什么呢// promise和setTimeoutPromise.resolve().then( () => { console.log('p1')})setTimeout(()=>{ console.log(4)},0)Promise.resolve().then( () => { console.log('p2')
2021-04-29 15:08:45
184
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人