前端
文章平均质量分 55
红豌豆
简单源自对生活的热爱!
展开
-
JQuery基础笔记
jQuery 框架 //JavaScript框架库:就是一个普通的js文件,封装了很多的函数,封装了很多兼容的代码//jQuery是JavaScript框架库中的一种//jQuery的好处:写的少,做的多,链式编程,隐式迭代等...//jQuery可以解决js兼容的问题通过id获取元素 window.onload=function () { document.getElementById("btn").onclick=function () { //获取div根据id的方原创 2022-03-18 23:22:06 · 788 阅读 · 0 评论 -
用一个盒子包裹起来,就不是同一个BFC,不会出现塌陷问题
BFC 块级格式化上下文 (Block Fromatting Context)是按照块级盒子布局当两个块元素出现在一个父元素中,如果给子元素添加外边距就会产生边距塌陷,解决这种问题的办法就是给另一个子元素在套一个盒子。外边距塌陷,以最大的外边距为主,失去最小的外边距。例如上下两个元素,一个外边距是100px 另一个是50px,就会失去50px外边距,从而外边距实际距离是100px 这种状态被成为外边距塌陷。<!DOCTYPE html><html lang="en">.原创 2022-03-17 23:18:58 · 158 阅读 · 0 评论 -
使用面向对象思维创建table
对象右自己的属性和方法,将标签tr td 可以看作是一个对象 innerHTML可以看作是他们的方法按照层级关系,table->thead>tr>td 看到这里大概也知道了tabel元素的层级关系。实例代码如下:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body.原创 2022-03-16 23:24:06 · 173 阅读 · 0 评论 -
小实例js实现飞机游戏简单入门
需求:背景飞机[坐标 长度 图片路径]敌机[坐标 长度 图片路径]子弹[坐标 长度 图片路径]运动飞机 y轴不断减小敌机 y轴不断增大子弹 y轴不断增小需求:当 子弹的top值在敌机范围内 子弹从子弹数组中移除 敌机从敌机数组移除 同时也要从doc节点上移除元素。当敌机或子弹超出屏幕就从数组中移除,并且从doc上移除节点元素控制使用鼠标可以控制飞机的位置<!DOCTYPE html><html lang="zh">.原创 2022-03-15 22:41:10 · 4339 阅读 · 0 评论 -
css样式、渐变、响应式布局笔记
线性h1 {text-decoration:overline;}h2 {text-decoration:line-through;}h3 {text-decoration:underline;}字母转换p.uppercase {text-transform:uppercase;} 全部转换为大写p.lowercase {text-transform:lowercase;} 全部转换为小写p.capitalize {text-transform:capitalize;} 首字母大写字体原创 2022-03-13 23:36:37 · 273 阅读 · 0 评论 -
动态响应布局、iconfont笔记
clip:rect矩形剪裁功能rect(30px 200px 200px 20px)rect(top right bottom left)参数:top right bottom left分别指最终剪裁可见区域的上边,右边,下边与左边。而所有的数值都表示位置,且是相对于原始元素的左上角而言的。说明:裁剪矩形上边距上边的距离是30px 裁剪矩形右边距左边的距离是200px 裁剪矩形下边距上边的距离是200px 裁剪矩形左边距左边的距离20px:notli a:hover:not(.ac原创 2022-03-12 23:45:42 · 500 阅读 · 0 评论 -
HTML表格、字符标记等笔记
插件 嵌入Objectfirefox<object width="400" height="100" data="test.html"></object><object width="100%" height="500px" data="test.html"></object><object data="test.html"></object>插件 嵌入embed元素已经出现很长一段时间了,但是在 HTML5 前并未原创 2022-03-11 23:27:08 · 168 阅读 · 0 评论 -
js定位\存储\websql笔记
定位判断浏览器是否支持 if (navigator.geolocation){ navigator.geolocation.getCurrentPosition(showPosition); }else{ x.innerHTML="该浏览器不支持获取地理位置。"; }获取定位的经纬度 function showPosition(position){ x.innerHTML="纬度: " + position.coords.latitude + "<br>经度: " +原创 2022-03-10 23:26:38 · 810 阅读 · 0 评论 -
css选择器、权重
线性渐变 background: linear-gradientbackground: -webkit-linear-gradient(top,red,green); 参数: 渐变起始位置 起始颜色 结束颜色background: -moz-linear-gradient(top,pink,yellow);background: -webkit-linear-gradient(top,red 20%,green 50%,orange 75%,pink 100%);background: -moz原创 2022-03-09 21:55:15 · 98 阅读 · 0 评论 -
js实现微信界面
布局 思路需求:两个用户聊天会切换头像点击发送会将用户输入的信息输出到界面上消息页面布局对方发送信息的布局自己 发送消息的布局顶部的bar显示昵称显示当前时间内容区域展示自己和对方的发送的结果信息信息高度到达最大高度,实现内容当前信息向上滚动展示三大区域 展示用户昵称和时间的Bar 展示用户发送的信息显示的内容content[如果需要实现自动滚动效果,需要在套上一个div,定位模式relative——子绝父相] 底部展示输入框和发送按钮。.原创 2022-03-08 23:38:25 · 861 阅读 · 0 评论 -
js实现滚动条长度随着内容长度变化而变断
实现最终效果:滚动条Bar自身的长度随着内容的增多,会变短拖动bar可以滚动文字的内容高度思路算法滚动条bar的高度/scroll高度=box高度/内容的高度barHeight = box.clientHeight/conten.offsetHeightscroll.clientHeight;内容滚动的距离/内容最大滚动的距离=滚动条bar滚动的距离/滚动条bar最大的滚动距离内容最大的滚动距离var contentMax = conten.scrollHeight-box.client..原创 2022-03-07 23:04:22 · 1104 阅读 · 0 评论 -
CSS+HTML基本常用笔记
了解CSS常用基本命令paddingpadding:20px; 上 下 左 右 距离都是20pxpadding:20px 30px; 上、下 距离20px 左、右距离都是30pxpadding:20px 30px 50px; 上内边距离20px 左右内边距离30Px 下内边距里 50pxpadding:20px 30px 50px 80px; 上内边距离20px 右内边距离30Px 下内边距离50Px 左内边距里 50px内边距padding行内元素没有宽高,但是有内边距..原创 2022-03-06 23:34:23 · 321 阅读 · 0 评论 -
onmouseenter与mouseover的区别
// mouseenter 和 mouseover的区别 var box1 = document.getElementById('box1'); var i = 0; // 触发子元素的mouseover,会冒泡到父元素上 // box1.onmouseover = function () { // i++; // console.log(i); // } // // 此事件不触发事件冒泡 box1.onmo...原创 2022-03-04 23:24:09 · 204 阅读 · 0 评论 -
select移动总是移不干净
document.getElementById(id); 获取元素element.children(); 获取子元素的数组Element.appendChildren(option); 添加新的元素则会先从父类上删除该子节点 然后添加到新的父类节点上<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style&.原创 2022-03-03 22:22:28 · 59 阅读 · 0 评论 -
WebApi获取元素的三种方法
WebApiAPI(Application programming interface)[应用程序编成接口]作用:定义一些预先定义的函数。目的是提供应用程序与开发人员基于某种软件得以访问的一组编程的能力,而无需访问密码,或理解内部工作机制细节特点:任何开发语言都有自己的APIAPI的特征输入和输出API使用方法(conslote.log)*** 浏览器 *** 提供一套操作浏览器功能和页面的元素的API(BOM和DOM)javascript由三部分组成EC原创 2022-03-02 20:44:35 · 530 阅读 · 0 评论 -
js实现运动间断动画效果
运动间隔动画:就是每个动画都是按照一定的间隔时间来完成动画效果的动作,而不是同时完成,要完成这个动画,必须要使用到的就是js中的定时器来完成。布局在body中布置很多的div,使用获取tag的方法获取所有的div,通过定时器累加,获取该数组中每一份的div,修改每一个div的属性,就能实现。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></.原创 2022-03-01 21:35:30 · 288 阅读 · 0 评论 -
js实现检测碰撞函数原理核心
有时候做动画效果,如果得不到讨论,就是想破头脑也无法得到解决的方案,但是只要你理解知道核心,所谓的逻辑,如何实现这一效果的逻辑的实现步骤,很快就能实现。在一个盒子里有两个物体,判断这两个物体是否碰撞,或者是否接触只需要判断分别两个物体的坐标,以及实际物体的所占的位置,如果某一个属性包含在其中,或者重合即可判断为接触,或者称之为‘碰撞’主要核心实现js代码 //参数 鱼的x y width height 炮弹 x y width height function testColl(x1,y1原创 2022-02-28 20:54:26 · 263 阅读 · 0 评论 -
js实现左右来回运动效果实例
实现js基础运动那么一定要了解css的定位方式position分为固定定位fixed 、relative 、absolutefixed 固定元素在页面上relative 绝对定位 不会脱标absolute 会脱标,不占位置实现div元素从左边走到右边,就是根据目标值与实际div的左边距进行逻辑运算,这里就会分为两种情况,一种情况就是目标值比div左边距大,另一种就是目标值比div左边距小。当目标值比div元素的左边距大,这说明div是从左边向右边运动,将div看作一个物体,通过不断的增大l原创 2022-02-27 21:02:42 · 1700 阅读 · 0 评论 -
js实现导航栏上下动画效果
obj.currentStyle[name] 与 getComputedStyle(obj,false)[name],一个是支持IE 一个支持FE完美运动js插件,能根据传进来的值,进行匹配,从而得到了理想的运动效果,也就是运行逻辑。实现上下动画动画效果就是控制元素height的值,通过不断的修改该值,就能呈现所谓的动画效果,这里就需要用到定时器定时器有两种重复不断的定时器 setInterval(fn,time);延时只在设定时间后只出现一次的定时器 setTimeout(fn,time)在.原创 2022-02-26 21:09:38 · 688 阅读 · 0 评论 -
js正则表达式笔记
正则表达式也被称为规则表达式,用于对字符串的匹配,在使用上简介明了,但是没有经过正则知识的开发者会认为是看不懂的规则js风格new RegExp('a','i'); i代表忽略大小写 简写 ignoreperl风格/a/i量词:+例如:\d:代表一次 \d\d:代表2次 \d+:代表出现若干次全局匹配:g例如:/a/g任意字符:[abc];例子:[abc]s————as,bs,cs范围 [a-z],[0-9]例子:id[0-9]————id0,id1,id2…i原创 2022-02-25 23:47:10 · 121 阅读 · 0 评论 -
js实现敏感词汇屏蔽和去除HTML标签
有些文字内容不适宜,就会被屏蔽掉,这就用到了string类型的替换方法,当然实现这种方法的有很多种,但是正则是简便的。var str = ‘asdfaefg’;str.replace(‘a’,‘F’); //如果找到字符a就会替换成F 输入打印FsdfFefg本案例实现过滤敏感词汇和去除HTML标签等功能<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>&l原创 2022-02-24 18:21:54 · 1129 阅读 · 0 评论 -
js构造继承
继承关系不光存在于java代码中,js中也会有继承,将相同的部分提取出来,组建一个类也成为函数,可以称之为“”基类,通俗一点也叫父类。继承原型链继承 将实例作为子类的原型构造方法继承 使用父类的构造方法来增强子类类型的属性,如果使用到原型,则子类可以调用父类的原型方法实例继承 将父类实例作为子类对象的原创 2022-02-23 19:07:07 · 457 阅读 · 0 评论 -
js对象实现选项卡功能
函数function中this,this就指定是谁步骤:1.实现html基本功能2.使用css进行html界面布局3.使用js实现用户交互功能的实现功能:实现选项卡功能<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.原创 2022-02-22 21:54:19 · 93 阅读 · 0 评论 -
js实现鼠标可实现左滚动右滚动效果
需要掌握以下要点知识的基础人员:掌握html基本元素基础知识掌握css布局基础知识js运动基础知识本实例很简单,重在考研大家的功底样式css*{ padding: 0; margin: 0;}li{ list-style: none;}img{ border:0;}/* 控制 */.control{ border-bottom: 1px solid #ccc; background-color: #eee; text-align: center;原创 2022-02-19 23:11:24 · 2869 阅读 · 0 评论 -
js+css+html模仿评论接收显示模块
介绍:当在文本域写入文字,提交后直接显示在li标签中,这就是用到js语言,主要用于完成动画,所谓的动画就是通过获取元素,改变元素的某一属性,通过定时器的调用,从而形成一系列的动作,在我们的感官认识中则认为是动画。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> *{ margin: 0;原创 2022-02-17 22:57:54 · 630 阅读 · 2 评论 -
Js实现Flash播放效果[带源码]
关于做这样的功能,需要掌握html基本元素、css布局,js知识。当你看到关于轮播图这样的效果展示,有点不敢相信,因为自己的真的不会,一方面真的不会,所以就是不会,详细一点的介绍,可是又没有时间,源码就在其中,主要复制到自己的电脑上,配置一下具体的文件结构,还有就是添加几张图片,就能完美展示在你面前。这是css样式文件/* 公共部分 */body{ background-color: #666;} ul{ padding: 0; margin: 0; } li{ list-原创 2022-02-16 23:15:06 · 768 阅读 · 0 评论 -
Js实现多物体运动+带源码
js动画我们首先想到的就是添加定时器,在js中添加定时器有两种:定时定时器 setInterval(函数,时间);延时定时器 setTimeout(函数,时间);如果在一个项目中,多个对象同时使用一个定时对象,就会导致每次操作对象的定时器都会同时修改整体变有的量,也即是要变同时变化,要么就是动画没有结束就被提前取消定时器,达不到理想的效果。解决这样的问题(BUG),很简单就是在每一个对象的开始就自定义添加一个变量,然后通过调用函数将对象和变量引入。具体操作请看如下:<!DOCT.原创 2022-02-16 10:23:54 · 452 阅读 · 0 评论 -
Js第一天笔记——获取id,tag,变量,传参,修改属性
onmouseover 鼠标移入<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>鼠标经过提示</title> <style type="text/css"> div{ width: 200px; height: 200px; .原创 2022-02-03 00:54:34 · 863 阅读 · 0 评论 -
HTML CSS3变形移动、旋转、缩放、3d 、动画 拉伸布局等笔记
变形移动 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <.原创 2022-01-23 15:53:10 · 1669 阅读 · 0 评论 -
html网页鼠标样式、css精灵、iconfont、过渡动画笔记
总结: 插入图片:margin padding float postion width height 背景图片 background控制 background-size 大小 background-position 位置鼠标样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta nam...原创 2022-01-21 23:52:32 · 782 阅读 · 0 评论 -
html网页之静态主页
制作网页之前一定要了解网页的基本结构: <!-- 结构 --> <!-- 页面部分 --> <!-- nav导航部分 --> <!-- logo部分 --> <!-- 导航栏部分 --> <!-- 个人中心部分 --> <!-- 搜索栏部分 -->zhizuo <!-- banner部分 --> &...原创 2022-01-20 20:36:26 · 3924 阅读 · 0 评论 -
css定位属性基础笔记
定位属性 static 自动定位 默认 静态定位无法通过边偏移属性 top bottom left right 一般用来清除定位 relative 相对定位 相对原文档流进行定位 absolute 绝对定位 相对于上一个已经定位的父元素进行定位 fixed 固定定位 相对于浏览器窗口进行定位 <!DOCTYPE html> <html lang="en"> <head> ...原创 2022-01-20 20:16:10 · 901 阅读 · 0 评论 -
Html内外宽度已经清除浮动基础笔记
宽度剩余法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document...原创 2022-01-19 22:36:52 · 84 阅读 · 0 评论 -
html基础背景、边框样式、内外边框、盒子尺寸大小计算
css背景 background-color 背景顔色 background-image 背景图片 background-repeat 是否平铺 background-position 背景位置 background-attachment 背景固定还是滚动 background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置 <!DOCTYPE html> <html lang="en"> <hea...原创 2022-01-18 20:14:04 · 2027 阅读 · 0 评论 -
html前端基本选择器 伪类 伪元素笔记
前端基础知识原创 2022-01-17 19:40:13 · 891 阅读 · 0 评论 -
网页标签元素
学习目标:段落文本标签,块标签,单标签,图像标签,链接标签,锚点。<div></div> 块标签 会自动换行 <span></span> 行内标签 不回换行 <br/> 段落标签 <p></p> 章节标签 会换行 <hr/> 横线标签 会换行 <b><b/> 加粗 <strong></strong> 粗体...原创 2022-01-15 20:39:36 · 261 阅读 · 0 评论