Html+css+js项目
整理记录
喵俺第一专栏
共同学习,共同进步,提高编程技能。另外,有好多优秀的项目练手哦,详细看第一个专栏,里面有很多可作为课设、毕业的项目,希望自己可以帮助到你哦!
展开
-
json
JSON创建一个对象var obj={“name”:“孙悟空”,“age”:18,“gender”:“男”};转换成字符串var obj=‘ {“name”:“孙悟空”,“age”:18,“gender”:“男”} ’;把这个前端对象传到后端(java写的)JS中的对象只有JS自己认识,其他的语言都不认识Json就是一个特殊格式的字符串,这个字符串可以被任意语言所识别,并且可以转换为任意语言的对象,json在开发中主要用来数据的交互Json:JavaS原创 2022-02-04 23:00:35 · 92 阅读 · 0 评论 -
js类的操作
其中3个函数:addClass(box, "b2");向box中添加b2类属性removeClass(box, "b2");向box中移出box属性toggleClass(box, "b2");替换box中的属性有的话删除,没有进行添加进来综合前两个函数详细代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equ原创 2022-02-03 23:13:38 · 332 阅读 · 0 评论 -
js轮廓图界面
显现简单轮廓图自动切换图片,和点击切换图片详细代码如下:<!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, initial-s原创 2022-02-03 22:15:44 · 753 阅读 · 0 评论 -
js定时器案例3
增加了几个新的按钮,点击按钮box2向右移动,测试按钮通过修改定义函数move,添加参数可以自定义进行div的移动,和变化attr:要执行动画的样式,比如left top width height://move(box2, 10, 800, "width");//box2宽度向右边长//move(box2, 10, 800, "top");//box2向下移动//move(box2, 10, 800, "height");//box2向下边长详细代码如下:<!DO..原创 2022-02-01 22:30:36 · 692 阅读 · 0 评论 -
js定时器案例2
点击按钮div可以向右移动,向左移动,详细代码如下:<!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, initial-scale原创 2022-02-01 20:48:54 · 509 阅读 · 0 评论 -
js定时器案例1
点击按钮div进行移动,详细代码如下:<!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, initial-scale=1.0"&g原创 2022-02-01 20:43:18 · 447 阅读 · 0 评论 -
js延时调用和定时调用
知识点:延时调用:一个函数不马上执行,而是隔一段时间在执行,而且只会执行一次延时调用和定时调用的区别,定时调用会执行多次,而延时调用只会执行一次详细代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta n原创 2022-01-31 18:02:49 · 749 阅读 · 0 评论 -
js解决div移动卡顿问题
设置定时器,解决div刚开始移动卡顿问题:详细代码:<!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, initial-sca原创 2022-01-31 17:40:39 · 1054 阅读 · 0 评论 -
js定时器切换图片
设置两个开始按钮点击可以开启定时器来切换图片,停止按钮来关闭定时器详细代码:<!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,原创 2022-01-31 17:05:00 · 1494 阅读 · 0 评论 -
js定时器
知识点:setInterval()按照指定的周期(以毫秒)来调用函数或计算表达式setTimeout()再去指定的毫秒数调用函数或计算表达式clearInterval()取消有setInterval()设置的timeoutclearTimeout()取消由setTimeout()方法设置的timeout设置定时器从1开始逐渐变大,详细代码:<!DOCTYPE html><html lang="en"><head> <met原创 2022-01-31 16:24:39 · 290 阅读 · 0 评论 -
js location对象
知识点:location对象该对象封装了浏览器地址栏的信息如果直接将location属性修改为一个完整的路径,或相对路径则我们页面会自动跳转到改路径,并且会生成相应的历史记录方法:assign()用来跳转到其他页面,作用和直接修改location一样location.assign(“http://wwww.baidu.com”);reload()用于重新加载当前压面,作用和刷新一样如果在方法中true,作为参数,则会强制清空缓存刷新页面location.reload(true原创 2022-01-29 23:27:31 · 202 阅读 · 0 评论 -
js History对象
知识点:Length属性可以获取到当前链接的数量Back()方法可以用来回退到上一个页面,作用和浏览器的回退按钮一样Forward()方法可以跳转到下一个页面,作用和浏览器的前进按钮一样go()可以用来跳转到指定的页面它需要一个整数作为参数 1.代表向前跳转一个页面2.代表向前跳转两个页面 -1表示向后跳转一个页面 -2表示向后跳转两页面1先创建test01页面,详细代码如下:<!DOCTYPE html><html lang="en"><原创 2022-01-29 22:49:55 · 593 阅读 · 0 评论 -
BOM 判断浏览器的信息-Navigator
知识点;BOM浏览器对象模型,BOM可以使我们通过JS来操作浏览器,在BOM中为我们提供了一组对象,用来完成对浏览器的操作BOM对象:Window Navigator Location History ScreenWindow对象代表整个浏览器窗口,同时window也是网页中的全局对象Navigator 代表着当前浏览器的信息,通过该对象可以识别不同的浏览器Location 代表当前浏览器的地址栏信息,通过Location可以获取地址栏信息,或者操作浏览器跳转页面Hist原创 2022-01-28 23:09:33 · 666 阅读 · 0 评论 -
js实现按键使div移动
知识点:使div可以根据不同的方向移动按左键,div向左移按右键,div右移按下键,div下移按上键,div上移详细代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewp原创 2022-01-27 23:31:12 · 2002 阅读 · 0 评论 -
js键盘事件
知识点:键盘事件一般都会绑定给一些可以获取到的焦点对象,或者是documentonkeydown 某个键盘被按下 如果一直按着某个键不松手,则事件会一直触发onkeyup 某个键盘被松开可以通过keyCode获取按键的编码,可以判断那个按键被按下altKey、ctrlKey、shiftKey判断alt ctrl shift是否被按下如果在onkeydown中取消默认行为写上return false;则如果输入的内容,不会出现在文本框中当在在页面按下alt+y时,.原创 2022-01-27 22:49:42 · 3820 阅读 · 0 评论 -
js鼠标滚轴事件
知识点:鼠标的滚轮事件:onmusewhere鼠标滚轮滚动事件,会在滚轮滚动时触发,但是火狐不支持该属性在火狐中需要使用DOMMouseScroll来绑定滚动事件,该事件通过addEventListener()函数来绑定判断鼠标滚轮滚动的方向event.wheelDeltaevent.wheelDelta在火狐中不支持,使用event.detail 向上滚动-3 向下滚动+3当滚轮滚动时,如果浏览器有滚动条,滚动条会随之滚动,这是浏览器的默认行为,如果不希望发生,则可以取消默认行原创 2022-01-27 21:08:33 · 4847 阅读 · 0 评论 -
js鼠标拖动div移动
完成box1的元素的拖拽 拖拽流程: 1挡鼠标在被拖拽的元素上按下时,开始拖拽 onmousedown鼠标按下 2当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove鼠标移动 3当鼠标松开时,被拖拽元素固定在当前位置 onmouseup鼠标松开<!DOCTYPE html><html lang="en"><head> <meta ch...原创 2022-01-25 22:44:46 · 697 阅读 · 0 评论 -
js事件的传播
知识点:事件的传播:微软公司认为事件应该是由内向外传播,也就是当事件触发时,应该当前元素的事件,然后再向当前元素的祖先元素上传播,也就是说事件应该在冒泡阶段执行网景公司认为事件应该是有外向内传播,也就是当前事件触发时,应该先触发当前元素的最外层的祖先元素事件,然后再向内传播给后代元素W3C综合了两个公司的方案,将事件传播分成三个阶段捕获阶段在捕获阶段时从最外层的祖先元素,向目标元素进行事件的捕获,但是此时不会触发元素目标阶段事件捕获到目标元素,捕获结束,开始在目标元素上.原创 2022-01-25 17:49:50 · 299 阅读 · 0 评论 -
js事件的绑定
使用对象.事件=函数的形式绑定响应函数,他只能同时为一个元素的一个事件绑定一个想隐函数不能绑定多个,如果绑定了多个,则后边的会覆盖前面的addEventListener() 通过这个方法也可以为元素绑定响应函数<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content=..原创 2022-01-24 23:31:54 · 136 阅读 · 0 评论 -
js事件的委派
知识点:事件的委派:指将事件统一绑定给元素的祖先元素,这样当后代元素上的事件触发时,会一直冒泡到祖先元素,从而通过祖先元素的响应函数来处理事件事件委派是利用了冒泡,通过委派可以减少事件的绑定次数,提高程序的性能例子:点击按钮添加 超链接,点击超链接提示内容<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv原创 2022-01-24 22:22:53 · 505 阅读 · 0 评论 -
js事件的冒泡
在div里面加一个span,分别给span、div、body一个点击响应函数,当点击span的时候,因为冒泡,则会响应3个响应事件,如果取消span冒泡,则span事件不会向上传导知识点:事件的冒泡:(Bubble)所谓的冒泡指得就是事件的向上传导,当后代元素上的事件被触发时,其祖先元素的相同事件也会被触发如果不希望事件的冒泡可以通过事件对象来取消冒泡取消冒泡:将事件对象的cancelBubble设置为true,既可以取消冒泡event.cancelBubble=true;详原创 2022-01-24 20:53:25 · 121 阅读 · 0 评论 -
js控制实现div随鼠标移动案例
知识点:onmosemove 该事件会在鼠标移动时被触发event=event || window.eventclientX clientY用于获取鼠标在当前可见窗口的坐标,就是能看见电脑的整个画面(当前窗口)event.pageX;鼠标相对于页面的距离event.pageY 鼠标相对于整个页面的距离这两个属性在ie8中不支持<!DOCTYPE html><html lang="en"><head> <meta c原创 2022-01-22 23:38:59 · 834 阅读 · 0 评论 -
js读取样式属性
知识点:element.clienHeight 返回元素的可见高度element.clienWidth 返回元素的可见宽度这些属性返回值是一个数字,是不在px的,会获取元素的宽度或高度,包括内容区和内边距,这些属性事只读的elenent.offsetHeight返回元素的高度element.offsetWidth 返回元素的宽度获取元素的整个宽度和高度,包括内容区、内边距、边框element.offsetParent 获取当前元素的定位父元素会获取到离当前元素最近..原创 2022-01-22 23:26:44 · 578 阅读 · 0 评论 -
js判断x,y的坐标
把鼠标放入在盒子中,在下面盒子显示鼠标的坐标:知识点:事件对象:当事件的响应函数被触发时,浏览器每次都会将一个事件对象作为实参传递进响应函数在事件的对象中封装了当前事件相关的一切信息,比如,鼠标的坐标、键盘的那个按键按下、鼠标滚轮滚动的方向clientX可以获取鼠标指针的水平坐标clientY可以获取鼠标的垂直坐标在ie8及以下浏览器中,响应函数在触发时,浏览器不会传递事件对象,而是将事件对象作为window对象的属性 window.event代码如下:<!D原创 2022-01-21 23:26:47 · 1064 阅读 · 0 评论 -
js简单实现添加、删除记录
DOM增删改的方法:appendChild() 把新的节点添加到指定的节点。向一个父节点中添加一个新的子节点用法 :父节点.appendChild(子节点);removeChild() 删除子节点 语法:父节点.removChild(子节点)replaceChild() 替换子节点 使用指定的子节点替换已有的节点 语法:父节点.replaceChilld(新节点,子节点)insertBefore() 将指定的子节点前面插入新的子节点 在指定的子节点...原创 2022-01-21 21:33:53 · 1166 阅读 · 0 评论 -
html协议简单制作
当滚动条没有滚动到底是,下方注册按钮无效如果为表单项添加disable=“disable”表示表单将变成不可用状态onscroll改事件会在元素的滚动条滚动时触发disabled属性可以设置一个元素是否禁用,如果设置为true,则表示禁用, false则表示可用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http.原创 2022-01-21 21:20:46 · 1070 阅读 · 0 评论 -
DOM修改Css样式
1.修改box1的宽度、高度、背景颜色2.读取样式读取样式表style的样式语法:元素.currentStyle.样式名它可以用来读取当前元素正在显示的样式(谁生效就获取谁的)如果当前元素没有设置样式,则获取默认值注意currentStyle只有IE浏览器支持,其他不支持在其他浏览器可以使用:getComputerStyle()这个方法获取元素当前的样式,不支持ie8以下浏览器这个方法是windows的方法,需要2个参数:第一个,要获取样式的元素第二个,可以传递一原创 2022-01-18 23:02:47 · 1483 阅读 · 0 评论 -
JS实现增、删、改功能
创建一个“广州”节点,添加到#city下将“广州”节点插入到#bj前面使用广州节点替换#bj节点删除#bj节点读取#city内的HTML设置#bj内的HTML创建一个“广州”节点,添加到#city下用法2<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" conte原创 2022-01-14 22:01:25 · 689 阅读 · 0 评论 -
JS实现全选、全部选、反选、提交
当点击全选的时候,4多选框全部选上、当点击全不选的时候,4个多选框都不选、当点击反选的时候,点击按钮以后选中的变成没选中,没选中变成选中、当点击提交按钮时,点击按钮以后,将所有选中的多选框value属性值弹出、当全选/全部选按钮选择或取消下面4个多选框,全选或不选当4个多选框全选后,全选/全部选按钮才被选中在反选的时候也应判断4个是否为选中状态:若全选中则,全选/全部选按钮选中<!DOCTYPE html><html lang="en"><head>原创 2022-01-14 18:07:59 · 2047 阅读 · 0 评论 -
切换图片
通过运用js实现,设置两个按钮实现切换图片详细代码如下:<!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, initial-s原创 2022-01-11 16:13:44 · 547 阅读 · 0 评论 -
DOM查找练习
运用知识点:浏览器在加载一个页面的时候,是按照自上而下的顺序加载的,读取到一行就运行一行,如果将script标签写到也免得上边,在代码执行时,页面还没有加载DOM对象也没有加载,会导致无法获取到DOM对象,里面的button还没有加载,所获取到的btn对象为空浏览器在加载一个页面的时候,是按照自上而下的顺序加载的,读取到一行就运行一行,如果将script标签写到也免得上边,在代码执行时,页面还没有加载DOM对象也没有加载,会导致无法获取到DOM对象,里面的button还没有加载,所获取到的btn对象原创 2022-01-11 14:20:31 · 277 阅读 · 1 评论