当前位置: 首页 > news >正文

端盒日记Day02

JS

本本本本本地存储

localStorage

作用:可以将数据永久存储在本地(用户电脑),除非手动删除,否则关闭页面也会存在

特性:a.可多窗口(页面)共享(同一浏览器可以共享)b.以键值对的形式存储使用

语法:

存储数据:localStorage.setItem('key', 'value')

获取数据:localStorage.getItem('key')

删除:localStorage.removeItem('key')

本地原来若有数据使用setItem就是修改,原来没有就是增加

sessionStorage

特性:a.生命周期为关闭浏览器窗口  b.在同一个窗口(页面)下数据可以共享  c.以键值对的形式存储  d.用法跟localStorage基本相同

本地存储只能存储字符串类型

存储复杂数据类型

需要将复杂的数据类型转换为JSON字符串,再存储到本地

语法:JSON.stringfy(复杂数据类型)

?? 本地存储里面取来的是字符串,不是对象,无法直接使用

!!把取出来的字符串转换为对象

语法:JSON.parse(JSON字符串)

map和join方法拼接字符串

数组中map方法 迭代数组 map可遍历数组处理数据,并且返回新的数组

例如:

const arr = ['red', 'blue', 'green']

const newArr = arr.map( function(ele) {

         return ele + '颜色'

})

console.log(newArr) // ['red颜色', 'blue颜色', 'green颜色']

map也称为映射,指两个元素的集之间元素相互"对应"的关系         

map重点在于有返回值,forEach没有返回值

数组中join方法:把数组中所有元素转换为一个字符串

const arr = ['red颜色', 'blue颜色', 'green颜色']

console.log(arr.join('')) // red颜色blue颜色green颜色

数组元素是通过参数里面指定的分隔符进行分隔的

参数:空字符串('') --> 则所有元素之间没有任何字符

           括号内为空 --> 则逗号分隔

CSS

旋转

属性:transform:rotate(角度)

旋转单位角度:deg角度 正顺逆负

改变转换原点:默认情况下,转换中心是盒子中心点

属性:transform-orgin: 水平原点位置 垂直原点位置

取值:方位名词(left, top, right, bottom, center) 、px、 %

多重转换

效果就是那个轮胎滚走了

技巧:先平移再旋转

transform:translate() rotate()

!!注意!!:

1.多重转换是复合属性,具有层叠性

2. 以第一种转换形态的坐标轴为准 这也是为什么要先平移再旋转才能达到滚走的效果

缩放

属性:transform: scale(缩放倍数)

           transform: scale(X轴缩放倍数,Y轴缩放倍数)

技巧:通常只为scale设置一个值,表X轴Y轴等比例缩放

           取值大于1表示放大,小于1表示缩小

倾斜

属性:transform: skew()

单位deg 正左负右

渐变

        1. 线性渐变

background-image: linear-gradient(

        渐变方向,

                颜色1 终点位置,

                颜色2 终点位置,

                ...

);

取值:

渐变方向:①to 方位名词 ②角度度数

终点位置:%

        2. 径向渐变

作用:可以给按钮添加高光效果

属性:background-image: radial-gradient (

                半径 at 圆心位置,

                颜色1 终点位置,

                ...

           );        

取值:

半径可以是2条,则为椭圆

圆心位置取值:px、%、方位名词

相关文章:

端盒日记Day02

