04 2022 档案

摘要:接口 1.接口的概念 使用Ajax请求数据时,被请求的URL地址,就叫做数据接口(简称接口)。同时每个接口必须有请求方式 例如: http://www.liulongbin.top:3006/api/getbooks 获取图书列表的接口(GET请求) http://www.liulongbin.to 阅读全文
posted @ 2022-04-29 09:17 罗砂 阅读(191) 评论(0) 推荐(0) 编辑
摘要:jQuery中的Ajax 1.了解jQuery中的Ajax 浏览器中提供了 XMLHttpRequest用法比较复杂,所以jQuery对XMLHttpRequestv进行了封装,提供了一系列Ajax相关的函数,极大降低了Ajax的使用难度。 jQuery中发起Ajax请求最常用的三种方法如下: $. 阅读全文
posted @ 2022-04-28 17:10 罗砂 阅读(1522) 评论(0) 推荐(0) 编辑
摘要:了解Ajax 2.为什么要学习Ajax 之前所学的技术,只能把网页做的更美观漂亮,或添加一些动画效果,但是,Ajax能让我们轻松实现网页与服务器之间的数据交互 3.Ajax的典型应用场景 用户名检测:注册用户时,通过Ajax的形式,动态检测用户名是否被占用 搜索提示:当输入搜索关键字时,通过Ajax 阅读全文
posted @ 2022-04-28 11:17 罗砂 阅读(31) 评论(0) 推荐(0) 编辑
摘要:服务器对外提供了哪些资源 1.举例网页中常见的资源 文字内容 图片内容 音频内容 视频内容 2.数据也是一种资源 网页中的数据,也是服务器对外提供的一种对外提供的资源、各行各业排行榜等。 如上图:都是数据 3.数据是网页的灵魂 HTML是网页的骨架 CSS是网页的颜值 JavaScript是网页的行 阅读全文
posted @ 2022-04-28 11:00 罗砂 阅读(194) 评论(0) 推荐(0) 编辑
摘要:图解客户端与服务器的通信过程 1.打开浏览器 1.服务器接收到客户端发来的资源请求 2.输入要访问的网站地址 2.服务器在内部处理这次请求,找到相关资源 3.回车,向服务器发起资源请求 3.服务器把找到的资源,响应(发送)給客户端 注意: 1.客户端与服务器之间的通信过程,分为请求-处理-响应三个步 阅读全文
posted @ 2022-04-28 10:00 罗砂 阅读(375) 评论(0) 推荐(0) 编辑
摘要:图解客户端与服务器的通信过程 1.打开浏览器 1.服务器接收到客户端发来的资源请求 2.输入要访问的网站地址 2.服务器在内部处理这次请求,找到相关资源 3.回车,向服务器发起资源请求 3.服务器把找到的资源,响应(发送)給客户端 注意: 1.客户端与服务器之间的通信过程,分为请求-处理-响应三个步 阅读全文
posted @ 2022-04-28 09:44 罗砂 阅读(537) 评论(0) 推荐(0) 编辑
摘要:URL地址的概念 URL(全称UniformResourceLocator)中文叫 统一资源定位符 用于标识互联网上每个资源的唯一资源的唯一存放位置,从而成功访问到对应的资源。 常见的URL举例: http://baidu.com http://taobao.com URL地址的组成部分 URL地址 阅读全文
posted @ 2022-04-28 09:30 罗砂 阅读(461) 评论(0) 推荐(0) 编辑
摘要:上网的目的 上网的本质目的:通过互联网的形式来获取和消费资源 服务器 上网过程中,负责存放和对外提供资源的电脑,叫做服务器。 客户端 上网过程中,负责获取和消费的电脑,叫做客户端。 阅读全文
posted @ 2022-04-28 09:14 罗砂 阅读(49) 评论(0) 推荐(0) 编辑
摘要:学习目标: 客户端与服务器 URL地址 分析网页的打开过程 服务器对外提供了哪些资源 了解Ajax jQuery中的Ajax 接口 案例-图书管理 案例-聊天机器人 阅读全文
posted @ 2022-04-28 09:05 罗砂 阅读(33) 评论(0) 推荐(0) 编辑
摘要:HTTP 协议的三次握手 HTTP(Hypertext Transfer Protocol):超文本传输协议 TCP(Transmission Control Protocol):传输控制协议 1、HTTP协议和TCP/IP协议的区别?答:TCP/IP协议是传输层协议,主要解决数据如何在网络中传输。 阅读全文
posted @ 2022-04-27 09:53 罗砂 阅读(2560) 评论(0) 推荐(0) 编辑
摘要:Web服务器介绍 Web服务器是一个服务器软件 我们可以把静态网页部署到Web服务器上 文本服务器通常只运行静态网页 应用服务器可以运行动态页面 Web服务器和应用服务器通常会一起使用 应用服务器可以运行动态页面 web服务器和应用服务器通常会一起使用 常用的Web服务器 Apache:可以运行在L 阅读全文
posted @ 2022-04-26 15:39 罗砂 阅读(116) 评论(0) 推荐(0) 编辑
摘要:Status Code 200 成功 301 永久重定向 302 临时重定向 404 网页不存在 500 服务器挂了 503 稍后再来 重要 阅读全文
posted @ 2022-04-26 09:58 罗砂 阅读(21) 评论(0) 推荐(0) 编辑
摘要:给服务器穿Request服务器反馈一个Response 阅读全文
posted @ 2022-04-26 09:49 罗砂 阅读(32) 评论(0) 推荐(0) 编辑
摘要:在浏览器中随便输入一个网页地址就默认发送了GET请求 HTMLform中可以指定get还是post <form action="1.php" method="post"> 请输入文字:<input type="text" name="word" value="" /> <input type="su 阅读全文
posted @ 2022-04-26 09:30 罗砂 阅读(59) 评论(0) 推荐(0) 编辑
摘要:HTTP = Hypertext Transfer Protocol. 无状态性:每次请求都是相互独立的 Request Response 现在的版本是1.1 默认端口是80 阅读全文
posted @ 2022-04-25 14:15 罗砂 阅读(22) 评论(0) 推荐(0) 编辑
摘要:用于internet上的控制文件的双向传输。 同时,它也是一个应用程序(Application)。 基于不同的操作系统有不同的FTP应用程序,而所有这些应用程序都遵守同一种协议以传输文件 Fftp默认窗口是21 TCP 链接ftp ftp hostname[port] ftp open hostna 阅读全文
posted @ 2022-04-25 13:45 罗砂 阅读(362) 评论(0) 推荐(0) 编辑
摘要:应用层 DNS Domain Name System 域名解析系统 UDP 53 域名就等于是网址 在Internet上域名与IP地址之间是一一对应的, 在域名虽然便于人们记忆,但机器之间只能互相人认识IP地址, 他们之间的转换工作称为域名解析, 域名解析需要由专门的域名解析服务器来完成,DNS就是 阅读全文
posted @ 2022-04-25 13:18 罗砂 阅读(67) 评论(0) 推荐(0) 编辑
摘要:Transmission Control Protocol TCP是传输控制协议 连接建立 可靠性传输 链接终止 简单一点说,两点之间的可靠连接 想一想之前学习的socket User Datagram Protocol 一种非连接,不可靠的传输方式 但是好处在于效率高,速度快,比较合适音频和视频 阅读全文
posted @ 2022-04-25 11:41 罗砂 阅读(29) 评论(0) 推荐(0) 编辑
摘要:Internet Protocol 相当于网络中的一个节点,类似于地址,我们称之为IP地址 同一个网络中,IP地址具有唯一性 IPv4网络使用32位地址,以分十进制表示,如192.168.0.1。 127.0.0.1:本机 192.168.*.* 10.*.*.*:内部局域网 其他:外部广域网 IP 阅读全文
posted @ 2022-04-25 11:29 罗砂 阅读(264) 评论(0) 推荐(0) 编辑
摘要:相关配置 title:标题组件 tooltip:提示框组件 legend:图例组件 toolbox:工具栏 grid:直角坐标系内绘图网格 xAjxis:指教坐标系grid中的x轴 yAjxis:指教坐标系grid中的y轴 series:系列列表。每个系列通过type决定自己的图标类型(什么类型的图 阅读全文
posted @ 2022-04-25 09:55 罗砂 阅读(24) 评论(0) 推荐(0) 编辑
摘要:<!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) 编辑
摘要:<!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 罗砂 阅读(23) 评论(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-eq 阅读全文
posted @ 2022-04-24 15:30 罗砂 阅读(53) 评论(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:29 罗砂 阅读(16) 评论(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:29 罗砂 阅读(47) 评论(0) 推荐(0) 编辑
摘要:链式编程 链式编程时是为了节省代码量,看起来更优雅。 $(this).css('color','red').sibling().css('color',' ') <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta 阅读全文
posted @ 2022-04-24 15:28 罗砂 阅读(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:00 罗砂 阅读(43) 评论(0) 推荐(0) 编辑
摘要:jQuery设置样式 $('div').css('属性','值') 隐式迭代 遍历内部DOM元素(伪数组形式存储)的过程就叫做隐式迭代。 简单理解:给匹配到所有元素进行循环遍历,执行相应的方法,而不用我们再进行循环,简化我们的操作,方便我们调用。 <!DOCTYPE html> <html lang 阅读全文
posted @ 2022-04-24 14:54 罗砂 阅读(90) 评论(0) 推荐(0) 编辑
摘要:原生JS获取元素方式很多,很杂,而且兼容性情况不一致,因此jQuery给我们做了封装,使获取元素统一标准 $("选择器") //里面选择器直接写CSS选择器即可,但是要加引号 基本选择器 名称 用法 描述 ID选择器 $("#id") 获取指定ID的元素 全选选择器 $(" * ") 匹配所有元素 阅读全文
posted @ 2022-04-24 14:45 罗砂 阅读(27) 评论(0) 推荐(0) 编辑
摘要:1.用原生JS来获取的对象就是DOM对象 2.jQuery方法获取的元素就是jQuery对象 3.jQuery对象本质是:利用$对DOM对象包装后产生的对象(伪数组形式储存) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> 阅读全文
posted @ 2022-04-24 14:14 罗砂 阅读(89) 评论(0) 推荐(0) 编辑
摘要:1.$是jQuery的别称,在代码中可以使用jQuery代替$,但一般为了方便,通常都直接使用$。 2.$是jQuery的顶级对象,相当于原生JavaScript中的window。把元素利用$包装成jQuery对象,就可以调用jQuery的方法 <!DOCTYPE html> <html lang= 阅读全文
posted @ 2022-04-24 13:54 罗砂 阅读(69) 评论(0) 推荐(0) 编辑
摘要:1.等着DOM结构渲染完毕即可执行内部代码,不必等到所有外部资源加载完成,jQuery帮我们完成封装。 2.相当于原生js中的DOMContentLoaded。 3.不通风与原生js的load事件是等页面文档、外部的js文件、css文件、图片加载完毕才执行内部代码 4.更推荐使用第一种方式 <!DO 阅读全文
posted @ 2022-04-24 13:48 罗砂 阅读(42) 评论(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) 编辑
摘要:<style> * { margin: 0; padding: 0; } div { width: 1200px; margin: 10px auto; } .header { margin-top: 10px; height: 100px; background-color: hsl(39, 87 阅读全文
posted @ 2022-04-19 13:42 罗砂 阅读(25) 评论(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-e 阅读全文
posted @ 2022-04-19 10:09 罗砂 阅读(23) 评论(0) 推荐(0) 编辑
摘要:核心原理:通过定时器setlnterval()不断移动盒子位置 实现步骤: 1.获得盒子当前位置 2.让盒子在当前位置加上1个移动的距离 3.利用定时器不断重复这个操作 4.加上一个结束定时器的条件 5.注意此元素需要添加定位,才能使用element.style.left <body> <div>< 阅读全文
posted @ 2022-04-18 17:09 罗砂 阅读(36) 评论(0) 推荐(0) 编辑
摘要:当鼠标移动到元素上时就会触发mouseenter事件 类似mouseover,他们两个之间的差别是 mouseover 鼠标经过自身盒子会触发,经过子盒子还会触发。mouseenter只会经过自身盒子触发 之所以这样,就是因为mouseenter不会冒泡 阅读全文
posted @ 2022-04-18 16:41 罗砂 阅读(62) 评论(0) 推荐(0) 编辑
摘要:1.offset系列经常用于获得元素位置 offsetTop 2.clicent 经常用于获取元素大小 clicentWidth clientHeight 3.scroll经常用于获取滚动距离 scrollTop scrollLeft 4.注意:页面滚动的距离通过window.pageXOffset 阅读全文
posted @ 2022-04-18 16:22 罗砂 阅读(23) 评论(0) 推荐(0) 编辑
摘要:scroll翻译过来就是滚动的,我们使用scroll系列的相关属性可以动态的得到该元素大小 滚动距离等。 <style> div { width: 100px; height: 70px; background-color: pink; border: 3px solid red; } </styl 阅读全文
posted @ 2022-04-18 15:46 罗砂 阅读(50) 评论(0) 推荐(0) 编辑
摘要:<script> // 1.立刻执行函数:不需要调用 立马能够自己执行的函数 function fn() { console.log(1); } fn(); // 2.写法 也可以传递参数进来 // 1.(function(){})() 或者 2.(function(){}()) (function 阅读全文
posted @ 2022-04-18 15:09 罗砂 阅读(28) 评论(0) 推荐(0) 编辑
摘要:client翻译过来就是客户端,我们使用client系列的相关属性来获取元素可视区的相关信息。 通过client系列的相关属性可以动态的得到该元素的边框大小、元素大小等。 <style> div { width: 500px; height: 500px; background-color: aqu 阅读全文
posted @ 2022-04-18 14:51 罗砂 阅读(66) 评论(0) 推荐(0) 编辑
摘要:当我们在电商网站上购买商品时,经常会看到这样一种效果,当我们把鼠标放到我们浏览的商品图片上时,会出现类似放大镜一样的一定区域的放大效果,方便消费者观察商品。今天我对这一技术,进行简单实现,实现图片放大镜效果。 我在代码中进行了代码编写的思路的说明和详细的代码注释,方便读者,请看代码: 1 <!doc 阅读全文
posted @ 2022-04-18 14:12 罗砂 阅读(55) 评论(0) 推荐(0) 编辑
摘要:案例分析: 1,点击弹出层,会弹出模态框,并且显示灰色半透明的遮挡层。 2,点击关闭按钮,可以关闭模态框,并且同时关闭灰色半透明遮挡层。 3,鼠标放到模态框最上面一行,可以按住鼠标拖拽模态框在页面中移动。mousedown mousemove 4,鼠标松开,可以停止模态框移动 mouseup 5, 阅读全文
posted @ 2022-04-18 14:09 罗砂 阅读(89) 评论(0) 推荐(0) 编辑
摘要:offset翻译过来就是偏移量,我们使用offset系列相关属性可以动态的得到该元素的位置(偏移)、大小等。 ●获得元素距离带有定位父元素的位置 ●获得元素自身的大小(宽度高度) ●注意:返回的数值都不带单位 <style> .father { width: 500px; height: 500px 阅读全文
posted @ 2022-04-18 13:41 罗砂 阅读(56) 评论(0) 推荐(0) 编辑
摘要:<body> <button>点击我</button> </body> <script> // location对象方法; // location.assign() 跟href一样,可以跳转页面(也称为重定向页面) // location.replace() 替换当前页面,因为不记录历史,所以不能后 阅读全文
posted @ 2022-04-18 13:25 罗砂 阅读(162) 评论(0) 推荐(0) 编辑
摘要:第一个页面 <body> <form action="11.5获取URL参数跨页面输入.html"> 用户名: <input type="text " name="uname" /> <input type="submit" value="登录" /> </form> </body> 第二个页面 < 阅读全文
posted @ 2022-04-18 13:24 罗砂 阅读(37) 评论(0) 推荐(0) 编辑
摘要:<body> <button>跳转</button> <div></div> </body> <script> var btn = document.querySelector("button"); var div = document.querySelector("div"); btn.addEv 阅读全文
posted @ 2022-04-18 13:22 罗砂 阅读(25) 评论(0) 推荐(0) 编辑
摘要:同步 是一个一个执行的 异步 是很多个同时执行的 他们的区别就是执行顺序不同 阅读全文
posted @ 2022-04-18 13:21 罗砂 阅读(26) 评论(0) 推荐(0) 编辑
摘要:<body> <button>发送</button> </body> <script> var btn = document.querySelector("button"); var time = 3; //定义剩下的秒数 btn.addEventListener("click", function 阅读全文
posted @ 2022-04-18 13:21 罗砂 阅读(31) 评论(0) 推荐(0) 编辑
摘要:清除定时器clearInterval: <body> <button class="kai">开启定时器</button> <button class="guan">关闭定时器</button> </body> <script> var begin = document.querySelector( 阅读全文
posted @ 2022-04-18 13:20 罗砂 阅读(180) 评论(0) 推荐(0) 编辑
摘要:<style> div { width: 400px; height: 200px; background-color: cornsilk; } span { float: left; margin-right: 10px; background-color: black; width: 50px; 阅读全文
posted @ 2022-04-18 13:19 罗砂 阅读(104) 评论(0) 推荐(0) 编辑
摘要:以毫秒的计算 定时器setTimeout( ) <script> // 以毫秒的计算 定时器setTimeout( ) // 第一种方法 setTimeout(function () { console.log("三秒钟到了"); }, 3000); </script> <script> // 第二 阅读全文
posted @ 2022-04-18 13:11 罗砂 阅读(59) 评论(0) 推荐(0) 编辑
摘要:window.onresize是调整窗口大小加载事件,当触发时就调用的处理函数 注意 1.只要窗口大小发生像素变化,就会触发这个事件 2.我们经常利用这个事件完成响应式布局。window.innerWidth 当前屏幕的宽度 <script> // window.onresize是调整窗口大小加载事 阅读全文
posted @ 2022-04-18 13:10 罗砂 阅读(163) 评论(0) 推荐(0) 编辑
摘要:核心思路:监测用户是否按下s键,如果按下s键就把光标定位到搜索框里面 使用键盘事件对象里面的keyCode判断用户按下的是否是s键 搜索框获得焦点:使用js里面的focus()方法 <body> <input type="text" /> </body> <script> var search = 阅读全文
posted @ 2022-04-18 11:35 罗砂 阅读(109) 评论(0) 推荐(0) 编辑
摘要:<script> document.addEventListener("keyup", function () { console.log("我弹起了"); }); // keypress按键按下的时候触发 不能识别功能键 比如ctr1 shift 左右箭头等 document.addEventLi 阅读全文
posted @ 2022-04-18 11:34 罗砂 阅读(40) 评论(0) 推荐(0) 编辑
摘要:鼠标不断的移动,使用鼠标移动事件:mousemove 在页面中移动,给document注册事件 图片要移动距离,而且不占位置,我们使用绝对定位即可 核心原理∶每次鼠标移动,我们都会获得最新的鼠标坐标,把这个x和y坐标做为图片的 top和left值就可以移动图片 <body> <img src="/i 阅读全文
posted @ 2022-04-18 11:33 罗砂 阅读(38) 评论(0) 推荐(0) 编辑
摘要:<style> body { height: 3000px; } </style> </head> <body> <script> // 鼠标事件对象 MouseEvent document.addEventListener("click", function (e) { // 1.client 鼠 阅读全文
posted @ 2022-04-18 11:32 罗砂 阅读(148) 评论(0) 推荐(0) 编辑
摘要:<body> 这句话有自己的想法 </body> <script> // 1.禁止鼠标右键菜单 // contextmenu主要控制应该何时显示上下文菜单,主要用于程序员取消默认上下文菜单 document.addEventListener("contextmenu", function (e) { 阅读全文
posted @ 2022-04-18 11:32 罗砂 阅读(32) 评论(0) 推荐(0) 编辑
摘要:<script> // 常见事件对象的属性和方法 // 1.返回事件类型 var div = document.querySelector("div"); div.addEventListener("click", fn); div.addEventListener("mouseover", fn) 阅读全文
posted @ 2022-04-18 11:31 罗砂 阅读(62) 评论(0) 推荐(0) 编辑
摘要:<body> <div>123</div> <ul> <li>abc</li> <li>abc</li> <li>abc</li> </ul> </body> <script> // 常见事件对象的属性和方法 // 1.e.target 返回的是触发事件的对象(元素) this返回的是绑定事件的对象 阅读全文
posted @ 2022-04-18 11:31 罗砂 阅读(51) 评论(0) 推荐(0) 编辑
摘要:<style> ul { list-style: none; } li { width: 300px; } </style> </head> <body> <ul> <li>知否知否,点我应有弹窗在手</li> <li>知否知否,点我应有弹窗在手</li> <li>知否知否,点我应有弹窗在手</li 阅读全文
posted @ 2022-04-18 11:30 罗砂 阅读(267) 评论(0) 推荐(0) 编辑
摘要:<body> <button>注册事件</button> </body> <script> let arr = "asdfdgd"; let aar = 0; for (let i = 0; i < arr.length; i++) { aar += arr[i]; } console.log(aa 阅读全文
posted @ 2022-04-18 11:29 罗砂 阅读(21) 评论(0) 推荐(0) 编辑
摘要:<body onclick="alert('body')"> <!--html--> <div style="width: 400px; height: 400px; background: red" onclick="alert(this.style.background)" > <div id= 阅读全文
posted @ 2022-04-18 11:29 罗砂 阅读(32) 评论(0) 推荐(0) 编辑
摘要:DOM重点核心-基础 获取元素有哪两种方法方法? 1 利用DOM提供的方法获取元素。 document.getElementbyId(),document.getELmenntbyTagName() document,getElementsByClassName('') document.query 阅读全文
posted @ 2022-04-18 11:28 罗砂 阅读(35) 评论(0) 推荐(0) 编辑
摘要:document.write(); element.innerHTML; document.createElement(); 区别 document.write是直接将内容写入页面的内容流,但是文档流执行完毕,则它会导致页面全部重绘 innerHTML是将内容写入某个DOM节点,不会导致页面全部重绘 阅读全文
posted @ 2022-04-18 11:27 罗砂 阅读(24) 评论(0) 推荐(0) 编辑
摘要:<style> * { padding: 0; margin: 0; } table { width: 500px; margin: 100px auto; border-collapse: collapse; /*边框合并模式*/ text-align: center; } td, th { bo 阅读全文
posted @ 2022-04-18 11:26 罗砂 阅读(92) 评论(0) 推荐(0) 编辑
摘要:复制节点 node.cloneNode() node.cloneNode()方法返回调用该方法的节点的一个副本。也称为克隆节点/拷贝节点 <body> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </body> <script> let ul = docu 阅读全文
posted @ 2022-04-18 11:25 罗砂 阅读(61) 评论(0) 推荐(0) 编辑
摘要:当我们把文本域里面的值赋值给li的时候,多添加一个删除的链接 需要把所有链接获取过来,当我们点击当前的链接的时候,删除当亲链接所在的li 阻止链接跳转需要添加JavaScript:void(0);或者JavaScript:; <body> <button>删除</button> <ul> <li>张 阅读全文
posted @ 2022-04-18 11:24 罗砂 阅读(57) 评论(0) 推荐(0) 编辑
摘要:添加节点 1. node.appendChild(child) node.appendChild( ) 方法将一个节点添加到指定父节点列表末尾。类似于css里面的after <body> <ul> <li>123</li> </ul> </body> <script> // 1.创建节点元素节点 v 阅读全文
posted @ 2022-04-18 11:23 罗砂 阅读(75) 评论(0) 推荐(0) 编辑
摘要:<style> ul { list-style: none; } ul li { background-color: pink; line-height: 40px; margin: 10px; width: 300px; } ul li a { color: red; float: right; 阅读全文
posted @ 2022-04-18 11:23 罗砂 阅读(80) 评论(0) 推荐(0) 编辑
摘要:<body> <ul> <li id="top">微博</li> <li class="hide">私信</li> <li class="hide">评论</li> <li class="hide">@我</li> </ul> </body> <script> // 大概方法: // 1.获取元素 阅读全文
posted @ 2022-04-18 11:21 罗砂 阅读(70) 评论(0) 推荐(0) 编辑
摘要:<body> <div>我是div</div> <span>我是span</span> </body> <script> var div = document.querySelector("div"); // 1.nextSibling 下一个兄弟节点 包含节点或者 文本节点等等 console.l 阅读全文
posted @ 2022-04-18 11:21 罗砂 阅读(62) 评论(0) 推荐(0) 编辑
摘要:<body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </body> <script> let ul = document.querySelector("ul"); // 2.children 实际开发的写法 阅读全文
posted @ 2022-04-18 11:20 罗砂 阅读(37) 评论(0) 推荐(0) 编辑
摘要:parentNode.children(非标准); parentNode.children是一个只读属性,返回所有的子元素节点。 它只返回子元素节点,其余节点不返回(重点掌握) 虽然children是一个非标准,但是得到了各个浏览器的支持,因此我们可以放心使用 DOM提供的获取 (API)获取 <b 阅读全文
posted @ 2022-04-18 11:19 罗砂 阅读(46) 评论(0) 推荐(0) 编辑
摘要:<style> * { padding: 0; margin: 0; } .box { width: 500px; height: 200px; border: 1px solid #ccc; margin: 50px auto; overflow: hidden; } ul { width: 60 阅读全文
posted @ 2022-04-18 11:18 罗砂 阅读(33) 评论(0) 推荐(0) 编辑
摘要:<body> <div class="box"> <span class="erweima">**</span> </div> </body> <script> // 1.父节点 parentNode let erweima = document.querySelector(".erweima"); 阅读全文
posted @ 2022-04-18 11:18 罗砂 阅读(44) 评论(0) 推荐(0) 编辑
摘要:1.获取 属性值 element ?属性 获取属性值 element.getAttribute('属性') 区别: element.属性 获取内置属性值(元素本身自带属性) element.getAttribute('属性');主要获得自定义的属性(标准)我们程序员自定义的属性 <body> <di 阅读全文
posted @ 2022-04-18 11:17 罗砂 阅读(401) 评论(0) 推荐(0) 编辑
摘要:<style> * { margin: 0; padding: 0; } table { width: 500px; position: relative; margin: 100px auto; border-collapse: collapse; border: 1px solid #d7d7d 阅读全文
posted @ 2022-04-18 11:16 罗砂 阅读(114) 评论(0) 推荐(0) 编辑
摘要:<body> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <button>按钮4</button> <button>按钮5</button> </body> <script> // 获取所有按钮元素 let btns 阅读全文
posted @ 2022-04-18 11:15 罗砂 阅读(34) 评论(0) 推荐(0) 编辑
摘要:<style> * { margin: 0; padding: 0; box-sizing: border-box; } li { list-style: none; } img { border: 0px; vertical-align: middle; width: 192px; } div { 阅读全文
posted @ 2022-04-18 11:15 罗砂 阅读(27) 评论(0) 推荐(0) 编辑
摘要:<style> input { color: #777777; } </style> </head> <body> <input type="text" value="手机" /> </body> <script> let ipt = document.querySelector("input"); 阅读全文
posted @ 2022-04-18 11:14 罗砂 阅读(60) 评论(0) 推荐(0) 编辑
摘要:<style type="text/css"> #box { width: 250px; margin: 100px auto; } #box li { width: 24px; height: 24px; float: left; margin: 10px; background-color: p 阅读全文
posted @ 2022-04-18 11:13 罗砂 阅读(31) 评论(0) 推荐(0) 编辑
摘要:<style> div { width: 50px; height: 50px; background-color: aquamarine; } </style> </head> <body> <div>1</div> </body> <script> let dv = document.query 阅读全文
posted @ 2022-04-18 11:12 罗砂 阅读(17) 评论(0) 推荐(0) 编辑
摘要:<style> #dv1 { width: 100px; height: 100px; background-color: rgb(232, 121, 217); } #dv2 { width: 10px; height: 10px; background-color: black; float: 阅读全文
posted @ 2022-04-18 11:12 罗砂 阅读(19) 评论(0) 推荐(0) 编辑
摘要:<body> <button>按钮</button> <input type="text" value="输入内容" /> </body> <script> // 1.获取元素 var btn = document.querySelector("button"); var input = docum 阅读全文
posted @ 2022-04-18 11:11 罗砂 阅读(32) 评论(0) 推荐(0) 编辑
摘要:<body> 密码:<input type="password" /> <button>眼睛</button> </body> <script> let ipt = document.querySelector("input"); let btn = document.querySelector(" 阅读全文
posted @ 2022-04-18 11:11 罗砂 阅读(89) 评论(0) 推荐(0) 编辑
摘要:根据系统不同时间来判断,所以需要用到日期内置对象 利用多分支语句来设置不同的图片 需要一个图片,并且根据时间修改图片,就需要用到操作元素src属性 需要一个div元素,显示不同问候语,修改元素内容即可 <script> // 1.获取元素 let img = document.querySelect 阅读全文
posted @ 2022-04-18 11:10 罗砂 阅读(46) 评论(0) 推荐(0) 编辑
摘要:点击图片body就变成图片 修改元素属性 src 1.获取元素 var one = document.getElementById("one"); var tu = document.getElementById("tu"); var img = document.querySelector("im 阅读全文
posted @ 2022-04-18 11:07 罗砂 阅读(36) 评论(0) 推荐(0) 编辑
摘要:element.innerText 从起始位置到终止位置的内容,但它去除html标签,同时空格和换行也会去掉 element.innerHTML 起始位置到终点位置的全部内容。包括HTML标签,同时保留空格和换行 innerText和innerHTML的区别 1. innerText 不认识html 阅读全文
posted @ 2022-04-18 11:05 罗砂 阅读(75) 评论(0) 推荐(0) 编辑
摘要:<style> div { width: 300px; height: 30px; line-height: 30px; color: #fff; background-color: pink; } </style> <body> <button id="btn">显示当前时间</button> < 阅读全文
posted @ 2022-04-18 11:02 罗砂 阅读(19) 评论(0) 推荐(0) 编辑
摘要:1.获取事件源2.注册事件(绑定事件)3.添加事件处理程序(采用函数赋值形式) <script> var dianji = document.getElementById("dianji"); dianji.onclick = function () { console.log("我被选中了"); 阅读全文
posted @ 2022-04-18 11:01 罗砂 阅读(40) 评论(0) 推荐(0) 编辑
摘要:JavaScript使我们有能力创建动态页面,而事件是可以被JavaScript侦测到的行为 简单理解:触发 响应机制 网页中的每个元素都可以产生每个元素都可以生产某些元素可以触发JavaScript 的事件,例如,我们可以在用户点击某个按钮时产生一个事件,然后去执行某些操作 点击一个按钮,弹出对话 阅读全文
posted @ 2022-04-18 11:00 罗砂 阅读(393) 评论(0) 推荐(0) 编辑
摘要:<body> <div class="box">盒子1</div> <div class="box">盒子2</div> <div id="nav"> <ul> <li>首页</li> <li>产品</li> </ul> </div> </body> <script> // 1.getElement 阅读全文
posted @ 2022-04-18 10:59 罗砂 阅读(49) 评论(0) 推荐(0) 编辑
摘要:<script> // 1.获取body 元素 var body1 = document.body; console.log(body1); // 2.获取html元素 var html1 = document.html; //这样是不能获取到html元素的 console.log(html1); 阅读全文
posted @ 2022-04-18 10:59 罗砂 阅读(57) 评论(0) 推荐(0) 编辑
摘要:<body> <ul> <li>知否知否0</li> <li>知否知否1</li> <li>知否知否2</li> <li>知否知否3</li> <li>知否知否4</li> <li>知否知否5</li> </ul> <ol id="ol1"> <li>张三1</li> <li>李四2</li> <l 阅读全文
posted @ 2022-04-18 10:58 罗砂 阅读(74) 评论(0) 推荐(0) 编辑
摘要:1.因为我们文档页面从上往下加载,所以先得有标签 所以我们script写到标签的下面 2.get 获得element 元素by通过 驼峰命名法 3.参数 id是大小写敏感的字符串 4.返回的是一个元素对象 <script> var itmer = document.getElementById("t 阅读全文
posted @ 2022-04-18 10:57 罗砂 阅读(146) 评论(0) 推荐(0) 编辑
摘要:什么是DOM 文档对象模型,是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口 W#C已经定义一系列的DOM接口,通过这些DOM接口可以改变网页的内容、结构样式 DOM 树 文档:一个页面就是文档,DOM中使用document表示 元素:页面中的所有标签都是元素,DOM中使用e 阅读全文
posted @ 2022-04-18 10:56 罗砂 阅读(40) 评论(0) 推荐(0) 编辑
摘要:函数的形参也可以看做是飞个变量,当我们把引用类型变量传给形参时, 其实是把变量在栈空间里保存的堆地址复制给了形参, 形参和实参其实保存的是同一个堆地址, 所以操作的是同一个对象。 <script> function Persson(name) { this.name = name; } functi 阅读全文
posted @ 2022-04-13 09:41 罗砂 阅读(25) 评论(0) 推荐(0) 编辑
摘要:函数的形参也可以看做是一个变量,当我们把一个值类型变量作为参数传给函数的形参 时,其实是把变量在栈空间里的值复制了一份给形参,那么在方法内部对形参做任何修改, 都不会影响到的外部变量。 <script> function fn(a) { a++; console.log(a); } var a = 阅读全文
posted @ 2022-04-13 09:39 罗砂 阅读(30) 评论(0) 推荐(0) 编辑
摘要:简单类型又叫做基本数据类型或者值类型,复杂类型又叫做引用类型 值类型:简单数据类型/基本数据类型,在存储时变量中存储的是值本身,因此叫做值类型 String, Number, Boolean, undefined ,null 简单数据类型null var time = null; console.l 阅读全文
posted @ 2022-04-13 09:38 罗砂 阅读(31) 评论(0) 推荐(0) 编辑
摘要:<script> // 替换字符串 replace('被替换的字符','替换为的字符') 它只会替换掉第一个字符 var str = "andyandy "; console.log(str.replace("a, b")); //把a替换掉换成b // 有一个字符串'abcoefoxyozzopp 阅读全文
posted @ 2022-04-13 09:37 罗砂 阅读(51) 评论(0) 推荐(0) 编辑
摘要:<script> // concat(str1,str2,str3...) concat()方法用于连接两个或多个字符串,等于+,+更常用 // 字符串操作方法 //1.concat('字符串1','字符串2') var str = "andy"; console.log(str.concat("r 阅读全文
posted @ 2022-04-13 09:36 罗砂 阅读(68) 评论(0) 推荐(0) 编辑
摘要:核心算法:利用 charAt( ) 遍历这个字符串 把每个字符串存储给对象,如果对象没有该属性,就为1,如果有就+1 遍历对象,得到最大值和该字符 <script> var str = "ahfoshfmrjxheofh"; var h = {}; for (let i = 0; i < str.l 阅读全文
posted @ 2022-04-13 09:35 罗砂 阅读(49) 评论(0) 推荐(0) 编辑
摘要:charAt(index) 返回指定位置的字符(index 字符串你的索引号) str.charAt(0) charCodeAt(index) 获取指定位置处字符的ASCII码(index索引号) str.charCodeAt(0) str[index] 过去指定位置处字符 HTML5,IE8+支持 阅读全文
posted @ 2022-04-13 09:34 罗砂 阅读(71) 评论(0) 推荐(0) 编辑
摘要:查找出字符串中所有w出现的位置以及次数 核心算法:先查找出第一个w出现的位置 然后 只要indexOf返回的结果不是-1就继续往后查找 因为indexOf只能查找到第一个,所以后面的查找,利用第二次参数,当前索引加1,从而继续查找 <script> var arr = "qwrysfththyjsf 阅读全文
posted @ 2022-04-13 09:33 罗砂 阅读(56) 评论(0) 推荐(0) 编辑
摘要:<script> // 指的是里面的值不变,虽然看上去可以改变内容,但其实是地址变了,内存中新开辟了一个内存空间 var str = "abc"; str = "hello"; // 当重新给str赋值的时候,常量'abc'不会被修改,依然在内存中 // 重新给字符串赋值,会重新在内存中开辟空间,这 阅读全文
posted @ 2022-04-13 09:30 罗砂 阅读(41) 评论(0) 推荐(0) 编辑
摘要:<script> // 字符串所有方法,都不会修改字符串本身(字符串是不可变的),操作完成会返回一个新的字符串 // 字符串对象 根据字符返回位置 str.indexOf('要查找的字符串',[起始的位置]) var str = "改革春风吹满地"; console.log(str.indexOf( 阅读全文
posted @ 2022-04-13 09:30 罗砂 阅读(32) 评论(0) 推荐(0) 编辑
摘要:toString( ) 把数组转换成字符串,逗号分隔每一项 返回一个字符串 join('分隔符') 方法用于把数组中的所有元素转换为一个字符串 返回一个字符串 <script> var arr = ["pink", "blue", "red"]; console.log(arr.toString() 阅读全文
posted @ 2022-04-13 09:29 罗砂 阅读(487) 评论(0) 推荐(0) 编辑
摘要:<script> // 封装一个 去重的函数 unique 独一无二的 function unique(arr) { var newArr = []; for (var i = 0; i < arr.length; i++) { if (newArr.indexOf(arr[i]) -1) { ne 阅读全文
posted @ 2022-04-13 09:28 罗砂 阅读(21) 评论(0) 推荐(0) 编辑
摘要:indexOf( ) 数组中查找给定的第一个索引 如果存在返回索引 如果不存在,则返回-1 它只返回第一个满足条件的索引号 它如果在该数组里面找不到元素,则返回的是 - 1 <script> var arr = ["red", "blue", "pink", "green"]; console.lo 阅读全文
posted @ 2022-04-13 09:27 罗砂 阅读(270) 评论(0) 推荐(0) 编辑
摘要:<script> // 数组排序 // 1.反转数组 var arr = ["pink", "blue", "red"]; arr.reverse(); //翻转数组 console.log(arr); // 2.冒泡排序 // sort 可以实现冒泡排序 //var arr1 = [1, 4, 3 阅读全文
posted @ 2022-04-13 09:26 罗砂 阅读(24) 评论(0) 推荐(0) 编辑
摘要:添加删除数组元素方法 1.push( ) 在我们数组的末尾添加一个或多个元素 var a = [1, 2, 3]; a.push("老四"); console.log(a); push是可以给数组追加新的元素 push( ) 参数直接写 数组元素就可以了 push完毕之后,返回的结果是 新数组的长度 阅读全文
posted @ 2022-04-13 09:25 罗砂 阅读(68) 评论(0) 推荐(0) 编辑
摘要:<script> var arr = [1500, 1200, 2000, 2100, 1800]; var a = []; for (var i = 0; i < arr.length; i++) { if (arr[i] < 2000) { // a[a.length] = arr[i]; a. 阅读全文
posted @ 2022-04-13 09:25 罗砂 阅读(47) 评论(0) 推荐(0) 编辑
摘要:<script> // 反转数组 function reverse(arr) { if (arr instanceof Array) { let newArr = []; for (let i = arr.length - 1; i >= 0; i--) { newArr[newArr.length 阅读全文
posted @ 2022-04-13 09:22 罗砂 阅读(45) 评论(0) 推荐(0) 编辑
摘要:创建数组的两种方式 1.利用数组字面量 var arr = [1, 2, 3]; console.log(arr); 2.利用new Array() var arr1 = new Array(); //创建了一个空数组 var arr1 = new Array(2);//这个2表示数组长度为2里面有 阅读全文
posted @ 2022-04-13 09:21 罗砂 阅读(179) 评论(0) 推荐(0) 编辑
摘要:1.核心算法:输入的时间减去现在的时间就是还剩多少时间,即倒计时,但是不能拿着时分秒 相减,比如05分减去25分,结果会是负数 2.用时间戳来做。用户输入时间的毫秒数减去现在时间的总的毫秒数,得到的就是剩余时间的毫秒数。 3.把剩余时间总的毫秒数转换为天、时、分、秒(时间戳转换为时分秒) 转换公式为 阅读全文
posted @ 2022-04-13 09:20 罗砂 阅读(147) 评论(0) 推荐(0) 编辑
摘要:.Ext.Date.now(); 返回当前时间 毫秒数 Ext.Date.now(); //1474423758166 阅读全文
posted @ 2022-04-13 09:18 罗砂 阅读(41) 评论(0) 推荐(0) 编辑
摘要:<script> var date = new Date(); console.log(date.getHours()); //时 console.log(date.getMinutes()); //分 console.log(date.getSeconds()); //秒 // 封装一个函数返回当 阅读全文
posted @ 2022-04-13 09:16 罗砂 阅读(138) 评论(0) 推荐(0) 编辑
摘要:<script> // 我们想要2019-8-8 8:8:8的格式 var date = new Date(); console.log(date.getFullYear()); //返回当前日期的年 2022 console.log(date.getMonth()); //返回月份 console 阅读全文
posted @ 2022-04-13 09:12 罗砂 阅读(65) 评论(0) 推荐(0) 编辑
摘要:<script> var today = new Date(); // var birthday = new Date("December 17, 1995 03:24:00"); // var birthday = new Date("1995-12-17T03:24:00"); // var b 阅读全文
posted @ 2022-04-13 09:11 罗砂 阅读(22) 评论(0) 推荐(0) 编辑
摘要:猜数字游戏 程序随机生成一个1~10之间的数字,并让用户输入一个数字, 1.如果大于该数字,就提示,数字大了,继续猜; 2.如果小于该数字,就提示数字小了,继续猜; 3.如果等于该数字,就提示猜对了,结束程序; 4.核心算法:使用 if else if 多分语句来判断大于、小于、等于。 <scrip 阅读全文
posted @ 2022-04-13 09:10 罗砂 阅读(272) 评论(0) 推荐(0) 编辑
摘要:<script> // 求两个数之间的随机整数 function getdom(min, max) { min = Math.ceil(min); max = Math.floor(max); return Math.floor(Math.random() * (max - min + 1)) + 阅读全文
posted @ 2022-04-13 09:09 罗砂 阅读(27) 评论(0) 推荐(0) 编辑
摘要:<script> // 下面的函数使用 Math.PI 计算给定半径的圆周长: function calculateCircumference(radius) { return 2 * Math.PI * radius; } calculateCircumference(1); // 6.28318 阅读全文
posted @ 2022-04-13 09:08 罗砂 阅读(204) 评论(0) 推荐(0) 编辑
摘要:<script> //利用对象封装自己的数学对象 里面有 PI最大值和最小值 var myMth = { PI: 3.141592653, max: function () { var max = arguments[0]; for (let i = 0; i < arguments.length; 阅读全文
posted @ 2022-04-13 09:06 罗砂 阅读(75) 评论(0) 推荐(0) 编辑
摘要:Math数学对象 不是一个构造函数 ,所以我们不需要new 来调用 而是直接使用里面的 属性和方法即可 阅读全文
posted @ 2022-04-13 09:05 罗砂 阅读(40) 评论(0) 推荐(0) 编辑
摘要:<script> // 遍历对象 var obj = { name: "pink老师", age: 18, sex: "男", }; console.log(obj.name); console.log(obj.age); console.log(obj.sex); // for in 遍历我们的对 阅读全文
posted @ 2022-04-13 09:04 罗砂 阅读(31) 评论(0) 推荐(0) 编辑
摘要:new在执行时会做四件事: 1.在内存中创建一个新的空对象 2.让this指向这个新的对象 3.执行构造函数里面的代码,给这个新对象添加属性和方法 阅读全文
posted @ 2022-04-13 09:03 罗砂 阅读(43) 评论(0) 推荐(0) 编辑
摘要:构造函数和对象 1.构造函数 明星 泛指的某一大类 它类似于 java 语言里面的 类(class) function Star(name, age, sex) { this.name = name; this.age = age; this.sex = sex; this.sing = funct 阅读全文
posted @ 2022-04-13 09:02 罗砂 阅读(36) 评论(0) 推荐(0) 编辑
摘要:为什么要构造函数 就是因为前面两种方式只能 创建一个对象 var ldh = { uname: "刘德华", age: 55, sing: function () { console.log("冰雨"); }, }; var zxy = { uname: "张学友", age: 58, sing: 阅读全文
posted @ 2022-04-13 09:00 罗砂 阅读(52) 评论(0) 推荐(0) 编辑
摘要:<script> // 利用new Object 创建对象 var obj = new Object(); //创建一个空对象 obj.uname = "张三丰"; obj.sec = "男"; obj.age = 18; obj.sayHi = function () { console.log( 阅读全文
posted @ 2022-04-13 08:58 罗砂 阅读(117) 评论(0) 推荐(0) 编辑
摘要:变量、属性、函数、方法的区别 变量和属性的相同的 他们都是用来存储数据的 var num = 10; var obj = { age: 18, fn: function () {}, }; function fn() {} console.log(obj.age); 变量 单独声明并赋值 使用的时候 阅读全文
posted @ 2022-04-13 08:57 罗砂 阅读(68) 评论(0) 推荐(0) 编辑
摘要:在JavaScript中,现阶段我们可以采用三种方式创建对象(Object) 利用字面量创建对象 利用new Object创建对象 利用构造函数创建对象 利用对象字面量创建对象{ } <script> // 在JavaScript中,现阶段我们可以采用三种方式创建对象(Object) // 利用字面 阅读全文
posted @ 2022-04-13 08:55 罗砂 阅读(77) 评论(0) 推荐(0) 编辑
摘要:在JavaScript中,对象是一组无序的相关属性和方法的集合,所有事物都是对象, 例如字符串、数值、数组、函数等 对象是由属性和方法组成的。 属性:事物的特征,在对象中用属性来表示(常用名词) 方法:事物的行为,在对象中用方法来表示(常用动词) 为什么需要对象 保存一个值时,可以使用变量,保存多个 阅读全文
posted @ 2022-04-13 08:54 罗砂 阅读(250) 评论(0) 推荐(0) 编辑
摘要:<script> // 案例一:等于几 // function f1() { // var num = 123; // function f2() { // console.log(num); // } // f2(); // } // var num = 456; // f1(); // 案例二: 阅读全文
posted @ 2022-04-13 08:52 罗砂 阅读(22) 评论(0) 推荐(0) 编辑
摘要:只要是代码,就至少有一个作用域 写在函数内部的局部作用域 如果函数中还有函数,那么这个作用域中就又可以诞生一个作用域 根据在内部函数可以访问外部函数变量这种机制,用链式查找决定哪些数据能被内部函数访问,就称作作用域链 作用域链 <script> var num = 10; function fn() 阅读全文
posted @ 2022-04-13 08:51 罗砂 阅读(25) 评论(0) 推荐(0) 编辑
摘要:通常来说,一段程序代码中所用到的名字并不是真实有效和可用的,而限定这个 名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高 了程序逻辑的局部性,增强了程序的可靠性,减少了名字冲突 <script> // 全局作用域 var num = 15; console.log(num); // 局部 阅读全文
posted @ 2022-04-13 08:50 罗砂 阅读(27) 评论(0) 推荐(0) 编辑
摘要:全局变量 在全局作用域下声明变量叫做全局变量(在函数外部定义的变量) 全局部变量在代码的任何位置都可以使用 在全局作用域下var声明的变量是全局变量 特殊情况下,在函数内不适用关键字直接赋值的变量属于全局变量(不建议使用) 局部变量 在局部作用域下声明的变量叫做局部变量(在函数内部定义的变量) 局部 阅读全文
posted @ 2022-04-13 08:50 罗砂 阅读(122) 评论(0) 推荐(0) 编辑
摘要:<script> // 函数的两种声明方式 // 1.利用函数关键字自定义函数(命名函数) function fn() {} fn(); // 2.函数表达式(匿名函数) // var 变量名 = function( ) { } var fun = function (aru) { console. 阅读全文
posted @ 2022-04-13 08:48 罗砂 阅读(64) 评论(0) 推荐(0) 编辑
摘要:<script> // 用户输入年份,输出当前年份的2月份的天数 function backDay() { var year = prompt("请输入年份:"); if (run(year)) { alert("当前年份是闰年2月有29天"); } else { alert("当前年份是平年2月有 阅读全文
posted @ 2022-04-13 08:47 罗砂 阅读(330) 评论(0) 推荐(0) 编辑
摘要:<script> function fn1() { console.log(11); fn2(); } fn1(); function fn2() { console.log(12); } </script> 阅读全文
posted @ 2022-04-13 08:46 罗砂 阅读(83) 评论(0) 推荐(0) 编辑
摘要:<script> function run(year) { let a = false; if ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) { a = true; } return a; } console.log(run(2000 阅读全文
posted @ 2022-04-13 08:45 罗砂 阅读(73) 评论(0) 推荐(0) 编辑
摘要:<script> function sort(arr) { for (let i = 0; i < arr.length - 1; i++) { for (let j = 0; j < arr.length - i - 1; j++) { if (arr[j] > arr[j + 1]) { var 阅读全文
posted @ 2022-04-13 08:44 罗砂 阅读(33) 评论(0) 推荐(0) 编辑
摘要:需求: 用户输入0~59之间一个数字 如果数字小于10,则在这个数字前面补0,(加0 拼接) 否则 不做操作 用一个变量接收这个返回值,输出 阅读全文
posted @ 2022-04-13 08:42 罗砂 阅读(50) 评论(0) 推荐(0) 编辑
摘要:<script> //利用函数翻转任意数组 reverse 翻转 function reverse(arr) { let newArr = []; for (let i = arr.length - 1; i >= 0; i--) { newArr[newArr.length] = arr[i]; 阅读全文
posted @ 2022-04-09 19:50 罗砂 阅读(62) 评论(0) 推荐(0) 编辑
摘要:<script> function getMax() { let max = arguments[0]; for (let i = 0; i < arguments.length; i++) { if (arguments[i] > max) { max = arguments[i]; } } re 阅读全文
posted @ 2022-04-09 19:48 罗砂 阅读(75) 评论(0) 推荐(0) 编辑
摘要:当我们不确定有多少个参数传递的时候,可以用arguments来获取。 在JavaScript中,arguments实际上它是当前函数的一个内置对象。 所有函数内置了一个arguments对象,arguments对象中存储了传递所有实参 <script> function fn() { //conso 阅读全文
posted @ 2022-04-09 19:45 罗砂 阅读(25) 评论(0) 推荐(0) 编辑
摘要:break:结束当前的循环体(如for、while) continue:跳出本次循环,继续执行下次循环(如for、while) return:不仅可以退出循环,还能返回return 语句中的值,同时还可以结束当前的函数体内的代码 <script> // 函数返回值注意事项 // 1.return 终 阅读全文
posted @ 2022-04-09 19:43 罗砂 阅读(36) 评论(0) 推荐(0) 编辑
摘要:<script> // 利用函数求数组中的最大值 function getArrmax(arr) { //arr接受一个数组 let max = arr[0]; for (let i = 1; i <= arr.length; i++) { if (arr[i] > max) { max = arr 阅读全文
posted @ 2022-04-09 19:42 罗砂 阅读(582) 评论(0) 推荐(0) 编辑
摘要:<script> function getMax() { let max = arguments[0]; for (let i = 0; i < arguments.length; i++) { if (arguments[i] > max) { max = arguments[i]; } } re 阅读全文
posted @ 2022-04-08 11:32 罗砂 阅读(117) 评论(0) 推荐(0) 编辑
摘要:当我们不确定有多少个参数传递的时候,可以用arguments来获取。 在JavaScript中,arguments实际上它是当前函数的一个内置对象。 所有函数内置了一个arguments对象,arguments对象中存储了传递所有实参 arguments 的使用 只有函数才有arguments对象 阅读全文
posted @ 2022-04-08 10:47 罗砂 阅读(49) 评论(0) 推荐(0) 编辑
摘要:return、break、continue的区别 break:结束当前的循环体(如for、while) continue:跳出本次循环,继续执行下次循环(如for、while) return:不仅可以退出循环,还能返回return 语句中的值,同时还可以结束当前的函数体内的代码 // 函数返回值注意 阅读全文
posted @ 2022-04-08 09:39 罗砂 阅读(32) 评论(0) 推荐(0) 编辑
摘要:如果num1大于num2就返回num1,反之返回num2 <script> function max(num1, num2) { if (num1 > num2) { return num1; } else { return num2; } } console.log(max(21, 20)); < 阅读全文
posted @ 2022-04-07 11:46 罗砂 阅读(156) 评论(0) 推荐(0) 编辑
摘要:<script> // 函数是做某件事或者实现某种功能 function cook(aru) { console.log(aru); } cook("肘子"); // 2.函数的返回格式 // function 函数名() { // return 需要返回的结果; // } // 函数名( ); / 阅读全文
posted @ 2022-04-07 11:31 罗砂 阅读(73) 评论(0) 推荐(0) 编辑
摘要:函数可以带参数也可以不带参数 声明函数的时候,函数名括号里面的是形参,形参的默认值为undefined 调用函数的时候,函数名括号里面的实参 多个参数中间用逗号分隔 形参的个数可以和实参个数不匹配,但是结果不可预计,我们尽量要匹配 <script> // 函数形参实参个数匹配 function ge 阅读全文
posted @ 2022-04-07 10:52 罗砂 阅读(125) 评论(0) 推荐(0) 编辑
摘要:注意 多个参数之间用逗号隔开 形参可以看做是不用声明的变量 <script> // 1.利用函数求任意两个数的和 function getSum(num1, num2) { console.log(num1 + num2); } getSum(1, 3); getSum(3, 12); // 2.利 阅读全文
posted @ 2022-04-07 10:25 罗砂 阅读(166) 评论(0) 推荐(0) 编辑
摘要:在声明函数时,可以在函数名称后面的小括号中添加一些参数,这些参数被称为形参,而在调用函数时,同样也需要传递相应的参数,这些参数被称为实参。 参数 说明 形参 形式上的参数 函数的定义的时候传递的参数当前并不知道是什么 实参 实际上的参数 函数调用的时候传递的参数 实参是传递给形参的 <script> 阅读全文
posted @ 2022-04-07 09:54 罗砂 阅读(333) 评论(0) 推荐(0) 编辑
摘要:函数在使用时分为两步:声明=函数和调用函数 声明函数 <script> // 函数在使用时分为两步:声明=函数和调用函数 // 声明函数 // function 函数名( ){ // 函数体 // } function sayHi() { console.log("hi~"); } // 1.fun 阅读全文
posted @ 2022-04-07 09:03 罗砂 阅读(35) 评论(0) 推荐(0) 编辑
摘要:<script> // 冒泡排序 var arr = [2, 1, 5, 6, 3, 4, 9, 8]; for (var i = 0; i <= arr.length - 1; i++) { //外层循环管趟数 for (var j = 0; j <= arr.length - i - 1; j+ 阅读全文
posted @ 2022-04-06 17:07 罗砂 阅读(24) 评论(0) 推荐(0) 编辑
摘要:// 将数组[ 'red', 'green', 'blue', 'pink ', " purple"]的内容反过来存放 // 1、声明一个新数组newArr //2、把旧数组索引号第4个取过来(arr.length - 1),给新数组索引号第0个元素(newArr.length) // 3、我们采取 阅读全文
posted @ 2022-04-06 15:44 罗砂 阅读(61) 评论(0) 推荐(0) 编辑
摘要:需要一个新数组用于存放被筛选过的数据 1.声明一个新的数组用于存放新数据newArr 2.遍历原来的数组,把不是0的元素放在新数组里(数组名+索引的格式接收数据) 3.数组中的个数,用length 不断累加 <script> var a = [12, 0, 5, 3, 51, 62, 0, 25, 阅读全文
posted @ 2022-04-06 15:43 罗砂 阅读(45) 评论(0) 推荐(0) 编辑
摘要:将数组中大于10的元素选出来 放入新数组 1.声明一个新的数组用于存放新数据newArr 2.遍历原来的旧数组,找出大于等于10的元素 3.依次追加给新数组,找出大于等于10的元素 <script> var a = [12, 5, 3, 51, 62, 25, 10, 8, 9]; var newA 阅读全文
posted @ 2022-04-06 15:41 罗砂 阅读(90) 评论(0) 推荐(0) 编辑
摘要:新建一个数组,里面存放10个整数( 1~10) 核心原理:使用循环来追加数组。 1、声明一个空数组arr。 2、循环中的计数器i可以作为数组元素存入。 3、由于数组的索引号是从0开始的,因此计数器从0开始更合适,存入的数组元素要+1. <script> var a = []; for (var i 阅读全文
posted @ 2022-04-06 15:39 罗砂 阅读(288) 评论(0) 推荐(0) 编辑
摘要:<script> var arr1 = ["red", "green", "blue"]; arr1[2] = "pink"; //覆盖掉索引号2的值; console.log(arr1); arr1[3] = "black"; //输入没有占用的索引号会添加新元素 console.log(arr1 阅读全文
posted @ 2022-04-06 15:36 罗砂 阅读(24) 评论(0) 推荐(0) 编辑
摘要:将数组[ 'red','green','blue','black']转换为字符串,并且用 | 或其他符号分割 1.需要一个新变量用于存放转换完的字符串 str 2.遍历原来的数组,分别把里面数据取出来,加到字符串里 3.同时在后面多加一个分隔符 <script> var a = ["red", "g 阅读全文
posted @ 2022-04-06 15:16 罗砂 阅读(288) 评论(0) 推荐(0) 编辑
摘要:求数组中[2,6,1,77,52,25,7]中的最大值 声明一个保存最大元素的变量 max 默认最大值可以取数组中的第一个元素 遍历这个数组,把里面每一个数组元素和max 相比较 如果这个数组元素大于max 就把这个数组元素存到 max里面,否则继续下一轮比较 最后输出这个max <script> 阅读全文
posted @ 2022-04-06 15:15 罗砂 阅读(130) 评论(0) 推荐(0) 编辑
摘要:1.求数组[2,6,1,7,4] 里面所有元素的和以及平均值 (1)声明一个变量 sum (2)遍历这个数组,把里面每个数组元素加到sum里面 (3)用求和的变量 sum 除以数组长度就可以得到数组的平均值 <script> let sum = [2, 6, 1, 7, 4]; let num = 阅读全文
posted @ 2022-04-06 15:13 罗砂 阅读(439) 评论(0) 推荐(0) 编辑
摘要:<script> var age = prompt("用户"); ager = prompt("密码"); while (age !== "admin") { age = prompt("用户"); } ager = prompt("密码"); while (ager !== "123456") { 阅读全文
posted @ 2022-04-06 15:10 罗砂 阅读(23) 评论(0) 推荐(0) 编辑
摘要:用于调出循环(直接循环结束)剩下的直接不显示 <script> for (var i = 1; i <= 10; i++) { // 写哪断哪 if (i == 7) { break; } console.log("我正在吃第" + i + "个包子"); } </script> 阅读全文
posted @ 2022-04-06 15:06 罗砂 阅读(29) 评论(0) 推荐(0) 编辑
摘要:<script> for (var i = 1; i <= 5; i++) { if (i == 3) { continue; } console.log("我正在吃第" + i + "个包子"); } </script> 只要遇见 continue就退出本次循环 直到跳到 i++ 阅读全文
posted @ 2022-04-06 14:45 罗砂 阅读(30) 评论(0) 推荐(0) 编辑
摘要:<script> do { var age = prompt("你是大傻子吗"); } while (age !== "是"); alert("我就知道"); </script> 只要输入“不是”就会一直弹出 如果输入“是”就弹出我就知道 阅读全文
posted @ 2022-04-06 14:39 罗砂 阅读(33) 评论(0) 推荐(0) 编辑
摘要:在判断条件 如果条件表达式为真,则继续执行循环体,否则退出循环 <script> // do while 循环结构 do { //循环体 } while (条件表达式); // 执行思路 跟while不同的地方在于do while 先执行一次循环体 // 代码验证 var i = 1; do { c 阅读全文
posted @ 2022-04-06 14:23 罗砂 阅读(22) 评论(0) 推荐(0) 编辑
摘要:要求: 在页面弹出 你爱我吗 弹窗 ,如果输入我爱你则通过,反之一直弹出 你爱我吗 弹窗 <script> var age = prompt("你爱我吗"); while (age !== "我爱你") { age = prompt("你爱我吗"); } alert("我也爱你啊!"); </scr 阅读全文
posted @ 2022-04-06 14:16 罗砂 阅读(30) 评论(0) 推荐(0) 编辑
摘要:while循环语法结构 while 当...的时候 while (条件表达式) { 循环体 } 执行思路 当条件表达式结果为true 则执行循环体 否则 退出循环 代码验证 var num = 1; while (num <= 100) { console.log("你好"); num++; } 里 阅读全文
posted @ 2022-04-06 14:13 罗砂 阅读(40) 评论(0) 推荐(0) 编辑
摘要:打印九九乘法表 <script> let str = ""; for (let i = 1; i < 9; i++) { for (let j = 1; j <= i; j++) { str += j + "x" + i + "=" + i * j; } str += "\n"; } console 阅读全文
posted @ 2022-04-05 09:24 罗砂 阅读(47) 评论(0) 推荐(0) 编辑
摘要:外部的for循环打印的是行 内部的for循环打印的是列 <script> // 打印n行n列的星星 var rows = prompt("请输入行数"); var cols = prompt("请输入列数"); var str = ""; for (var i = 1; i <= rows; i++ 阅读全文
posted @ 2022-04-04 14:30 罗砂 阅读(81) 评论(0) 推荐(0) 编辑
摘要:<script> for (var i = 1; i <= 3; i++) { console.log("外层循环的第" + i + "次"); for (var j = 1; j <= 3; j++) { console.log("内层循环的第" + j + "次"); } } </script> 阅读全文
posted @ 2022-04-04 14:05 罗砂 阅读(127) 评论(0) 推荐(0) 编辑
摘要:for 循环重复执行某些操作 比如说我们做了100次加法运算 求1~100 之间整数累加和 需要循环100次,我们需要一个计时器 i 我们需要一个存储结果到的变量 sum ,但是初始值一定是 0 核心算法是:1+2+3+4+5+6+. . . . sum = sum + i <script> var 阅读全文
posted @ 2022-04-04 10:28 罗砂 阅读(71) 评论(0) 推荐(0) 编辑
摘要:<script> for (var i = 1; i <= 100; i++) { console.log("我很好"); } </script> 1.首先执行里面计数器变量 var i = 1,但是这句话在for 里面只能执行一次 index 2.去 i <= 100 来判断是否满足条件 就去执行 阅读全文
posted @ 2022-04-04 09:59 罗砂 阅读(125) 评论(0) 推荐(0) 编辑
摘要:先创建一个数组 再创建一个存放偶数的值 用for循环进行遍历 再用if判断 获取 偶数(可以整除2 就是偶数) 在ou 变量里添加获取的偶数 最后输出使用Math.max求数组中最大值 <script> var a = [40, 48, 53, 44, 71, 41]; var ou = []; / 阅读全文
posted @ 2022-04-04 09:10 罗砂 阅读(329) 评论(0) 推荐(0) 编辑
摘要:for重复执行某些代码。通常跟计数有关系 for 语法结构 for(初始化变量;条件表达式;操作表达式){ 循环体 } 初始化变量 就是用var 声明的一个普通变量,通常用于作为计数器使用 条件表达式 就是用来决定每一次循环是否继续执行 就是终止的条件 操作表达式 是每次循环最后执行的代码 经常用于 阅读全文
posted @ 2022-04-02 19:20 罗砂 阅读(83) 评论(0) 推荐(0) 编辑
摘要:可以多次循环某种语句 方便快捷 阅读全文
posted @ 2022-04-02 10:26 罗砂 阅读(28) 评论(0) 推荐(0) 编辑
摘要:一般情况下,它们两个语句可以相互替换 switch...case语句通常处理case为比较确定值的情况,而if...else...语句更加灵活,常用于范围判断(大于或等于某个范围) switch语句进行条件判断后直接执行到程序的条件语句,效率更高。而 if 语句几种条件,就得判断多少次 阅读全文
posted @ 2022-04-02 10:22 罗砂 阅读(87) 评论(0) 推荐(0) 编辑
摘要:思路: 1.弹出prompt输入框,让用户输入水果名称,把这个值取过来保存到变量中。 2.将这个变量作为switch括号里面的表达式 3.case后面的值写在几个不同的水果名称,注意一定要加引号,因为必须是全等匹配 4.弹出不同价格即可。同样注意每个case之后加上break,以便退出 5.将 de 阅读全文
posted @ 2022-04-02 10:03 罗砂 阅读(226) 评论(0) 推荐(0) 编辑

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