- 博客(91)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 【本地存储(记住用户名)】
案例分析案例实现代码<!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"> &l
2022-05-07 20:46:29
137
原创 移动端轮播图
运行效果图先看效果案例说明案例分析案例实现代码移动端轮播图 js核心代码window.addEventListener('load', function() { // alert(1); // 获取元素 var focus = document.querySelector('.focus'); var ul = focus.children[0]; // 获得focus的宽度 var w = focus.offsetWidth;
2022-05-06 22:13:11
332
原创 移动端拖动元素
案例分析案例实现代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> &l
2022-05-06 16:33:19
217
原创 js网页特效动画（筋斗云案例）
案例说明案例分析案例实现代码demo.css* { margin: 0; padding: 0}ul { list-style: none;}body { background-color: black;}.c-nav { width: 900px; height: 42px; background: #fff url(images/rss.png) no-repeat right center; margin:
2022-05-06 11:31:19
2140
原创 js网页返回顶部动画特效
案例分析案例实现代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> &
2022-05-06 10:57:06
608
原创 引用animate.js动画函数（animate是自定义函数）
案例说明实现这样的一个效果注意利用好回调函数案例实现代码引用animate.jsfunction animate(obj, target, callback) { // console.log(callback); callback = function() {} 调用的时候 callback() // 先清除以前的定时器，只保留当前的一个定时器执行 clearInterval(obj.timer); obj.timer = setInterval(functio
2022-05-05 16:20:40
3714
原创 js实现动画原理（简单动画函数封装）(给不同对象添加不同的定时器)
动画原理 1. 获得盒子当前位置 2. 让盒子在当前位置加上1个移动距离 3. 利用定时器不断重复这个操作 4. 加一个结束定时器的条件 5. 注意此元素需要添加定位， 才能使用element.style.left
2022-05-04 17:17:56
120
原创 仿淘宝固定右侧侧边栏
案例说明案例分析各方面分析案例实现代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge
2022-05-04 16:46:28
210
原创 仿京东放大镜效果
案例分析案例实现代码<div class="preview_img"> <img src="upload/s3.png" alt=""> <div class="mask"></div> <div class="big"> <img src="upload/big.j
2022-05-04 12:00:41
113
原创 弹出框（模态框）拖拽效果
案例说明弹出框（模态框）拖拽效果案例分析案例实现代码<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> .login-header { width: 100%; text-align: center;
2022-05-04 10:30:15
208
原创 获取鼠标在盒子内的坐标
1.我们在盒子内点击， 想要得到鼠标距离盒子左右的距离。2. 首先得到鼠标在页面中的坐标**（ e.pageX, e.pageY）**3. 其次得到盒子在页面中的距离**(box.offsetLeft, box.offsetTop)**4. 用鼠标距离页面的坐标**减去**盒子在页面中的距离， 得到 鼠标在盒子内的坐标5. 如果想要移动一下鼠标，就要获取更新的坐标，使得鼠标移动的事件mousemove
2022-05-04 09:26:27
174
原创 获取URL参数数据，实现在不同页面数据相互传递
案例说明获取URL参数数据，实现在不同页面数据相互传递（利用URL里面的location.search参数）案例分析案例实现代码logain.html中的代码<form action="index.html"> 用户名: <input type="text" name="uname"> <input type="submit" value="提交"> </form>index中的代码<div>
2022-05-03 18:39:58
365
原创 5s后自动跳转页面
案例说明5s后自动跳转页面（注意第一次刷新时页面产生的空白）案例分析案例实现代码<!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-widt
2022-05-03 17:16:01
3519
原创 js实现发送短信，点击按钮后60秒内不能再次点击，实现定时器效果
1.按钮点击之后，会禁用 disabled 为true 2.同时按钮里面的内容会变化， 注意 button 里面的内容通过 innerHTML修改 3. 里面秒数是有变化的，因此需要用到定时器 4.定义一个变量，在定时器里面，不断递减 5.如果变量为0 说明到了时间，我们需要停止定时器，并且复原按钮初始状态
2022-05-03 10:51:11
1897
原创 倒计时案例
案例说明倒计时案例分析案例实现代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"&g
2022-05-02 16:14:32
79
原创 模拟京东快递单号查询
1.快递单号输入内容时， 上面的大号字体盒子（con）显示(这里面的字号更大）2.表单检测用户输入： 给表单添加键盘事件3. 同时把快递单号里面的值（value）获取过来赋值给 con盒子（innerText）做为内容4.如果快递单号里面内容为空，则隐藏大号字体盒子(con)盒子
2022-05-02 09:09:47
382
1
原创 按下S键，光标订到搜索框
案例说明案例题目案例分析案例实现代码<!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-01 17:45:38
597
原创 跟随鼠标的天使
案例说明跟随鼠标移动，利用鼠标移动事件mousemove案例分析代码中的 angel.gif案例实现代码js代码 <script> var pic = document.querySelector('img'); document.addEventListener('mousemove', function(e) { // 1. mousemove只要我们鼠标移动1px 就会触发这个事件 // con
2022-05-01 02:15:00
172
原创 动态生成表格案例
案例说明动态生成表格案例分析案例实现代码js重点代码<script> // 1.先去准备好学生的数据 var datas = [{ name: '魏璎珞', subject: 'JavaScript', score: 100 }, { name: '弘历', subject: 'JavaScript',
2022-04-30 12:16:18
174
原创 导航栏下拉菜单
案例说明导航栏下拉菜单案例分析案例实现代码js代码<script> // 1. 获取元素 var nav = document.querySelector('.nav'); var lis = nav.children; // 得到4个小li // 2.循环注册事件 for (var i = 0; i < lis.length; i++) { lis[i].onmouseov
2022-04-30 00:00:00
277
原创 tab栏切换（重点）
案例说明案例分析案例实现代码js重点部分<script> // 获取元素 var tab_list = document.querySelector('.tab_list'); var lis = tab_list.querySelectorAll('li'); var items = document.querySelectorAll('.item'); // for循环绑定点击事件 f
2022-04-29 15:45:24
131
原创 表单全选取消全选效果
案例说明表单点击按钮全选，取消全选效果代码案例分析案例实现代码css部分 * { padding: 0; margin: 0; } .wrap { width: 300px; margin: 100px auto 0; } table { border-collapse: col
2022-04-28 21:39:22
517
原创 更换背景图片
案例说明更换背景皮肤案例分析1.这个案例练习的是给一组元素注册事件2.给几个小图片利用循环注册点击事件3.当我们点击了这个图片，让我们页面背景改为当前的图片4.核心算法：把当前图片的src路径取过来，给body做为背景即可案例实现代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="w
2022-04-28 20:40:39
237
原创 排他思想（例多按钮点击只留当前按钮样式）
案例说明排他思想：如果同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想案例分析1.所有元素全部清除样式（干掉其他人）2.给当前元素设置样式3.注意顺序不能拉U乱，先干掉他人，在设置自己案例实现代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content=
2022-04-28 12:32:12
246
原创 密码框格式提示错误信息
案例说明用户如果离开密码框，里面输入个数不是6~16，则提示错误信息，否则提示输入正确信息案例分析1.首先判断的事件是表单失去焦点onblur2.如果输入正确则提示正确的信息颜色为绿色小图标变化3.如果输入不是6~16位，则提示错误信息颜色为红色小图标变化4.里面变化样式较多，我们采取className修改样式案例实现代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8
2022-04-27 22:07:28
795
原创 循环精灵图（解放我们的双手）
案例：循环精灵图背景可以利用for循环设置一组元素的精灵图背景案例分析：1、首先精灵图图片排列必须是有规律的2、核心思路：利用for循环 修改精灵图片的背景位置background-position3、让循环里面的i索引号 * 每个图片的y坐标案例实现代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewp
2022-04-27 21:09:25
379
原创 点击关闭/广告/二维码案例
案例内容：点击关闭广告/二维码案例案例分析：**核心思路：**利用样式的显示和隐藏完成此案例，**display:none隐藏元素 ，display：block显示元素，**点击按钮即可隐藏起来<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ini
2022-04-27 20:49:54
121
原创 点击密码框显示密码（点击密码框小眼睛可显示输入密码）
案例分析`登录注册页面中，当我们输入密码时，密码显示的是不可见的，是属于密码框类型，点击小眼睛之后显示密码。**核心思路：**1.点击眼睛按钮，把不可见的密码框类型改成可见的文本框就可看见里面的密码。2.一个按钮分两个状态，点击一次，切换为可见的文本框，继续点击一次切换为密码框不可见算法：利用一个flag变量，来判断flag的值，如果是1就切换为文本框，flag设置为0；如果是0就切换为密码框，flag设置为1css部分<style> .box {
2022-04-27 17:36:50
10438
1
原创 操作元素之改变元素内容（显示当前时间）
1.innerText和innerHTML的区别*****element,innerText**从起始位置到终止位置的内容，但它去除html标签，同时也**去除空格和换行****element.innerHTML**从起始位置到终止位置的**全部内容，**包括html标签，同时**保留空格 和换行**
2022-04-27 11:13:01
138
原创 判断一个字符串中出现次数最多最多的次数，并统计其次数
var str = 'abcoefosshdgghdzzoppsga';var o = {};for (var i = 0; i < str.length; i++) { var chars = str.charAt(i); //chars是字符串的每一个字符 if (o[chars]) { //o[chars]得到的是属性值 o[chars]++; } else { o[chars] = 1; }}console.log(o).
2022-04-25 11:42:06
250
原创 根据位置返回字符（重点）
// 根据位置返回字符// 1.charAt(index)根据位置返回字符var str = 'andy';console.log(str.charAt(3));// 遍历所有的字符for (var i = 0; i < str.length; i++) { console.log(str.charAt(i));}// 2.charCodeAt(index)返回相应索引号的字符ASCII值 目的:判断用户按下了那个键console.log(str.charCodeAt(0)).
2022-04-25 11:19:17
105
原创 查找字符串中某个字符出现的次数/查找数组中某个元素出现的次数
// 1.核心算法：先查找第一个O出现的位置// 2.然后 只要indexof返回的结果不是-1就继续往后查找// 因为indexof只能查找到第一个，所以后面的查找，利用第二个参数，当前索引加1，从而继续查找var str = 'abcoefoxyozozopp';var index = str.indexOf('o');var num = 0;// console.log(index);while (index !== -1) { console.log(index); .
2022-04-25 09:18:52
1048
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人