JS 本本本本本地存储 localStorage 作用:可以将数据永久存储在本地(用户电脑),除非手动删除,否则关闭页面也会存在 特性:a.可多窗口(页面)共享(同一浏览器可以共享&a…...

考研高数(平面图形的面积,旋转体的体积)

1.平面图形的面积 纠正:参数方程求面积 2.旋转体的体积(做题时,若以x为自变量不好计算,可以求反函数,y为自变量进行计算)...

选择企业邮箱,扬帆迈向商务新纪元!

企业邮箱和个人邮箱不同,它的邮箱后缀是企业自己的域名。企业邮箱供应商一般都提供手机app、桌面端、web浏览器访问等邮箱使用途径。那么什么是企业邮箱?如何选择合适的企业邮箱?好用的企业邮箱应具备无缝迁移、协作、多邮箱管理等功能。 企…...

2024.3.25力扣每日一题——零钱兑换2

2024.3.25 题目来源我的题解方法一 动态规划 题目来源 力扣每日一题;题序:518 我的题解 方法一 动态规划 给定总金额 amount 和数组 coins,要求计算金额之和等于 amount 的硬币组合数。其中,coins的每个元素可以选取多次&#…...

包子凑数【蓝桥杯】/完全背包

包子凑数 完全背包 完全背包问题和01背包的区别就是,完全背包问题每一个物品能取无限次。 思路:当n个数的最大公约数不为1,即不互质时,有无限多个凑不出来的,即n个数都可以表示成kn,k为常数且不为1。当n个…...

口语 4.6

drop the gun :逃避 radically 极大程度地 vastly cognition:认知能力 flaw缺陷 flawless:没有缺陷 interface:接口,交流处 retain:保留 down the rabbit hole:进入未知领域了 wrap your head aro…...

使用Docker 部署jenkins 实现自动化部署

使用Docker部署jenkins实现自动化部署ruoyi-vue docker jenkinsJava jenkinsfilevue jenkinsfileDockerfile 部署脚本Java Dockerfilenginx Dockerfilenginx-dev.conf 使用docker部署Jenkins,项目: https://gitee.com/y_project/RuoYi-Vue 作为部署项目示范 docker…...

golang语言系列:Web框架+路由 之 Gin

云原生学习路线导航页(持续更新中) 本文是golang语言学习系列,本篇对Gin框架的基本使用方法进行学习 1.Gin框架是什么 Gin 是一个 Go (Golang) 编写的轻量级 http web 框架,运行速度非常快,如果你是性能和高效的追求者…...

春招百题--堆

一、堆的定义 二、堆(优先队列) 堆通常用于实现优先队列(priority_queue),大顶堆相当于元素按从大到小的顺序出队的优先队列。从使用角度来看,我们可以将“优先队列”和“堆”看作等价的数据结构。 堆的…...

全志A40i android7.1 移植wifi驱动的一般流程

一,问题分析 一般情况下移植一款模组,会涉及到驱动,firmware, hal层,方案端的适配。 下面以RTL8723ds为例详细列出移植的通用步骤。 二,移植步骤 1. 移植Wi-Fi驱动 从RTL原厂或者已经支持的其他把内核版本中获取驱动…...

Qt——Qt绘图之QPainter的使用总结(使用paintEvent实现旋转图片效果)

【系列专栏】:博主结合工作实践输出的,解决实际问题的专栏,朋友们看过来! 《项目案例分享》 《极客DIY开源分享》 《嵌入式通用开发实战》 《C++语言开发基础总结》 《从0到1学习嵌入式Linux开发》 《QT开发实战》 《Android开发实战》...

Day83:服务攻防-开发组件安全JacksonFastJson各版本XStreamCVE环境复现

目录 J2EE-组件Jackson-本地demo&CVE 代码执行 (CVE-2020-8840) 代码执行 (CVE-2020-35728&#xff09; J2EE-组件FastJson-本地demo&CVE FastJson < 1.2.24 FastJson < 1.2.47 FastJson < 1.2.80 (利用条件比较苛刻) J2EE-组件XStream-靶场&CVE …...

【QT+QGIS跨平台编译】056:【pdal_kazhdan+Qt跨平台编译】(一套代码、一套框架,跨平台编译)

点击查看专栏目录 文章目录 一、pdal_kazhdan介绍二、pdal下载三、文件分析四、pro文件五、编译实践一、pdal_kazhdan介绍 pdal_kazhdan 是 PDAL(Point Data Abstraction Library)相关的 Kazhdan 算法的实现。PDAL 是一个用于处理和分析点云数据的开源库,而 Kazhdan 算法通常…...

泰坦尼克号幸存者数据分析

泰坦尼克号幸存者数据分析 1、泰坦尼克号数据集2、数据集加载与概览3、泰坦尼克号幸存者数据分析4、哪些人可能成为幸存者&#xff1f; 1、泰坦尼克号数据集 泰坦尼克号的沉没是世界上最严重的海难事故之一&#xff0c;造成了大量的人员伤亡。这是一艘号称当时世界上最大的邮轮…...

Memcached 教程之 PHP 连接 Memcached 服务(十)

PHP 连接 Memcached 服务 在前面章节中我们已经介绍了如何安装 Memcached 服务&#xff0c;接下来我们为大家介绍 PHP 如何使用 Memcached 服务。 PHP Memcache 扩展安装 PHP Memcache 扩展包下载地址&#xff1a;PECL :: Package :: memcache&#xff0c;你可以下载最新稳定…...

【zlm】音视频流与音频流合并的设计

目录 设想一 设想二 方案三 关键技术 测试语句 测试脚本 参考文档 设想一 //开始录制_option.mp4_save_path custom_path;_option.mp4_max_second max_second;vector<Track::Ptr> mytracks getTracks();auto src MediaSource::find( DEFAULT_VHOST, "1&quo…...

typescript的工作流

先coding code.ts代码&#xff0c;由tsc编译code.ts生成code.js格式 npm install —save-dev lite-server 是用来安装轻量级的服务器&#xff0c;只是用来开发的一个服务器&#xff0c;真正到生产环境中时可能会使用类似于Apache的server或者汤姆猫一类的服务器&#xff0c;安…...

MATLAB下载与安装详细教程:从官方获取到成功启动

引言 MATLAB&#xff08;MATrix LABoratory&#xff09;作为一款全球知名的高级数值计算与数据分析平台&#xff0c;以其强大的矩阵运算能力、丰富的内置函数库以及直观易用的图形用户界面&#xff0c;深受科研人员、工程师和学生群体的青睐。无论是进行复杂的数学建模、信号处…...

【随笔】Git 高级篇 -- 分离 HEAD(十一)

&#x1f48c; 所属专栏&#xff1a;【Git】 &#x1f600; 作  者&#xff1a;我是夜阑的狗&#x1f436; &#x1f680; 个人简介&#xff1a;一个正在努力学技术的CV工程师&#xff0c;专注基础和实战分享 &#xff0c;欢迎咨询&#xff01; &#x1f496; 欢迎大…...

mac、windows 电脑安装使用多个版本的node

我们为啥要安装多个不同版本的node&#xff1f; 开发旧项目时&#xff0c;使用低版本Nodejs。开发新项目时&#xff0c;需使用高版本Node.js。可使用n同时安装多个版本Node.js&#xff0c;并切换到指定版本Node.js。 mac电脑安装 一、全局安装 npm install -g n 二、mac电脑…...

在鸿蒙HarmonyOS 5中使用DevEco Studio实现录音机应用

1. 项目配置与权限设置 1.1 配置module.json5 {"module": {"requestPermissions": [{"name": "ohos.permission.MICROPHONE","reason": "录音需要麦克风权限"},{"name": "ohos.permission.WRITE…...

GC1808高性能24位立体声音频ADC芯片解析

1. 芯片概述 GC1808是一款24位立体声音频模数转换器&#xff08;ADC&#xff09;&#xff0c;支持8kHz~96kHz采样率&#xff0c;集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器&#xff0c;适用于高保真音频采集场景。 2. 核心特性 高精度&#xff1a;24位分辨率&#xff0c…...

力扣-35.搜索插入位置

题目描述 给定一个排序数组和一个目标值&#xff0c;在数组中找到目标值&#xff0c;并返回其索引。如果目标值不存在于数组中&#xff0c;返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...

C++.OpenGL (14/64)多光源(Multiple Lights)

多光源(Multiple Lights) 多光源渲染技术概览 #mermaid-svg-3L5e5gGn76TNh7Lq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3L5e5gGn76TNh7Lq .error-icon{fill:#552222;}#mermaid-svg-3L5e5gGn76TNh7Lq .erro…...

LOOI机器人的技术实现解析:从手势识别到边缘检测

LOOI机器人作为一款创新的AI硬件产品&#xff0c;通过将智能手机转变为具有情感交互能力的桌面机器人&#xff0c;展示了前沿AI技术与传统硬件设计的完美结合。作为AI与玩具领域的专家&#xff0c;我将全面解析LOOI的技术实现架构&#xff0c;特别是其手势识别、物体识别和环境…...

通过MicroSip配置自己的freeswitch服务器进行调试记录

之前用docker安装的freeswitch的&#xff0c;启动是正常的&#xff0c; 但用下面的Microsip连接不上 主要原因有可能一下几个 1、通过下面命令可以看 [rootlocalhost default]# docker exec -it freeswitch fs_cli -x "sofia status profile internal"Name …...

前端工具库lodash与lodash-es区别详解

lodash 和 lodash-es 是同一工具库的两个不同版本&#xff0c;核心功能完全一致&#xff0c;主要区别在于模块化格式和优化方式&#xff0c;适合不同的开发环境。以下是详细对比&#xff1a; 1. 模块化格式 lodash 使用 CommonJS 模块格式&#xff08;require/module.exports&a…...

算法刷题-回溯

今天给大家分享的还是一道关于dfs回溯的问题&#xff0c;对于这类问题大家还是要多刷和总结&#xff0c;总体难度还是偏大。 对于回溯问题有几个关键点&#xff1a; 1.首先对于这类回溯可以节点可以随机选择的问题&#xff0c;要做mian函数中循环调用dfs&#xff08;i&#x…...

STL 2迭代器

文章目录 1.迭代器2.输入迭代器3.输出迭代器1.插入迭代器 4.前向迭代器5.双向迭代器6.随机访问迭代器7.不同容器返回的迭代器类型1.输入 / 输出迭代器2.前向迭代器3.双向迭代器4.随机访问迭代器5.特殊迭代器适配器6.为什么 unordered_set 只提供前向迭代器&#xff1f; 1.迭代器…...

学习 Hooks【Plan - June - Week 2】

一、React API React 提供了丰富的核心 API&#xff0c;用于创建组件、管理状态、处理副作用、优化性能等。本文档总结 React 常用的 API 方法和组件。 1. React 核心 API React.createElement(type, props, …children) 用于创建 React 元素&#xff0c;JSX 会被编译成该函数…...