随笔分类 -  BOM对象

摘要:<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>我的购物车-品优购</title> <meta name="description" content="品优购JD.COM-专业的综合网上购物商城,销售家 阅读全文
posted @ 2022-04-24 15:56 罗砂 阅读(68) 评论(0) 推荐(0) 编辑
摘要:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv 阅读全文
posted @ 2022-04-24 15:38 罗砂 阅读(63) 评论(0) 推荐(0) 编辑
摘要:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv 阅读全文
posted @ 2022-04-24 15:37 罗砂 阅读(66) 评论(0) 推荐(0) 编辑
摘要:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv 阅读全文
posted @ 2022-04-24 15:36 罗砂 阅读(58) 评论(0) 推荐(0) 编辑
摘要:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv 阅读全文
posted @ 2022-04-24 15:36 罗砂 阅读(32) 评论(0) 推荐(0) 编辑
摘要:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv 阅读全文
posted @ 2022-04-24 15:34 罗砂 阅读(35) 评论(0) 推荐(0) 编辑
摘要:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv 阅读全文
posted @ 2022-04-24 15:33 罗砂 阅读(35) 评论(0) 推荐(0) 编辑
摘要:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv 阅读全文
posted @ 2022-04-24 15:33 罗砂 阅读(72) 评论(0) 推荐(0) 编辑
摘要:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv 阅读全文
posted @ 2022-04-24 15:32 罗砂 阅读(24) 评论(0) 推荐(0) 编辑
摘要:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv 阅读全文
posted @ 2022-04-24 15:31 罗砂 阅读(33) 评论(0) 推荐(0) 编辑
摘要:案例分析 1.把数据存起来,用到本地存储 2.关闭页面,也可以显示用户名,所以用到localStorage 3.打开页面,先判断是否有这个用户名,如果有,就在表单里面显示用户名,并且勾选复选框 4.当复选框发生改变的时候change事件 5.如果勾选,就存储,否则就移除 <!DOCTYPE html 阅读全文
posted @ 2022-04-24 13:08 罗砂 阅读(34) 评论(0) 推荐(0) 编辑
摘要:1.生命周期永久生效,除非手动删除 否则关闭页面也会存在 2.可以多个窗口(页面)共享(同一浏览器可以共享) 3.以键位对的形式存储使用 存储数据: localStorage.setItem() 获取数据: localStorage.getItem() 删除数据: localStorage.remo 阅读全文
posted @ 2022-04-24 11:47 罗砂 阅读(314) 评论(0) 推荐(0) 编辑
摘要:1.生命周期为关闭浏览器窗口 2.在同一个窗口(页面)下数据可以共享 3.以键值对的形式存储使用 存储数据: sessionStorage.setItem() 获取数据: sessionStorage.getItem() 删除数据: sessionStorage.removeItem() 删除所有数 阅读全文
posted @ 2022-04-24 11:35 罗砂 阅读(77) 评论(0) 推荐(0) 编辑
摘要:框架,顾名思义就是一套架构,它会基于自身的特点向用户提供一套较为完整的解决方案。框架的控控制权在框架本身,使用者要按照架所规定的某种规范进行开发。 插件一般是为了解决问题专门存在,其功能单一,并且比较小。 前端常用的框架有Bootstrap、Vue、Angular、React等。既能开发PC端,也能 阅读全文
posted @ 2022-04-24 11:18 罗砂 阅读(48) 评论(0) 推荐(0) 编辑
摘要:实现功能: 页面滚动某个地方就显示,否则隐藏 点击可以返回顶部 下面详细地说明具体的实现步骤: ① 滚动到某个地方后显示 ② 事件:使用scroll页面滚动事件 ③ 如果被卷去的头部(window.pageYOffset)大于某个数值 ④ 点击返回顶部的图片,使用window.scroll(0, 0 阅读全文
posted @ 2022-04-24 09:16 罗砂 阅读(263) 评论(0) 推荐(0) 编辑
摘要:1.touchstart、touchmove、touchend可以实现拖动元素 ⒉但是拖动元素需要当前手指的坐标值我们可以使用targetTouches[0]里面的pageX和pageY 3.移动端拖动的原理︰手指移动中,计算出手指移动的距离。然后用盒子原来的位置+手指移动的距离 4.手指移动的距离 阅读全文
posted @ 2022-04-20 09:52 罗砂 阅读(209) 评论(0) 推荐(0) 编辑
摘要:TouchEvent是一类描述手指在触摸平面(触摸屏,触摸板等) 的状态变化的事件。这类事件用于描述一个或多个触点的移动,触点的增加和减少,等等 touchstart、touchmove、touchend三个事件对象 触摸列表 说明 touches 正在触摸屏幕所有手指的一个列表 targetTou 阅读全文
posted @ 2022-04-20 09:21 罗砂 阅读(186) 评论(0) 推荐(0) 编辑
摘要:<style> div { width: 200px; height: 200px; background-color: coral; } </style> </head> <body> <div></div> </body> <script> var div = document.querySel 阅读全文
posted @ 2022-04-20 08:53 罗砂 阅读(27) 评论(0) 推荐(0) 编辑
摘要:<script> var div = document.querySelector("div"); //触摸事件 div.addEventListener("touchstart", function () { console.log("我摸了你"); }); // 长按显示继续摸 div.addE 阅读全文
posted @ 2022-04-19 21:37 罗砂 阅读(28) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示