![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端学习
一夕ξ
冲!
展开
-
登录页面验证
sessionStorage:是会话期间的存储机制,数据只在当前标签页共享,存在本地,关闭浏览器后会清除数据,关闭标签页清除数据。localStorage:是持久化的存储机制,数据会存在浏览器中,浏览器关了数据也还在,只有清除缓存才会小时。sessionStorage有token:页面1去页面2–直接进入。token只应该在当前网站打开期间生效,因此应该保存在sessionStorage。sessionStorage没有token:去登录页。to.path 和from.path都是’/’原创 2022-11-30 08:20:32 · 497 阅读 · 0 评论 -
Vue基础项目1
会先查找本地已经下载过得包,不论版本是多少,找到了就会去下载。因此如果要升级依赖,可以使用npm update。原创 2022-10-28 10:06:53 · 304 阅读 · 0 评论 -
css登录界面
伪元素是元素,就是css模拟出来的一个盒子(如果想在盒子内部插入一个小盒子,就使用伪元素(主要用来做装饰作用))注意:加法和减法的运算符号两边必须有空格;乘法:两个值之间必须有一个数字;除法:左边必须为数字。,(博班如果是鼠标经过盒子,盒子里面的样式会有变化,则使用伪类)2、巧用flex布局,不要总是想着子绝父相加浮动。伪类是一种状态,可以视作选择器,比如说鼠标经过。函数允许在声明 CSS 属性值时执行一些计算。如果想让div元素的大小是整个界面。单位设置网页元素的尺寸,其也是。表示继承父级元素的属性。原创 2022-09-21 20:39:46 · 3206 阅读 · 0 评论 -
vue案例
关键:先将用户输入的数据,利用回车作为切割符,转换为数组后,再利用Math.random产生最忌数,来获取数组的下标,再将挑选出来的数据进行显示。textarea输入的数据,按照空格分行之后,怎么获取每个元素:this.inputdata.split('\n')怎么将date类型的input标签绑v-model的value。1、收集用输入的随机选择的个数--v-model 进行绑定。怎么将date类型的input的时间转换为时间戳。2、收集用户输入的数据--监听回车事件。计算时间戳的时候有点迷糊。原创 2022-09-19 22:26:28 · 416 阅读 · 0 评论 -
Vue使用脚手架出现问题 2
再去C盘里面找到.vue-templates文件夹,如果没有的话就创建一个文件夹。将之前解压后的内容复制到该新建的文件夹中。直接下载安装包,之后再解压。此时就可以成功创建模板了。原创 2022-09-17 17:12:50 · 494 阅读 · 0 评论 -
Vue基础案例-查询窗口
然后使用Object.value('obj') 得到一个包含由属性值的数组,再使用数组索引判断属性值是否等于内容。2、input表单的v-model可以由v-bind:value以及v-on:input组成。Object.keys('obj')得到一个包含由对象属性组成的数组。居中的元素的left= (网页宽 –元素的宽) /2;居中的元素的top =(网页高 –元素的高)/ 2;3、怎么判断有一个数组的对象中是否含有某个属性值。1、怎么判断有一个数组的对象中是否含有某个属性。原创 2022-09-14 15:52:55 · 483 阅读 · 0 评论 -
Vue基础案例-成绩显示
Vue成绩展示原创 2022-09-12 16:43:25 · 2381 阅读 · 0 评论 -
图书管理Vue
computed计算属性的使用。原创 2022-09-08 17:08:09 · 204 阅读 · 0 评论 -
Vue图书馆案例
【代码】Vue图书馆案例。原创 2022-09-05 22:12:24 · 426 阅读 · 0 评论 -
简易的拖拽排序初级版
【代码】简易的拖拽排序初级版。原创 2022-09-05 16:26:06 · 202 阅读 · 0 评论 -
来回拖动文本框
【代码】来回拖动文本框。原创 2022-09-02 11:36:33 · 92 阅读 · 0 评论 -
flex布局
1、调整窗口的时候,子元素始终位于窗口正中央height: 100vh;注意要给父元素一个高度;vh表示相对于可是窗口的高度单位1vh=1/100的可视窗口高度2、圣杯布局--上中下布局使用flex布局,子元素会无法设置宽度:需要使用flex布局指定宽度flex: 0 0 50px参数:放大属性 缩小属性 项目长度...原创 2022-06-05 20:05:06 · 327 阅读 · 2 评论 -
CCS3transform
实现动画效果原创 2022-06-01 19:28:02 · 154 阅读 · 0 评论 -
JS实现加减-简易计算
这个题目前一周左右在小红书刷到,想着就去就做一下,第一版因为思路不清晰,没有完整的实现功能。后来忙着改论文,就一直拖到现在。想着回去在看看这篇,发现已经找不到了。记录错误思路:window.onload = function() { //实现一个简易的计算器 //点击上面的按钮,要输入到输入框中 btns = document.querySelectorAll('button') input = document.querySelector('input...原创 2022-05-30 10:21:29 · 1993 阅读 · 0 评论 -
JS仿qq下拉菜单
功能:1、点击我的好友会展开下拉出具体的好友2、再次点击,会折叠内容3、首次点击某个具体的好友,只有当前这个好友高亮4、再次点击这个好友时,高亮状态就会消失主要练习:js绑定事件慢慢修改小细节:再次点击,会折叠内容时,里面的高亮要全部取消<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv=".原创 2022-05-22 21:36:47 · 117 阅读 · 0 评论 -
Js实现别踩白块
1、offsetTop,与style.top原创 2022-05-15 18:11:03 · 887 阅读 · 0 评论 -
JS电影选票
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title...原创 2022-04-28 09:15:20 · 394 阅读 · 0 评论 -
京东官网首页js+css+html基础
1、让盒子宽度撑满整个页面 width: 100%;2、加了绝对定位(已经脱离了标准流)的盒子不能使用margin:auto 来使盒子居中解决办法: .box { position: absolute; /* 调整水平居中,先左移50%的宽度,在用外边框调整至自身盒子一半的距离,实现居中 */ left: 50%; margin-left: -100px; /* 垂...原创 2022-04-23 14:19:19 · 1440 阅读 · 0 评论 -
ajax上传图像
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title...原创 2022-04-10 17:05:55 · 1278 阅读 · 0 评论 -
模板引擎--新闻案例
主要在于修改js1、获取新闻数据2、定义模板3、编译模板4、定义事件过滤器5、定义补零函数使用模板引擎时,报template not found: Cannot read property ‘value‘ of null错误。var sta = template('box', data)第一个参数一定是script得id,不能是类<!DOCTYPE html><html lang="en"><head> ...原创 2022-04-09 11:03:00 · 2109 阅读 · 0 评论 -
ajax模板引擎
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.原创 2022-04-07 22:06:57 · 1184 阅读 · 0 评论 -
ajax评论案例
bootstrap、form表单得使用把发表评论得区域变成一个表单<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-wid...原创 2022-04-07 20:58:05 · 345 阅读 · 0 评论 -
Ajax进度条
使用:Easy Mock创建api接口注意:若弹出该invalid or unexpected token错误提示信息,说明编写的数据格式有问题,修改为正确格式即可创建成。随后可以在postman中进行验证:ajax通过GET方法获取数据:根据获取出来得阶段数据来更改相对应得进度:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <.原创 2022-04-06 22:34:09 · 1135 阅读 · 0 评论 -
JS实现网易云轮播效果图
1、div宽度直接与浏览器界面宽度一致:width:100%2、怎么让图片在一个绝对定位的盒子中垂直居中显示?继续加绝对定位。然后改变top,和left的值3、采用外置的js文件,需要等到页面加载完毕:window.onload=function(){}4、添加和移除元素的类名:先获取DOM对象,然后通过classList.add('current')(里面不需要加.)和classList.remove()即可添加类型和删除类名。5、事件委托: 比如有100个li,每个li都有相同的click点击原创 2022-04-03 11:28:46 · 1440 阅读 · 0 评论 -
ajax图书管理案例
rows数组中就是:rows.join('')整体添加单引号里面如何加参数语法 可以通过"'+ 参数+'" 即2 双引号 里面加2 单引号 加两个加号 data="'+url+'"str.trim():可以去除字符串两端的空格<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Bootstrap 实例 - 响应...原创 2022-03-31 22:00:32 · 356 阅读 · 0 评论 -
淘宝侧边导航栏+滑动电梯效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title...原创 2022-03-26 10:44:10 · 1965 阅读 · 0 评论 -
jQuery+css+html淘宝购物车模块
注意给checkbox添加事件就是用change()给button添加事件就是用click()原创 2022-03-22 21:18:53 · 4506 阅读 · 1 评论 -
jQuery实现王者手风琴案例
考虑到每个图片的src地址不同,所以自己只会机械性地编<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-s...原创 2022-03-19 11:32:07 · 862 阅读 · 0 评论 -
jQuery高亮图片
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title...原创 2022-03-19 11:30:19 · 917 阅读 · 0 评论 -
jQuery更改css
<script> $(function() { // var flag = 0 // $('div').click(function() { // if (flag == 0) { // $(this).addClass('bg') // flag = 1 // } el...原创 2022-03-17 21:46:12 · 1014 阅读 · 0 评论 -
淘宝精品案例JS、jQuery
自己只会适用原生js来实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">...原创 2022-03-17 20:45:08 · 1086 阅读 · 0 评论 -
HTML+JS+CSS筋斗云导航栏效果
要求:1、鼠标经过某个li,筋斗云跟着到当前的位置2、鼠标离开这个li,筋斗云回到原来的位置3、鼠标点击了某个li,筋斗云就留在点击这个位置<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta nam.原创 2022-03-14 21:53:16 · 2757 阅读 · 1 评论 -
页面返回顶部+淘宝侧边栏
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title...原创 2022-03-12 17:03:28 · 397 阅读 · 0 评论 -
网页轮播图
1、点击左右按钮,页面实现滚动效果2、点击下方焦点,图片也开始滚动切换不能用z-index来改变图片的相应级别,因为要使用滚动切换,(移动)。原创 2022-03-09 22:29:47 · 881 阅读 · 0 评论 -
JS函数封装
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title...原创 2022-03-07 21:45:31 · 1015 阅读 · 0 评论 -
定时器+定位思考
问题一:当不对body清除默认边距时:由于上面一个盒子是相对定位,下面盒子是绝对定位,会出现异动速度不想等的情况在这里容易混淆的是,相对定位的概念:该关键字下,元素先放置在未添加定位时的位置,再在不改变页面布局的前提下调整元素位置(因此会在此元素未添加定位时所在位置留下空白)然后,在页面中的所有元素会默认有一个8像素的外边距:注意html里body自己自带8px的上下左右外边距。在qq浏览器和ie里能够看到body自己是8px的margin,在设置大分区的时候,须要把该marg...原创 2022-03-07 13:07:05 · 83 阅读 · 0 评论 -
动画效果-JS
1、盒子的自动移动 <style> div { width: 100px; height: 100px; background-color: pink; position: absolute; left: 0px; top: 20px } </style> <..原创 2022-03-06 14:53:44 · 184 阅读 · 0 评论 -
仿淘宝固定右侧侧边栏
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title...原创 2022-03-05 21:09:35 · 1942 阅读 · 5 评论 -
仿京东放大镜效果
1、鼠标经过小图片盒子,黄色的遮挡层和大图片显示,离开时就隐藏2个盒子功能2、黄色遮挡层跟着鼠标走把鼠标的坐标给盒子,不断地进行赋值操作把鼠标地坐标给遮挡层不合适,因为遮挡层坐标以父盒子为准首先是获得鼠标在盒子内地坐标然后把数值给遮挡层地left和top值此时用到鼠标移动事件,但是还是在小图片盒子内移动发现,遮挡层位置不对,需要再减去盒子自身高度和宽度地一般遮挡层不能超出小图片盒子范围如果小于0,就把坐标设置为0如果大于遮挡层最大地移动距离,就把坐标设置为最大地移动距原创 2022-03-05 11:04:32 · 2982 阅读 · 3 评论 -
模态框拖拽
1、点击弹出层,回弹出模态框,并且显示半透明的遮挡层2、点击关闭按钮,可以关闭模态框,并且同时关闭灰色半透明遮挡层3、鼠标放到模态框最上面一行,可以按住鼠标拖拽模态框在页面中移动4、鼠标松开,可以停止拖动模态框移动鼠标放到最上面一行的时候,变成十字形状 load.style.cursor = 'move';主要是拖动效果的实现在页面中拖拽的过程:鼠标按下(mousedown)并且移动(mosemove),之后松开鼠标(moseup)拖拽过程:鼠标在移动过程中,获得最新的值..原创 2022-03-03 22:22:28 · 2524 阅读 · 0 评论