![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
js练习
晚枫~
别放慢步伐,会成为更好的自己
展开
-
jQuery实例
1.新浪下拉菜单(核心代码)<body> <ul class="nav"> <li> <a href="#">微博</a> <ul> <li><a href="#">私信</a></li> <li><a href="#">评论原创 2022-02-24 15:02:21 · 218 阅读 · 0 评论 -
淘宝 flexible.js 源码分析
触发load事件的三种情况:1.a标签的超链接2.F5或者刷新按钮(强制刷新)3.前进后退按钮(function flexible(window, document) { // 获取的html 的根元素 var docEl = document.documentElement // dpr 物理像素比 // 看当前浏览器的物理像素比,能拿到显示物理像素比,找不到当1看 var dpr = window.devicePixelRatio原创 2022-02-23 15:07:38 · 156 阅读 · 0 评论 -
弹出框(模态框)拖拽
点击弹出层,会弹出模态框,且显示灰色半透明的遮挡层。点击关闭按钮,可以关闭弹出框,且灰色半透明遮挡层关闭。按住鼠标拖拽弹出框在页面中移动。可以停止拖动弹出框移动。(① 弹出框和遮挡层就会显示出来 display:block;② 弹出框和遮挡层就会隐藏起来 display:none;③ 在页面中拖拽的原理: 鼠标按下并且移动, 之后松开鼠标④ 触发事件是鼠标按下 mousedown, 鼠标移动mousemove 鼠标松开 mouseup⑤ 拖拽过程: 鼠标移动过程中,获得最新的值赋原创 2022-02-22 15:39:09 · 1033 阅读 · 0 评论 -
BOM对象案例
1.5秒钟之后自动跳转页面(利用定时器做倒计时效果;使用location.href实现页面跳转,封装函数并调用函数防止第一次刷新页面有空白。)<div></div> <script> var div = document.querySelector('div'); var timer = 5; coun(); setInterval(coun,1000); function原创 2022-02-22 14:31:46 · 158 阅读 · 0 评论 -
定时器案例
1.5秒后自动关闭的广告<img src="img/113.jpeg" alt="" class="ad"> <script> var ad = document.querySelector('.ad'); setTimeout(function() { ad.style.display = 'none'; }, 5000); </script>2.倒计时(倒计时是不断变原创 2022-02-21 17:24:59 · 290 阅读 · 0 评论 -
键盘事件案例
1.模拟京东按键输入内容(当按下s键,光标会定位到搜索框)(思路:检测用户是否按下s键,如果按下s键,就把光标定位到搜索框里。使用键盘事件对象里面的keyCode判断用户按下的是否为s键;使用js里面的focus()方法使搜索框获得焦点)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="w原创 2022-02-21 13:05:43 · 199 阅读 · 0 评论 -
节点操作案例
1.下拉菜单(仿微博)<!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-02-18 17:03:08 · 154 阅读 · 0 评论 -
tab栏切换(重点案例)
仿京东tab切换栏(鼠标点击相应的选型卡,下面内容会跟随变化)(利用排他思想)<!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, i原创 2022-02-16 10:15:09 · 382 阅读 · 1 评论 -
DOM实例2
1.显示隐藏文本框内容(当鼠标点击文本框时,里面的默认文字隐藏,当鼠标离开文本框时,里面的文字显示)(仿京东)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width原创 2022-02-15 15:08:18 · 322 阅读 · 0 评论 -
DOM实例1
1.循环精灵图背景(精灵图一般会被提前设计好)(仿淘宝)(利用for循环设置一组元素的精灵图背景)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=devic原创 2022-02-14 17:16:10 · 51 阅读 · 0 评论 -
js对象练习
1.猜数字游戏。要求用户猜1~50之间的一个数字,但是只有5次机会。function countDown(time){ var nowTime = +new Date(); //返回的是当前时间总的毫秒数 var inputTime = +new Date(time); //返回的是用户输入时间总的毫秒数 var times = (inputTime = nowTime)/1000; //time是剩余时间总的秒数 va原创 2022-02-14 15:43:22 · 2012 阅读 · 0 评论 -
js函数练习
js函数基础练习题原创 2022-01-24 15:21:55 · 1434 阅读 · 0 评论