JavaScript小练习
关注
分享
扫一扫
JavaScript的学习与应用
~嘘~禁止想象~
~嘘
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
手风琴效果（JavaScript练习）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; p.原创 2021-02-15 11:28:26 · 834 阅读 · 3 评论 -
利用正则添加千分符（JavaScript）
<body> <input type="text"> <button>添加千分符</button> <p></p></body>方法一： <script> var input = document.querySelector("input"); var p = document.querySelector("p"); var btn = document.query.原创 2021-02-05 09:34:56 · 400 阅读 · 2 评论 -
js实现商品筛选功能
应用场景：商品筛选<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { margin: 0; padding: 0; list-sty原创 2021-01-30 18:45:53 · 1093 阅读 · 0 评论 -
点击自制菜单
应用场景：当我们希望用户再点击右键的时候不希望弹出浏览器的默认菜单时，需要阻止浏览器默认行为，并执行我们想要的效果第一种方式，通过创建元素的方式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <原创 2021-01-30 13:08:41 · 276 阅读 · 2 评论 -
js 控制多选框选择项数
应用场景： 当我们限制多选框选择数量时用到<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><b原创 2021-01-28 13:10:01 · 650 阅读 · 0 评论 -
点击置顶
应用场景：当页面在下滑时右下角会有一个返回顶部，一点击会返回顶部<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <st原创 2021-01-28 12:39:56 · 200 阅读 · 0 评论 -
布局转换
应用场景：在某些情况下我们需要将浮动布局转换成为定位布局，以实现动画效果。我们通过给父级设置postion属性，使用offsetTop和offsetLeft获取位置后赋值<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&原创 2021-01-28 12:14:14 · 214 阅读 · 2 评论 -
实现寻找一个节点 上面所有兄弟节点 和 下面所有兄弟节点
直接上栗子：输出红色li元素上面和下面的节点<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><原创 2021-01-27 18:03:41 · 321 阅读 · 0 评论 -
实现一个鼠标移入移出盒子隐藏显示的效果
利用setTimeout实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> di原创 2021-01-21 09:01:41 · 1730 阅读 · 2 评论 -
点击元素抖动
应用场景：在用户点击到错误的地方时元素发生抖动<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>原创 2021-01-20 19:43:36 · 331 阅读 · 2 评论 -
鼠标移入显示图片案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> ul { .原创 2021-01-20 10:16:36 · 286 阅读 · 0 评论 -
找出3个数组中的最小相同值
// 给定三个含有n个元素的整型数组(无序)a,b和c，求他们最小的共同元素。 let a = [ [5, 9, 7, 3, 67, 8, 9, 10, 456], [1, 3, 4, 67, 8, 9, 10, 456], [2, 4, 6, 3, 4, 67, 8, 9, 10, 456] ]; for (let i = 0; i < 3; i++) { ...原创 2020-07-31 16:38:13 · 751 阅读 · 0 评论 -
记住用户名（利用本地存储）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title></head><body> <input type="t..原创 2020-06-30 23:36:07 · 257 阅读 · 0 评论 -
万年历（JavaScript）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> table { .原创 2020-06-21 19:01:55 · 664 阅读 · 0 评论 -
简易计算器（JavaScript）
<html><meta charset="utf-8"><head> <script> // 插入 function insert(num) { document.form.textview.value = document.form.textview.value + num; } // 计算 function equal() { .原创 2020-06-21 19:00:24 · 358 阅读 · 0 评论 -
移动端、pc端拖动元素移动
1. 移动端拖动元素移动<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * {原创 2020-06-07 11:32:28 · 449 阅读 · 0 评论 -
淘宝固定侧边栏(js小案例)
1. 须知需要用到页面滚动事件 scroll 因为是页面滚动，所以事件源是 document滚动到某个位置，就是判断页面被卷去的上部值页面被卷去的头部：可以通过window.pageYOffset 获得 如果是被卷去的左侧 window.pageXOffset注意：元素被卷去的头部是element.scrollTop,如果被卷去的是页面则是window.pageYOffset2. 代码<!DOCTYPE html><html lang="en"><head原创 2020-06-05 19:02:05 · 805 阅读 · 0 评论 -
animation动画封装函数（js小案例）
function animation(obj, target, callback) { clearInterval(obj.timer); /* 让每次只有一个定时器 */ obj.timer = setInterval(move, 30); // 1. 不占内存 2. 避免命名冲突 function move() { /* 将目标值取整 */ var step = (target - obj.offsetLeft) / 10; ..转载 2020-06-05 18:59:50 · 505 阅读 · 0 评论 -
模态框的拖拽 ( js小案例 )
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>模态框拖拽</title> <style> .click {原创 2020-05-30 12:59:17 · 413 阅读 · 0 评论 -
发送短信（js小案例）
按钮点击之后，会禁用 disabled 为 true同时按钮里面的内容会变化，注意 button 里面的内容通过 innerHTML 修改里面的秒数是有变化的，因此需要用到定时器定义一个变量，在定时器里面，不断递减如果变量为0，我们需要停止定时器，并且复原按钮的初始状态原本使用的两个定时器（有点冗余了）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...原创 2020-05-19 12:01:00 · 540 阅读 · 0 评论 -
定时器（js小案例）
这个倒计时是不断变化的，因此需要定时器来自动变化（setInterval）三个盒子里面分别存放时分秒三个盒子利用 innerHTML 放入计算的小时分钟秒数第一次执行也是间隔秒数，因此刚刷新页面是会有空白最好采取封装函数的方式，这样可以想调用一次这个函数，防止刚开始刷新页面有空白的问题<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta n.原创 2020-05-19 00:21:39 · 566 阅读 · 0 评论 -
模拟京东按键输入内容(js小案例)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { .原创 2020-05-12 15:54:24 · 657 阅读 · 0 评论 -
鼠标跟随天使（js小案例）
直接上代码了，就是一个图片跟随鼠标移动的效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>原创 2020-05-12 12:41:19 · 732 阅读 · 0 评论 -
动态生成表格（js小案例）
因为里面的数据是动态的，我们需要 js 动态生成。这里我们模拟数据，自己定义好数据，数据采取对象的形式存储所有的数据都是放到 tbody 里面的行里面因为行很多，我们需要循环创建多个行（对应多少人）需要学习的内容：利用数组和对象模拟数据库 for (var k in obj){ k 得到的是属性名 obj[k]得到的是属性值 }tbody.re...原创 2020-05-06 00:02:33 · 676 阅读 · 0 评论 -
模拟留言板（js小案例）
1. 添加<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> ...原创 2020-05-05 12:55:12 · 688 阅读 · 0 评论 -
模拟评论区效果（js小案例）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> ...原创 2020-05-01 14:30:22 · 1000 阅读 · 0 评论 -
下拉菜单（js小案例）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l...原创 2020-04-24 18:36:30 · 486 阅读 · 0 评论 -
Tab栏的切换（js小案例）
html部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>t...原创 2020-04-22 17:03:18 · 362 阅读 · 0 评论 -
密码较短提示（js小案例）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documen...原创 2020-04-18 20:46:17 · 376 阅读 · 0 评论 -
用 js 模仿 placeholder 的效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documen...原创 2020-04-18 20:43:25 · 414 阅读 · 0 评论 -
关于表单的三个小案例（js）
栗子1：点击 input 的 value 变化点击前点击后<body> <button>按钮</button> <input type="text" value="输入内容"> <script> // 1. 获取元素 var btn = document.querySele...原创 2020-04-18 20:40:33 · 407 阅读 · 0 评论 -
显示当前时间（js小案例）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&...原创 2020-04-18 20:32:21 · 388 阅读 · 0 评论 -
按钮点击变色（js小案例）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&...转载 2020-04-18 20:28:27 · 4311 阅读 · 0 评论 -
换皮肤（js小案例）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&...原创 2020-04-18 20:25:54 · 281 阅读 · 0 评论 -
鼠标经过变色（表格）（js）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&...原创 2020-04-18 20:23:00 · 596 阅读 · 0 评论 -
input的全选与反选（js小案例）
<!-- 1 --><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <ti...原创 2020-04-18 20:00:54 · 372 阅读 · 0 评论