一只认学的程序猿-CSDN博客

原创移动端触摸事件

触摸事件touch 与pc端一样，移动端也有自己的事件，不同的就是将pc端的鼠标，变成了人手。触摸事件touch在pc端是无效的，在开发者工具的移动端模拟器时，鼠标的点击事件就会变为触摸事件，是有效的。触摸事件允许多点触控，事件触发的位置信息包含在touches属性中。如果再给body绑定一个点击事件，触摸事件和点击事件都是会触发的。基本触摸事件如下： var bodyDom = document.querySelector('body'); bodyDom.ont

2020-10-03 20:02:26 744

原创 ajax03-使用ajax动态渲染仿短视频界面

依然是主移动端，rem布局，先列出大概结构，方便写css代码，如下： <body> <div class="videoList"> <div class="videoList"> <div class="videoItem"> <div class="videoTop"> <div class="img" style="background-image: url(

2020-10-02 20:15:49 239

原创 ajax02

封装ajax 在我们需要发送get类型的ajax请求时，最简单的需要变化的就是我们请求的地址，还有请求成功后对于数据的操作。因此，可以把这两项作为参数传递到函数中，代码如下： function getAjax1(httpUrl, callBack) { // 1.创建Ajax对象 var xhr = new XMLHttpRequest(); //2.设置请求的方法和路径,相对路径与绝对路径都可 xhr.open('GET', httpUrl); // 3.发送数据

2020-10-01 17:56:07 132

原创 Ajax01

Ajax是什么按照比较官方的语言来说，Ajax就是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新，。这意味着可以在不重新加载整个网页的情况下，对部分网页进行更新。在此之前，再来看一下同步与异步。同步：举个比较生动的例子。我们去饭店吃饭，服务员只为我们一个人服务，首先来点菜，点完菜去做菜，做完菜上菜，等我们吃完结账。在这期间，只与我们发生接触，不会去接触别的顾客，在我们离店后，才会接待下一位顾客，以此类推，这就是同步，显

2020-10-01 17:55:47 137

原创本地存储与todolist-02

todolist 代码如下，使用的是rem布局，按照375px的设计稿，锻炼一下rem布局的使用布局结构: <div class="main"> <div class="header"> <div class="logo">MyTodo</div> <input type="text" placeholder="请输入待办事项" id="myInput"> <

2020-09-30 19:35:12 188

原创本地存储与todolist-01

本地存储本地存储，通俗的讲，就是将web页面中的数据存放到本地。本地存储分为两类：localStorage与sessionStorage localStorage：可以永久存放到本地，但只要清除浏览器缓存，就可以被删除。 sessionStorage：本地存放的数据当次有效，只要将页面关闭，数据就会被清除。使用本地存储无非就是要做这几件事：存数据，取数据，清除数据。 localStorage: 最简单的测试方法，在页面1中： <body> <script>

2020-09-29 20:15:01 142

原创 rem布局

rem r–代表root根，也就是指html。 em–相对单位，也就是相对于html的字体大小单位。没有设定html大小的情况下，1rem=16px，因此下方的div为160px*160px <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-s

2020-09-29 20:14:31 2227

原创移动端与响应式02

媒体查询一般情况下，一个项目会划分为pc端的页面与移动端的页面。还有一种，只需要一页代码，就可以适应pc端与移动端，比如苹果的官方网站。这就需要用到媒体查询@media的操作。

2020-09-29 20:14:07 62

原创移动端与响应式

移动端与响应式01meta标签的viewport配置： meta标签的viewport配置： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- viewport:代表视窗的设置 content=" width=device-width, //宽度等于设备的宽度，浏览器宽度分辨率等于系统分辨

2020-09-28 21:04:44 256 1

一只认学的程序猿