javascript案例
Favour72
一方水土养一方人,圆圆的地球养圆圆的我
展开
-
JavaScript案例-----放大镜
1.鼠标经过小图片盒子,黄色的遮挡层和大图片盒子显示,离开隐藏2个盒子功能,就是显示与隐藏2.鼠标移动的时候,让黄色的盒子跟着鼠标来走 把鼠标坐标给遮挡层不合适。因为遮当层坐标以父盒子为准。 首先是获得鼠标在盒子的坐标 之后把数值给遮挡层做为left和top值。盒子高度 300的一半 150 此时用到鼠标移动事件,但是还是在小图片盒子内移动。mask移动的距离遮挡层不能超出小图片盒子范围大图片的移动距离=遮...原创 2022-06-23 21:32:38 · 220 阅读 · 0 评论 -
javascript案例-----拖动模态框
模态框,我们也叫弹出框,可以在网易云,京东等之类的网页中看到1.点击弹出层,会弹出模态框,并且显示灰色半透明的遮挡层。 2.点击关闭按钮,可以关闭模态框,并且同时关闭灰色半透明遮挡层。 3.鼠标放到模态框最上面一行,可以按住鼠标拖拽模态框在页面中移动。 4.鼠标松开,可以停止拖动模态框移动。在页面中拖拽的原理︰鼠标按下并且移动,之后松开鼠标 触发事件是鼠标按下mousedown,鼠标移动mocss部分:javascript部分:...原创 2022-06-22 19:13:58 · 492 阅读 · 0 评论 -
javascript案例-----获取鼠标在盒子内的坐标
我们在盒子内点击,想要得到鼠标距离盒子左右的距离。 首先得到鼠标在页面中的坐标( e.pagex e.pageY ) 其次得到盒子在页面中的距离( box.offsetLeft, box.offsetTop) 用鼠标距离页面的坐标减去盒子在页面中的距离,得到鼠标在盒子内的坐标 如果想要移动一下鼠标,就要获取最新的坐标,使用鼠标移动事件mousemove...原创 2022-06-21 20:47:36 · 470 阅读 · 0 评论 -
javascript小案例-----发送短信验证码案例
1.按钮点击之后,会禁用disabled 为true 2.同时按钮里面的内容会变化,注意button里面的内容通过innerHTML修改里面秒数 是有变化的,因此需要用到定时器 3.定义一个变量,在定时器里面,不断递减 4.如果变量为0说明到了时间,我们需要停止定时器,并且复原按钮初始状态。......原创 2022-06-14 10:47:49 · 177 阅读 · 0 评论 -
javascript小案例-----倒计时
这个倒计时是不断变化的,因此需要定时器来自动变化 ( setInterval ) 三个黑色盒子里面分别存放时分秒 三个黑色盒子利用innerHTML放入计算的小时分钟秒数 第一次执行也是间隔毫秒数,因此刷新页面会有空白 最好采取封装函数的方法,这样可以先调用一次这个函数...原创 2022-06-14 10:47:08 · 121 阅读 · 0 评论 -
javascript小案例-----快递单号查询
快递单号输入内容时,上面的大号字体盒子( con)显示(这里面的字号更大)表单检测用户输入∶给表单添加键盘事件同时把快递单号里面的值( value )获取过来赋值给con盒子( innerText )做为内容 如果快递单号里面内容为空,则隐藏大号字体盒(con)盒子 当我们失去焦点, 就隐藏这个con盒子 当我们获得焦点,并且文本框内容不为空,就显示这个con盒子...原创 2022-06-13 21:52:34 · 929 阅读 · 0 评论 -
javascript小案例-----按键搜索框获得焦点输入内容
核心思路:检测用户是否按下了s 键,如果按下s 键,就把光标定位到搜索框里面 使用键盘事件对象里面的keyCode判断用户按下的是否是s键 搜索框获得焦点:使用js里面的 focus()方法原创 2022-06-13 12:53:36 · 614 阅读 · 3 评论 -
javascript小案例-----动态生成删除表格
javascript部分:分为4部分:1.先准备好学生数据 ,用数组存放对象2.在tbody里面创建行,有几个人就创建几行(通过数组长度得到)3.行里面创建单元格 td 单元格的数量取决于每个对象里面的属性个数4.创建有删除元素的单元格...原创 2022-06-11 09:05:48 · 555 阅读 · 0 评论 -
javascript小案例-----跟随鼠标移动的小天使
1.鼠标不断的移动,使用鼠标移动事件:mousemove2.在页面中移动,给document注册事件3.图片要移动距离,而且不占位置,使用相对定位 核心原理:每次鼠标移动,都会获得最新的鼠标坐标,把这个x和y作为图片的top和left值就可以移动图片注意:不要忘记给left和top添加px单位......原创 2022-06-12 21:19:43 · 333 阅读 · 0 评论 -
javascript小案例------发布和删除留言
1. 添加部分 点击按钮就创建一个li,然后把li添加到ul里面 在创建li的时候要把文本域里面的值通过li.innerHTML赋值��lis 如果想要新的留言显示到最后面就用appendChild 如果想要显示最前面就用insetBefore 2.删除部分 当我们把文本域里面的值赋值给li的时候,多添加一个删除的连接 需要把所有的连接获取过来,当我们点击当前链接时,删除当前链接所在的li 阻止链接跳转需要添加j......原创 2022-06-09 23:19:56 · 329 阅读 · 0 评论 -
javascript小案例-----下拉菜单
代码思路:效果如下: HTML代码:创建一个下拉菜单的框架css代码:设置下拉菜单的一些固定样式样式,比如把父亲的孩子隐藏,比如子绝父相javascript部分代码:原创 2022-06-01 23:09:43 · 230 阅读 · 0 评论 -
javascript小案例-----tab栏切换
效果如下:代码思路: 上面的选项卡,点击某一个,当前这一个会变成粉红色,其他不变(排他思想) 修改类名的方式 下面的内容会随着上面的选项卡变化,所以下面的模块变化要写到点击事件里面 下面的模块显示内容和上面的选项卡一一对应,相匹配html代码: <div class="container"> <ul class="header"> <li class="on"><a href...原创 2022-05-24 22:38:22 · 146 阅读 · 0 评论 -
javascript小案例-----表单全选与取消全选(简单购物车案例)
效果如下:代码思路:全选和取消全选 把复选框的checked属性(选中状态) 跟随全选按钮 下面复选框全部选中,上面全选才能选中 给下面所有的复选框绑定事件,每次点击,都要循环查看下面所有的复选框是否有未选中的 如果有一个未选中的,上面全选就不选中代码如下:html部分:比较懒,用的上一个隔行变色案例的表格,那什么有效果就行 <table border="1" cellpadding="10px" rules="all"> <thead原创 2022-05-20 23:11:25 · 539 阅读 · 0 评论 -
javascript小案例-----表单隔行变色
效果如下:代码思路:用到鼠标经过onmouseover 鼠标离开onmouseout 鼠标经过tr行,当前的行变背景颜色,鼠标离开去掉当前的背景颜色 注意:第一行 th不需要变色, 只用获得有td的行,这里我们用thead和tbody进行区分代码如下:html部分: <table border="1" cellpadding="10px" rules="all"> <thead> <tr> <th>.原创 2022-05-20 23:03:44 · 285 阅读 · 0 评论 -
javascript小案例-----换肤效果
效果如下:代码思路: 给一组元素注册事件 给3个小图片利用循环注册点击事件 当我们点击这个图片,让页面背景给为当前图片 把当前图片的src路径取过来,给body作为背景html部分: <ul class="box"> <li><img src="img/pic01.jpg"></li> <li><img src="img/pic02.jpg"></li>...原创 2022-05-20 00:11:41 · 306 阅读 · 0 评论 -
javascript小案例-----点击按钮变色
效果如下:代码如下:在这个案例中主要用到的是排他思想html部分输入我们所需要的按钮个数 <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <button>按钮4</button> <button>按钮5</button>css部分 <style ty.原创 2022-05-20 00:07:45 · 2151 阅读 · 0 评论 -
JavaScript-----详细讲解js节点以及节点操作
获取元素通常使用两种方式:利用DOM提供的方法获取元素document.querySelector()document.getElementsByClassName()document.getElementsByTagName()document.getElementById()利用节点层级关系获取元素利用父子兄弟节点关系获取元素逻辑性强,但兼容性较差🍓.🐇.网页中的所有内容都是节点(标签,属性,文本,注释等),在DOM中,节点用node表示...原创 2022-05-18 08:24:02 · 3523 阅读 · 0 评论 -
javascript案例-----关闭二维码
案例思路:利用样式的显示和隐藏,display:none隐藏元素 和display:block 显示元素<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box{ position: relative; width: 80px; h原创 2022-05-18 00:45:04 · 332 阅读 · 0 评论 -
javascript案例-----密码框验证消息
<!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"> ...原创 2022-05-18 00:42:43 · 300 阅读 · 2 评论