- 博客(50)
- 收藏
- 关注
RSS订阅原创 AJAX——发送GET请求
ajax知识点express框架（ajax需要框架，需要先安装node）右击vscode的文件夹空白部分，输入指令npm init --yes（初始化）编写express.js代码，右键单击该文件夹，选择“集成终端中打开”，输入指令node js文件夹的名字ajax请求基本操作创建对象初始化，设置请求方法和 url发送事件绑定，处理服务端返回的结果发送get请求编写相关express框架// 1.引入expressconst { response } = require('
2021-08-09 20:22:05
3316
原创 jQuery——选择器
jQuery选择器选择器分类基本选择器 <div id="div1" class="box">我是class为box的div1</div> <div id="div2" class="box">我是class为box的div2</div> <div id="div3">我是div3</div> <span class="box">我是class为box的span</span>
2021-08-09 18:43:12
244
原创 Bom——获取url参数
获取url参数知识点location对象含义：用于获取或设置窗体的URL，并解析URLURLprotocal://host[:port]/path/[?query]#fragmenthttp://www.itcast.cn/index.html?name=andy&age=18#link①protocol：通信协议，常用的有http、ftp、maito②host：主机（域名），www.baidu.com③port：端口号（可选），省略时使用方案的默认端口，如http默认端口为8
2021-07-28 21:09:34
465
原创 Bom——动画
动画知识点动画（一）、动画效果1.获得盒子当前位置2.添加移动距离3.利用定时器setInterval重复操作4.加一个结束定时器条件clearInterval 注意：要给此元素添加定位，才能使用element.style.top/left等（二）、动画函数简单封装 // 当我们使用点击按钮执行动画的思路时当我们不断点击按钮，这个元素速度会越来越快，因为开启太多计时器，解决方案就是让元素只有一个定时器执行 clearInetval(obj.timer); obj.time
2021-07-27 23:31:40
142
原创 Bom——拖拽框
拖拽框效果点击提示文本，会弹出登录框和遮罩层；鼠标按住左键移动时表单框也会跟随鼠标移动，鼠标松开则静止；点击关闭按钮遮罩层与登录框消失。知识点元素偏移量offset常用属性①element.offsetParent：返回作为该元素带有定位的父级元素，如果父级都没有定位则返回body②element.offsetTop：返回元素相对带有定位父元素上方的偏移③element.offsetLeft：返回元素相对带有定位父元素左方的偏移④element.offsetWidth：返回自身包括pad
2021-07-24 20:24:49
512
3
原创 Bom——获取鼠标在盒子内的位置
获取鼠标在盒子内的位置效果鼠标放在粉色背景盒子内时，上方有文本显示鼠标的坐标核心思路利用鼠标事件，获取鼠标的信息（包括鼠标所在位置）鼠标移动时动态获取位置代码html <p></p> <div></div>css div { height: 100px; width: 100px; margin: 100px;
2021-07-24 18:38:27
344
1
原创 Bom——放大镜
放大镜效果效果如图所示，当鼠标放在小图片上时旁边会显示放大版，鼠标移动时放大版的图片也会相应移动。核心思路设置一个小盒子，里面放一张图片，旁边设置一个大盒子，里面也插入图片，display: none; 隐藏。当鼠标放在小盒子大盒子显示，离开后隐藏。设置一个遮挡层盒子（即例图中的黄色盒子）跟随鼠标移动，当遮挡层到达边缘时被阻挡。知识点元素偏移量offset系列offset概述①获取元素距离带有定位父元素的位置②获取元素自身大小（宽高）③（注意）：返回的数值都不带单位常用属性
2021-07-24 17:11:58
148
1
原创 Bom——定时器
定时器定时器概念setTimeout(调用函数/函数名，[延迟的毫秒数])setTimeout又称为回调函数callback，上一件事干完再回头调用的意思，只调用一次setInterval(回调函数，[间隔的毫秒数])。每隔设定的时间运行一次函数，会重复调用案例案例1：5秒关闭广告效果：图片、文字过5秒后消失。核心思想设置定时器，当过了5秒后，被选中的事件源设置display = 'none' 。由于该效果只使用一次，因此设置setTimeout。代码javascri
2021-07-22 17:52:54
347
2
原创 Dom——生成表格
生成表格效果如上图所示，生成表格，点击删除可删除那行核心思想数据是动态的，在正式项目中是使用数据库来实现的，这次利用js的对象储存数据来实现往tbody里插入数据，行的个数为数组的长度；行里面用createElement创建单元格td，再用appendChild添加td，td的个数取决于数组元素个数tr和td均用循环创建，外层tr用for循环，内层td可使用for…in…来实现（因为tr是一个对象）把值赋给td（在for(var k in obj)中k得到属性名；obj[k]得到属性值用
2021-07-17 23:23:49
710
1
原创 Dom——下拉菜单
下拉菜单案例展示效果如上图所示，当鼠标经过最上面的内容时出现下拉菜单，鼠标移开则隐藏。当鼠标移动到下拉菜单的选项时该选项背景颜色改变，如下图所示。核心思想上方内容用ul和li，每个li内包含超链接a；下拉菜单部分也是用ul和li。为了能够让每个li都有鼠标经过事件，需要为所有li遍历获取，注册事件。鼠标经过上方时，下拉菜单显示；鼠标离开上方和下拉菜单时隐藏。代码html部分<ul class="nav"> <li> <a hr
2021-07-17 21:47:56
953
7
原创 Dom——添加留言
添加留言效果展示效果如上图所示，可以在文本框里输入内容，点击发布按钮可发布信息，如下图。点击删除后该条消息删除，其余消息依然按位置排列核心思想点击发布按钮后，动态创建一个li添加到ul中通过li.innerHTML把框内的值赋给li独自设置新li的添加顺序，从后面显示就appendChild()，从前面显示就insertBefore()代码html部分<div> <textarea>123</textarea> <but
2021-07-17 20:58:02
140
原创 Dom——高级事件
高级事件一、注册事件（绑定事件）传统注册事件有唯一性，只能设置一个函数，后注册的函数会覆盖新的函数方法监听注册方式：.addEventListener(type，listener[,useCapture])（1）里面的事件类型是字符串，必加引号，而且不带on（2）同一个元素，同一个事件可以添加多个侦听器①type：事件类型字符串，如click、mouseover，注意不带on②listener：事件处理函数，事件发生时会调用该监听函数③useCapture：可选参数，是个布尔值，默认为fa
2021-06-21 17:15:18
143
原创 Dom——表单的全选与取消
表单全选与取消效果效果如上图所示。当点击最上方的复选框时，每个商品的选项都会被选中，再点击一次全部取消；下方的选框全部被点击时上方的复选框才会打勾，否则无变化。核心思想第一步：实现点击上方的选框下面所有选框都能被选中，反之亦然。采取把上方选框的选中状态赋给下面所有选框，即当上方的选框选中状态为被选中时，下面的选框也会被选中。第二步：实现点击下面选框如果没全部选中，上方选框不会被选中，反之亦然。采取for双循环的方式，外层用于遍历所有的选框，内层在点击后触发，用于判断是否所有选框都被选
2021-06-17 16:18:47
168
2
原创 Dom——排他思想
排他思想概念排他思想：如果有同一组元素，想要某一个元素实现某种样式，需要用到循环的排他思想算法所有元素全部清除样式给当前元素设置样式注意顺序不能颠倒案例效果如上图所示。当鼠标点击一个按钮时，该按钮背景颜色改变，其余按钮颜色不变；当鼠标点击另外一个按钮时，那个按钮背景颜色发生改变，其余按钮背景颜色恢复原样。代码html部分<button>按钮</button><button>按钮</button><button>
2021-06-17 15:14:10
1353
1
原创 Dom——循环精灵图
循环精灵图效果效果如上图所示。核心思想类似案例之前也有做过，按照以往的想法我们要么给每个li添加类名一一设置，要么利用:nth-child()一一设置。现如今学习了javascript后可以利用for循环来制作。设置好ul和li，获取事件源lis为全部的li利用for循环对所有的li进行遍历设置好坐标轴变量代码html部分<ul> <li></li> <li></li> <li><
2021-06-14 16:58:25
386
2
原创 Dom——隔行变色、分时显示问候语
隔行显示效果效果如上图所示，当鼠标经过某一行时，该行的背景颜色变深，其余行不变，当鼠标移开，背景颜色恢复。如下图所示。核心思路设置一个表格，获取事件源表格的每一行，但不能给每一行设置类名再逐一获取，这样效率太低。我们可以利用for进行遍历获取。表头那行不需要变色，因此只需要获取tbody的tr即可。设置事件类型鼠标经过onmouseover和鼠标移开onmouseout，鼠标经过背景颜色发生变化，移开后恢复。（注意：如果不设置ommouseout恢复背景颜色则表格的颜色将无法复原，如下图所
2021-06-14 15:49:35
261
原创 Dom——显示隐藏
显示隐藏知识点操作元素（一）、改变元素内容element.innerText：修改从起始位置到终点位置的内容，但去除html标签element.innerHTML：修改从起始位置到终点位置的全部内容，包括html标签※不同点：innerText不识别html标签，innerHTML识别html标签，推荐使用后者innerText去除空格和换行，innerHTML保留空格和换行（二）、改变元素属性 如：img.src（三）、表单元素的属性操作获取元素注册事件、处理程序。①
2021-06-11 22:34:13
941
原创 Dom——仿百度换肤
仿百度换肤效果效果如上图所示，总共有几张图片可供选择，当点击其他图片时，页面的背景图片也会相应的切换。核心思路点击图片可切换页面的背景，则事件源为整个body，和每个小图片img；事件类型为点击小图片onclick。但是给每个小图片设置一个事件源和事件类型又过于繁琐，因此可以利用for进行遍历，第i个图片被点击时则返回图片路径给body。HTML与CSS<ul class="baidu"> <li><img src="image/可莉背景.jpg" alt
2021-06-10 21:46:22
220
原创 Dom——仿淘宝关闭二维码
仿淘宝关闭二维码效果整体的样式如上图所示。（素材图片可去淘宝保存图片）当点击二维码广告旁边的叉叉，则会把广告关闭。核心思路点击叉叉，关闭整个广告，则需要的事件源有叉叉符号，整个广告盒子；事件类型为点击onclick。只要点击事件触发后，整个盒子display:none即可。HTML与CSS<div class="box"> 点击右边叉叉可以关闭我哦 <img src="image/淘宝二维码.png" alt=""> <i class="
2021-06-10 21:12:28
209
原创 Dom——仿京东显示密码
显示密码效果整体样式如上图所示。密码框输入密码时是密文状态，（如下图1）当点击右边的闭眼图标，闭眼图标会变为睁眼图标，密码也会变为明文状态。（如下图2）核心思路在点击图标时密码框显示隐藏密码，因此需要获取的事件源为图标和密码框；事件类型为点击眼睛图标onclick；点击后if语句判断密码表单的类型，如果是类型type为password则转变为文本text，图标变为睁眼；如果是类型type为text则转变为文本password，图标变为闭眼。HTML与CSS布局 <div cla
2021-06-10 21:00:50
663
原创 JavaScript——水仙花数
水仙花数水仙花数定义水仙花数是指一个 3 位数，它的每个位上的数字的 3次幂之和等于它本身（例如：1^3 + 5^3 + 3^3 = 153）。代码 <script> function sui() { shu = 0; // 遍历100-999的所有三位数，赋值为num for (let num = 153; num <= 999; num++) {
2021-06-09 22:28:06
1564
原创 JavaScript——字符串练习
字符串练习题目var str = ‘abaasdffggghhjjkkgfddssss34444343’;字符串的长度console.log(str.length);取出指定位置的字符串，如：0，3，5，7，9获取数组索引：根据位置返回字符①charAt(index) var arr = [1,2,3,4,5,2,a];console.log(arr.charAt(2)); // 结果返回3 ②charCodeAt(index)—返回字符的ascll码console.log
2021-06-09 22:16:19
475
原创 Javascript——倒计时案例
倒计时知识点一、实时刷新：setTimeout( )是设定一个指定等候时间 (单位是千分之一秒, millisecond), 时间到了，浏览器就会执行一个指定的 method 或 function。二、自启window.onload() 方法用于在网页加载完毕后立刻执行的操作，即当 HTML 文档加载完毕后，立刻执行某个方法。window.onload() 通常用于 < body> 元素，在页面完全载入后(包括图片、css文件等等)执行脚本代码。三、样式设置鼠标样式：curso
2021-06-07 20:41:37
691
原创 Javascript——找“o”
找“o”知识点获取数组索引：——根据字符返回位置①indexOf（要查找的字符，起始位置）返回第一个符合条件的数组元素索引var arr =[1,2,3,4,5,2];console.log(arr.indexOf(2)); // 结果返回1，第一个符合条件console.log(arr.indexOf(2，2)); // 查找2，从第二个开始查找②lastIndexOf返回最后一个符合条件的数组元素索引console.log(arr.lastindexOf(2)); // 结果返
2021-06-04 21:11:30
304
原创 Javascript——数组去重
数组去重知识点数组对象（1）new Array() var arr = new Array(); // 创建了一个空数组var arr = new Array(2); // 这个2表示数组的长度为2，里面有2个空数组元素var arr = new Array(2,3); // 表示里面有两个数组元素，是2和3（2）检测是否为数组：①instanceof运算符，检测是否为数组——console.log(arr instanceof Array)②Array.isAr
2021-06-04 20:10:57
99
原创 JavaScript——判断素数、比大小、计算器
函数知识点1.概念： 就是封装了一段可以重复调用执行的代码块2.使用:（1）声明函数：①function 函数名(){函数体 }②函数表达式（匿名函数） var 变量名 = function(){}（2）调用函数： 函数名();（3）封装函数：把多个函数封装，对外只提供一个接口（相当于快递打包）※注意事项：（1）function声明函数的关键字，全部小写（2）函数是做某件事，因此函数名一般为动词（3）函数不调用自己不执行（4）调用函数时记得加小括号3.参数（可以有，可以没有
2021-06-04 16:35:08
284
原创 JavaScript——猜数字
猜数字知识点内置对象1.内置对象：供开发者使用，并提供了一些常用的、基础的属性和方法2.查文档：https://developer.mozilla.org/zh-CN/3.Math数学对象：不是构造函数，所以不需要new来调用，而是直接使用里面的属性和方法即可（1）最大值/最小值：Math.max()、Math.min() （2）封装自己的数学对象：var myMath = {PI: 3.1415926535,max: function() {max = arguments[0];f
2021-06-03 20:27:31
519
原创 JavaScript——简易ATM取款机
简易ATM制作知识点分支结构：switch分支语句（用于特定值）表达式和value的值和数据类型要完全相等switch（表达式） { case value1：执行语句1；break； case value2：执行语句2；break； … default：执行最后的语句； }循环结构while循环①里面应该也有计数器，初始化变量②里面也应该有操作表达式，完成计数器的更新，防>止死循环while(条件表达式){循环体；变量++；}当while条
2021-06-02 20:36:27
2308
2
原创 HTML——3D旋转+动画 旋转木马案例
旋转木马案例效果外面的图片围绕中间的图片旋转，鼠标悬停停止旋转。思路不用鼠标悬停就能实现旋转需要用到动画来实现，@keyframes内设置transform: rotateY();当鼠标悬停时动画停止则利用伪类选择器:hover实现。要想实现动画停止效果，则需要用到播放状态animation-play-state；（默认running）鼠标放在上面就会停止用paused。代码<section> <div></div> <
2021-05-09 21:56:03
806
1
原创 HTML——过渡transition 进度条
CSS3过渡效果过渡（谁做过度给谁加）transition:要过度的属性 花费时间 运动曲线 何时开始;1.属性：想要变化的CSS属性，宽高、背景颜色、内外边距都可。如果全都要，all即可2.花费时间：单位是秒（必须写单位），比如0.5s3.运动曲线：默认是ease（可省略）4.何时开始：单位是秒（必须写单位），可设置延迟，默认是0s（可省略）进度条制作利用transition制作一个简易的进度条，在鼠标经过时有一个上涨的动画。<div class="homework">
2021-05-08 21:15:48
1389
原创 HTML——布局技巧
一、margin负值的运用效果：每个盒子相互紧挨，但是鼠标选中时整个盒子边框都能变色。代码部分：<div class="box1"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li&g
2021-05-07 22:09:18
233
原创 HTML——CSS3新属性
CSS3新属性※属性选择器一、概念1.属性选择器①E[att]选择具有att属性的E元素②E[att=“val”]选择具有att属性且属性值等于val的E元素③E[att^=“val”]匹配具有att属性且属性值以val开头的E元素④E[att$=“val”]匹配具有att属性且值以val结尾的E元素⑤E[att*=“val”]匹配具有att属性且值中含有val的E元素二、不借助类或者id选择器，利用属性选择器选择<div class="one"> <inp
2021-05-03 21:17:07
240
原创 HTML——steps 奔跑的白熊
利用H5和C3制作奔跑的白熊本次需要用到的素材图片：一、效果视觉效果上一只熊从电脑屏幕左侧跑到中间停止向前原地奔跑。二、思路先设置一个盒子，大小刚好能显示白熊奔跑的一张图片，放上白熊的图片白熊奔跑需要用到动画@keyframes实现，注意最后重复奔跑的动作，要用到animation-iteration-count：infinite白熊盒子从屏幕左侧移动到中间，也需要设置新的动画，最后停在屏幕中间，需要用到animation-fill-mode：forwards一个元素可以引用多个动画，
2021-04-27 16:36:15
1650
原创 HTML——3D动画 热点图
利用H5和C3制作热点图。一、效果视觉效果上一个点从中心向四周在不断发光。二、思路先做一个盒子放置背景图片设置一个子盒子用于定位在子盒子里再设置四个盒子，一个设置圆，另外三个设置发散的波纹波纹用阴影制作会更有美感波纹放大用width和height设置，不要用scale，会把阴影也撑大，影响美感三、实践先设置一个父盒子map，用背景方式放入地图html<div class="map"></div>CSS.map { position: r
2021-04-26 10:20:13
585
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人