- 博客(19)
- 收藏
- 关注
RSS订阅原创 Form表单（ajax）
html中的form表单就是用于采集用户信息，并通过form的提交操作，把信息提交到服务端进行处理1*<form></form>叫表单标签2input*叫表单域3表单按钮<form>标签的属性
2022-02-18 18:04:23
549
原创 ajax基于bootstrap获取并渲染图书列表的数据（还有添加图书信息和删除图书信息）
只写了部分代码，样式代码没有给出，大家有兴趣的可以自己去敲一下嘻嘻代码如下<!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, init
2022-02-13 16:39:57
502
原创 拖动模态框
基础的样式不写，写的主要是 ‘拖动’ 这个效果的代码案例分析：点击弹出层，模态框和遮挡层就会显示出来display:block;点击关闭按钮，模态框和遮挡层就会关闭出来display:none;在液面中拖拽的原理: 鼠标按下并且移动之后，松开鼠标。触发事件是鼠标按下mousedown，鼠标移动mousemove, 鼠标松开mouseup。在脱液过程中鼠标获得最新的值给模态框的Top值和left值。这样模态框就可以跟着鼠标走。用鼠标的坐标减去鼠标在盒子内部的坐标。才是模态框真正的位置。第1步.
2022-01-22 15:35:55
497
原创 发送短信案例
老样子，只是部分核心代码，其他样式需要大家自己摸索一下<body><script> 手机号码：<input type = "number"><botton>发送</botton> //按钮点击之后，disable会显示为true。 //同时按钮里面的内容会发生变化，通过innerHtml改变里面的内容。 //里面的秒数是有变化的，所以需要用到定时器。 //定义一个变量在定时器里,不断递减。 //如果变量为0说明时间到了，
2022-01-20 20:53:19
410
原创 倒计时的制作（只写sccript部分，不写css样式部分）
倒计时的制作script的代码部分相关逻辑：要用的函数就是setInterval这个函数，这个函数可以重复一直调用<script> var hour = document.querySelector('.hour'); var minute = document.querySelector('.minute'); var second = document.querySelector('.second'); var inputTime = +new Date('2022-1
2022-01-20 17:00:11
612
原创 鼠标跟随事件实践案例
具体情况：一个图像代替鼠标，类似于QQ农场的铲子，去铲除菜，去播种时，被替代的鼠标首先，设置图片的样式<style> img{ position: absolute; top:2px;//很重要 left:2px;//很重要 }</style>接着，先放逻辑：要用mousemove这个事件，鼠标移动一个像素都会产生一个事件，然后获得x,y的坐标<img src=???><script> var pic = document.q
2022-01-19 14:17:47
435
原创 前端中的注册事件（绑定事件）的两种方式
传统注册事件 var lis = document.querySelector('li'); lis[0].onclick = function(){ alert('hi'); } lis[0].onclick = function(){ alert('how a u'); } //只能显示下面那个,具有唯一性 lis[1].addEventListener('click',function(){ alert(22);} ) lis
2022-01-16 22:33:42
325
原创 创建和添加节点
这个东西的用途就是用来写留言和评论的首先要创建节点元素；<script> var li = document.creatElement('li');</script>然后就是添加节点； //添加节点，node.appendChild(child) node 是父级，child是子级 var ul = document.querySelector('ul'); ul appendChild(li);添加节点，法2 //
2022-01-15 23:03:40
440
原创 下拉菜单的制作
如上图的b站鼠标放在上面，会有下拉菜单出现只写个script的大概，样式啥的还得你们慢慢来每一个都用li来放，li里面用a标签来放链接，下面放一个ul下拉菜单具体如下图//这里还有很多其他的东西没写.nav>li>a:hover{background-color:#eee;}.nav ul{ display:none; }<ul class ="nav"> <li> <a herf="#">登录</a> &..
2022-01-15 21:23:46
233
原创 tab栏切换（重点案例）
tab栏如下图具体情况如上先分好结构代码部分：<style>.item { display :none;}.tabtop li{ float:left; height:39px; padding:0 20px; text-align:center; cursor:pointer; }.item_info{ padding:20px 0 0 20px;}.item{display:none;}.tabtop .cur
2022-01-15 16:32:51
524
原创 背景皮肤更换效果
如上图所示，下面那个点点，会滑动，然后那个图片会自动切换我们可以简易的搞一个类似的，原理都一样那些点点可以用ul框起来，用li来表示，每个li里面装一个img,<style>body{ background: url(地址)no-repeat center top;}li{ list-style:none;}.pifu{overflow: hidden; margin:100px auto; bakground-color:#fff; width:410px; .
2022-01-14 17:57:57
103
原创 CSS的背景属性
背景颜色background-color颜色可以设置transparent透明的背景图片background-imagebackground-image: none||url(“地址”)很容易控制位置页面既可以添加背景颜色也可以添加背景图片，只不过背景图片会压住背景颜色背景平铺background-repeat四个取值（ repeat | no-repeat | repeat-x | repeat-y ）背景图片位置background-position：x 和 y改变图片位置
2022-01-12 15:11:42
124
原创 Css的元素显示模式
什么叫元素显示模式？就是该元素（标签）以什么方式显示，<div>标签自己占一行，一行可以放多个<span>标签HTML一般分为行内元素和块元素两种类型常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>其中<div>是最经典的块元素ps:文字类元素内部不能使用块级元素比如<p>内部不能再使用块级元素，尤其是<div>&l
2022-01-11 22:06:52
124
原创 前端中的复合选择器
后代选择器（重要）如果你的css样式里面只有li,你就会把ul和ol里的li都改了这个时候，后代选择器的作用就出来了ol li{ color: black;}ul li { color: yellow;}元素1 元素2 {样式说明；}元素1和元素2之间要用空格隔开不止可以是元素1，元素2，还可以有元素3，3可以是元素2的子代子元素选择题选最近的元素，就是亲儿子元素只会选第一个a,不会选择第二个a,元素1 > 元素2 { }并集选择器（重
2022-01-11 15:05:25
134
1
原创 Emmet 语法
Emmet语法前身是Zen coding，来提高html和css的编写速度，vscode内部已经集成该语法了1、快速生成html结构语法生成标签：直接输入标签名，再按TAB键，such as 你打个 div 再按tab，就会直接生成 (这里打不出来）如果要生成3个标签， 就后面加 3，比如 div3,按tab就行了。如果有父子级关系，比如，ul>li,有兄弟关系就 div + p ,直接在代码行输入 ！ 感叹号，按一下 tab 键就行了. + 名
2022-01-10 23:44:56
197
原创 前端中的Chrome调试工具
这个工具是用来调试我们的html结构和css样式Chrome调试工具非常重要！！！在前端中，它是用来调试，排错，测试的如何打开Chrome调试工具打开chrome浏览器，直接按F12，或者右单击空白区域处——检查，就可以直接打开。注意这里的elements,是元素的意思，才能看到你想看的东西左边的是html结构，右边的是css样式使用方法elements旁边的箭头十分重要，可以点击一下，然后放在你想要的的元素上面，点击它，html结构那边就会直接选中，css那边就会出现相应的样式，可以直
2022-01-10 20:32:04
254
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人