前端
关注
分享
扫一扫
icnvd
每天一个没用的小知识
展开
-
Vue电商项目学习总结Day2
Day2知识点token将登录成功之后的token 保存到客户端的sessionStorage中项目中除了登录之外的其他API接口，必须在登录之后才能访问token只应在网站打开期间生效，所以保存在sessionStorage中路由导航守卫router.beforeEach((to, from, next) => { // to 将要访问的路径 // from 代表从哪个路径跳转过来 // next 是一个函数 表示放行 // next() 放行 next（'/log原创 2020-10-27 22:53:19 · 316 阅读 · 0 评论 -
每日一练 JS30天挑战 每日清单
每日清单实现目标输入每日活动到输入框，点击按钮，会在上面显示每日活动刷新网页数据还在实现逻辑Array.map()来处理数据，处理出对面的列表字符串数据保存在本地的localStorage中实现代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>LocalStorage</title> <link re原创 2020-10-27 19:51:11 · 465 阅读 · 0 评论 -
vue电商项目学习总结 Day1
Day1知识点记录登录状态登录业务相关的技术点说明http是无状态的通过cookie在客户端记录状态,通过session在服务器端记录状态前端和服务器不存在跨域问题时推荐使用通过token方式维持状态前端和服务器存在跨域问题推荐使用客户端三种存储方式的特点大小生命周期http请求cookie大小不超过4kb可设置失效时间,默认关闭浏览器失效每次都会被携带到HTTP头中sessionStroage可以达到5M多仅在当前网原创 2020-10-26 20:46:47 · 387 阅读 · 0 评论 -
每日一练 JS30天挑战 JS变量的赋值和引用
JS变量的赋值和引用测试代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JS Reference VS Copy</title></head><body> <script> let name = "Arvin" let name2 = name console.原创 2020-10-25 22:12:53 · 122 阅读 · 0 评论 -
每日一练 JS30挑战 滚动图片滑入效果
滚动图片滑入效果实现目标滚动页面，到达图片显示位置中间以下的位置，图片滑入。实现逻辑监听滚动事件，当可视区域到达图片中间以下，添加滑入样式，图片滚出可视区域，删除可视区域。实现代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Slide in on Scroll</title></head><b原创 2020-10-24 21:11:31 · 319 阅读 · 0 评论 -
每日一练 JS30挑战 密钥检测
密钥检测实现目标不断读入按键输入判断是否符合定义的密钥实现逻辑定义一个空数组每次按键输入便将对应的键值塞入数组，同时维护数组长度检测是否和密钥相同实现代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2020-10-22 20:18:14 · 138 阅读 · 0 评论 -
每日一练 JS30挑战 HTML5播放器
HTML5播放器实现目标有进度条，可拖动点击有音量，可改变音量有倍速，可改变播放速度有前进后退按钮有暂停播放键实现代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>HTML Video Player</title> <link rel="stylesheet" href="style.css">&l原创 2020-10-20 20:23:36 · 161 阅读 · 0 评论 -
每日一练 JS30天挑战 shift多选checkBox
shift多选checkBox实现目标鼠标点击checkBox确定起始checkBox按住shift点击checkBox，会将从起始checkBox开始到点击的checkBox全部选中实现代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Hold Shift to Check Multiple Checkboxes</title原创 2020-10-19 20:37:26 · 326 阅读 · 0 评论 -
每日一练 30天JS挑战 调试技巧
调试技巧代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Console Tricks!</title></head><body> <p onClick="makeGreen()">×BREAK×DOWN×</p> <script> const do原创 2020-10-18 21:17:25 · 127 阅读 · 0 评论 -
每日一练 30天JS挑战 JS操作HTML5canvas
JS操作HTML5canvas实现目标跟随鼠标移动的线条，颜色和粗细会变化实现代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>HTML5 Canvas</title></head><body><!-- HTML5元素 --> <canvas id="draw" width原创 2020-10-17 21:45:45 · 149 阅读 · 0 评论 -
vue学习记录
简单的学生管理系统代码<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">原创 2020-10-17 16:07:25 · 68 阅读 · 0 评论 -
每日一练 30天JS挑战 实时搜索列表
实时搜索列表实现目标在搜索框内输入城市名，会弹出搜索内容高亮输入的搜索单词数字加逗号实现逻辑AJAX正则匹配实现代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Type Ahead ????</title> <link rel="stylesheet" href="style.css">&l原创 2020-10-16 21:28:03 · 202 阅读 · 0 评论 -
ES8-11特性总结
ES8-11特性总结ES8函数名用法Object.keys(arr)返回键组成的数组Object.value(arr)返回值组成的数组Object.entries(arr)将对象转换成数组[[键，值]，[键，值]…]ES9rest,spread从数组扩展到了对象-正则扩展(?<url>.*)的引入 解决了数字下标的问题原本处理的数组下标是数字，在修改正则表达式后，数字下标会发生变换，现在可以根据.group.xxx 标签里的内容 来获取原创 2020-10-15 20:39:17 · 149 阅读 · 0 评论 -
每日一练 30天JS挑战 弹性照片墙
弹性照片墙实现代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Flex Panels ????</title> <link href='https://fonts.googleapis.com/css?family=Amatic+SC' rel='stylesheet' type='text/css'></原创 2020-10-15 20:08:43 · 177 阅读 · 0 评论 -
每日一练 JS30天挑战 数组操作实例
数组操作实例代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Array Cardio ????</title></head><body> <p><em>Psst: have a look at the JavaScript Console</em> ????<原创 2020-10-14 18:04:41 · 208 阅读 · 0 评论 -
每日一练 JS30天挑战 CSS变量和javaScript
CSS变量和javaScript实现目标三个按钮 根据按钮来调整图片元素的边距大小、图片边框的颜色和文字的颜色 图片的模糊程度实现代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>3.CSS Variables and JavaScipt</title></head><body> <h2原创 2020-10-13 19:23:30 · 135 阅读 · 0 评论 -
每日一练 JS30天 挑战时钟
时钟实现目标一个根据时间转动的是时钟实现逻辑通过Date类来获取当前时间通过修改CSS样式的transform:rotate()来模拟时针分针秒针的走动通过设置定时器来时刻修改样式实现代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>2. JavaScript Clock</title></head&g原创 2020-10-12 21:03:43 · 158 阅读 · 0 评论 -
每日一练 JS30天挑战 打击鼓
打击鼓实现目标按键放音乐连续点击立刻重置按下按键有动态变化实现思路将按键div和audio设置相同data-key属性来绑定绑定事件监听keydown和keyup来完成播放和按键变化修改audio.currentTime属性来完成疯狂重置音乐开始实现代码html { font-size: 10px; /* background: url(http://i.imgur.com/b9r5sEL.jpg) bottom center; */ background-size:原创 2020-10-11 12:19:17 · 240 阅读 · 0 评论 -
每日一练 流光按钮 css html
流光按钮实现目标鼠标移动到按钮上会出现流光出现流光时周围一圈变成模糊效果实现逻辑：hover元素来完成鼠标移动到上面的效果：background-image: linear-gradient（）来完成背景渐变色的设置：background-size来扩大背景大小，通过移动背景来完成流光效果，原理和轮播图类似：通过动画@keyframes来设定动画实现代码<!DOCTYPE html><html lang="en"><head> &l原创 2020-10-11 10:14:56 · 165 阅读 · 0 评论 -
每日一练 苹果悬浮按钮 JS CSS HTML
苹果悬浮按钮代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <!-- 设置理想视口--> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>苹果悬浮按钮</title> <原创 2020-10-10 21:31:38 · 457 阅读 · 0 评论 -
CSS基础学习笔记[六]
定位position特点定位是一种更加高级的布局手段通过定位可以将元素摆放道页面的任意位置使用position属性来设置定位position属性static 默认值，元素是静止的没有开启定位relative 开启元素的相对定位absolute 开启元素的绝对定位fixed 开启元素的固定定位sticky 开启元素的粘滞定位相对定位（relative）特点要先开启定位，不开启设置了偏移量不会发生任何变化需要设置偏移量，不设置不会发生任何的变化相对定位是参照于元素在文档流原创 2020-09-14 17:22:03 · 95 阅读 · 0 评论 -
CSS基础学习笔记[五]
浮动浮动特点浮动元素会完全脱离文档流，不再占据文档流中的位置设置浮动以后元素会向父元素的左侧或右侧移动浮动元素默认不会从父元素中移出浮动元素向左侧或右侧移动时，不会超过它前边的浮动元素如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移浮动元素不会超过它上边的浮动的兄弟元素，最多和它同列浮动开启float:left right高度塌陷问题在浮动布局中，父元素的高度默认是被子元素撑开的 当子元素浮动后，其会完全脱离文档流，子元素会从文档流中脱离，将会无法撑起父元素的高度，原创 2020-09-14 16:27:12 · 75 阅读 · 0 评论 -
CSS基础学习笔记（四）
盒子大小<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box1{原创 2020-07-21 17:23:08 · 118 阅读 · 0 评论 -
CSS基础学习笔记[一]
CSS基础day1选择器常用选择器复合选择器关系选择器属性选择器伪类选择器伪类和伪元素选择器常用选择器选择器简介语法举例元素选择器选择页面中所有的指定元素元素{键:值;}p{color:red}id选择器通过元素的id属性选中唯一的一个元素#元素id{键：值;}#name1{font-size:20px}类选择器同id选择器但是class可重复,同一元素可多个类，空格隔开.类名{键:值;}.name2{color:red}通配选择器可以选中原创 2020-06-02 14:53:49 · 146 阅读 · 0 评论