javaScript常用案例
javaScript常用案例
- 案例1:点击按钮弹出弹框
- 案例2:点击按钮控制台输出内容
- 案例3:点击按钮显示当前时间
- 案例4:点击按钮切换图片
- 案例5:分时间问候显示不同图片
- 案例6:隐藏密码功能
- 案例7:关闭淘宝二维码
- 案例8:循环精灵图
- 案例9:显示隐藏文本框
- 案例10:仿新浪,注册登录界面
- 案例11:排他思想:点击按钮切换背景颜色:排除其他元素,仅给一个元素添加样式
- 案例12:百度换肤效果:点击图片将背景切换与图片相同
- 案例13:表格隔行变色效果
- 案例14:全选,反选
- 案例15:tab栏切换
- 案例16:新浪下拉菜单
- 案例17:留言添加操作
- 案例18:留言删除操作
- 案例19:动态生成表格
- 案例20:模拟京东按键输入内容
- 案例21:模拟京东快递单号查询案例
- 案例22:倒计时效果
- 案例23:发送短信案例
- 案例24:5秒之后自动跳转页面
- 案例25:发送短信案例
- 案例26:拖动的模态框
- 案例27:仿京东放大镜效果
- 案例28:仿淘宝侧边栏
案例1:点击按钮弹出弹框
<body><button id="btn">唐伯虎</button><script>// 点击一个按钮,弹出对话框//(1) 事件源 事件被触发的对象 谁 按钮var btn = document.getElementById('btn');//(2) 事件类型 如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下//(3) 事件处理程序 通过一个函数赋值的方式 完成btn.onclick = function() {alert('点秋香');}</script>
</body>
案例2:点击按钮控制台输出内容
<body><div>点我呀</div><script>// 点击div 控制台输出 我被选中了// 获取事件源var div = document.querySelector('div');// 注册事件,添加事件处理程序div.onclick = function() {console.log('小样儿,还真敢点');}</script>
</body>
案例3:点击按钮显示当前时间
<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"><title>Document</title><style>div,p {width: 300px;height: 30px;line-height: 30px;color: #fff;background-color: pink;}</style>
</head>
<body><button>显示当前系统时间</button><div>某个时间</div><p>1123</p><script>// 当我们点击了按钮, div里面的文字会发生变化// 1. 获取元素 var btn = document.querySelector('button');var div = document.querySelector('div');// 2.注册事件btn.onclick = function() {// div.innerText = '2019-6-6';div.innerHTML = getDate();}function getDate() {var date = new Date();// 我们写一个 2019年 5月 1日 星期三var year = date.getFullYear();var month = date.getMonth() + 1;var dates = date.getDate();var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];var day = date.getDay();return '今天是:' + year + '年' + month + '月' + dates + '日 ' + arr[day];}// 我们元素可以不用添加事件var p = document.querySelector('p');p.innerHTML = getDate();</script>
</body>
案例4:点击按钮切换图片
<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"><title>Document</title><style>img {width: 300px;}</style>
</head><body><button id="ldh">刘德华</button><button id="zxy">张学友</button> <br><img src="data:images/ldh.jpg" alt="" title="刘德华"><script>// 修改元素属性 src// 1. 获取元素var ldh = document.getElementById('ldh');var zxy = document.getElementById('zxy');var img = document.querySelector('img');// 2. 注册事件 处理程序zxy.onclick = function() {img.src = 'images/zxy.jpg';img.title = '张学友';}ldh.onclick = function() {img.src = 'images/ldh.jpg';img.title = '刘德华';}</script>
</body>
案例5:分时间问候显示不同图片
<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"><title>Document</title><style>img {width: 300px;}</style>
</head><body><img src="data:images/s.gif" alt=""><div>上午好</div><script>// 根据系统不同时间来判断,所以需要用到日期内置对象// 利用多分支语句来设置不同的图片// 需要一个图片,并且根据时间修改图片,就需要用到操作元素src属性// 需要一个div元素,显示不同问候语,修改元素内容即可// 1.获取元素var img = document.querySelector('img');var div = document.querySelector('div');// 2. 得到当前的小时数var date = new Date();var h = date.getHours();// 3. 判断小时数改变图片和文字信息if (h < 12) {img.src = 'images/s.gif';div.innerHTML = '亲,上午好,好好写代码';} else if (h < 18) {img.src = 'images/x.gif';div.innerHTML = '亲,下午好,好好写代码';} else {img.src = 'images/w.gif';div.innerHTML = '亲,晚上好,好好写代码';}</script>
</body>
案例6:隐藏密码功能
<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"><title>Document</title><style>.box {position: relative;width: 400px;border-bottom: 1px solid #ccc;margin: 100px auto;}.box input {width: 370px;height: 30px;border: 0;outline: none;}.box img {position: absolute;top: 2px;right: 2px;width: 24px;}</style>
</head><body><div class="box"><label for=""><img src="data:images/close.png" alt="" id="eye"></label><input type="password" name="" id="pwd"></div><script>// 1. 获取元素var eye = document.getElementById('eye');var pwd = document.getElementById('pwd');// 2. 注册事件 处理程序var flag = 0;eye.onclick = function() {// 点击一次之后, flag 一定要变化if (flag == 0) {pwd.type = 'text';eye.src = 'images/open.png';flag = 1; // 赋值操作} else {pwd.type = 'password';eye.src = 'images/close.png';flag = 0;}}</script>
</body>
案例7:关闭淘宝二维码
<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"><title>Document</title><style>.box {position: relative;width: 74px;height: 88px;border: 1px solid #ccc;margin: 100px auto;font-size: 12px;text-align: center;color: #f40;/* display: block; */}.box img {width: 60px;margin-top: 5px;}.close-btn {position: absolute;top: -1px;left: -16px;width: 14px;height: 14px;border: 1px solid #ccc;line-height: 14px;font-family: Arial, Helvetica, sans-serif;cursor: pointer;}</style>
</head><body><div class="box">淘宝二维码<img src="data:images/tao.png" alt=""><!-- 关闭按钮 --><i class="close-btn">×</i></div><script>// 1. 获取元素 var btn = document.querySelector('.close-btn');var box = document.querySelector('.box');// 2.注册事件 程序处理btn.onclick = function() {box.style.display = 'none';}</script>
</body>
案例8:循环精灵图
<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"><title>Document</title><style>* {margin: 0;padding: 0;}li {list-style-type: none;}.box {width: 250px;margin: 100px auto;}.box li {float: left;width: 24px;height: 24px;background-color: pink;margin: 15px;background: url(images/sprite.png) no-repeat;}</style>
</head><body><div class="box"><ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul></div><script>// 1. 获取元素 所有的小li var lis = document.querySelectorAll('li');for (var i = 0; i < lis.length; i++) {// 让索引号 乘以 44 就是每个li 的背景y坐标 index就是我们的y坐标var index = i * 44;lis[i].style.backgroundPosition = '0 -' + index + 'px';}</script>
</body>
案例9:显示隐藏文本框
<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"><title>Document</title><style>input {color: #999;}</style>
</head><body><input type="text" value="手机"><script>// 1.获取元素var text = document.querySelector('input');// 2.注册事件 获得焦点事件 onfocus text.onfocus = function() {// console.log('得到了焦点');if (this.value === '手机') {this.value = '';}// 获得焦点需要把文本框里面的文字颜色变黑this.style.color = '#333';}// 3. 注册事件 失去焦点事件 onblurtext.onblur = function() {// console.log('失去了焦点');if (this.value === '') {this.value = '手机';}// 失去焦点需要把文本框里面的文字颜色变浅色this.style.color = '#999';}</script></body>
案例10:仿新浪,注册登录界面
<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"><title>Document</title><style>div {width: 600px;margin: 100px auto;}.message {display: inline-block;font-size: 12px;color: #999;background: url(images/mess.png) no-repeat left center;padding-left: 20px;}.wrong {color: red;background-image: url(images/wrong.png);}.right {color: green;background-image: url(images/right.png);}</style>
</head><body><div class="register"><input type="password" class="ipt"><p class="message">请输入6~16位密码</p></div><script>// 首先判断的事件是表单失去焦点 onblur// 如果输入正确则提示正确的信息颜色为绿色小图标变化// 如果输入不是6到16位,则提示错误信息颜色为红色 小图标变化// 因为里面变化样式较多,我们采取className修改样式// 1.获取元素// 获取表单var ipt = document.querySelector('.ipt');// 获取提示信息var message = document.querySelector('.message');//2. 注册事件 失去焦点ipt.onblur = function() {// 根据表单里面值的长度 ipt.value.lengthif (this.value.length < 6 || this.value.length > 16) {console.log('错误');message.className = 'message wrong';message.innerHTML = '您输入的位数不对要求6~16位';} else {message.className = 'message right';message.innerHTML = '您输入的正确';}}</script>
</body>
案例11:排他思想:点击按钮切换背景颜色:排除其他元素,仅给一个元素添加样式
首先将所有元素样式清空,再设置单个元素
<body><button>按钮1</button><button>按钮2</button><button>按钮3</button><button>按钮4</button><button>按钮5</button><script>// 1. 获取所有按钮元素var btns = document.getElementsByTagName('button');// btns得到的是伪数组 里面的每一个元素 btns[i]for (var i = 0; i < btns.length; i++) {btns[i].onclick = function() {// (1) 我们先把所有的按钮背景颜色去掉 干掉所有人for (var i = 0; i < btns.length; i++) {btns[i].style.backgroundColor = '';}// (2) 然后才让当前的元素背景颜色为pink 留下我自己this.style.backgroundColor = 'pink';}}//2. 首先先排除其他人,然后才设置自己的样式 这种排除其他人的思想我们成为排他思想</script>
</body>
案例12:百度换肤效果:点击图片将背景切换与图片相同
<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"><title>Document</title><style>* {margin: 0;padding: 0;}body {background: url(images/1.jpg) no-repeat center top;}li {list-style: none;}.baidu {overflow: hidden;margin: 100px auto;background-color: #fff;width: 410px;padding-top: 3px;}.baidu li {float: left;margin: 0 1px;cursor: pointer;}.baidu img {width: 100px;}</style>
</head><body><ul class="baidu"><li><img src="data:images/1.jpg"></li><li><img src="data:images/2.jpg"></li><li><img src="data:images/3.jpg"></li><li><img src="data:images/4.jpg"></li></ul><script>// 1. 获取元素 var imgs = document.querySelector('.baidu').querySelectorAll('img');// console.log(imgs);// 2. 循环注册事件 for (var i = 0; i < imgs.length; i++) {imgs[i].onclick = function() {// this.src 就是我们点击图片的路径 images/2.jpg// console.log(this.src);// 把这个路径 this.src 给body 就可以了document.body.style.backgroundImage = 'url(' + this.src + ')';}}</script>
</body>
案例13:表格隔行变色效果
- 用到新的鼠标事件 鼠标经过 onmouseover 鼠标离开 onmouseout
- 核心思路:鼠标经过 tr 行,当前的行变背景颜色, 鼠标离开去掉当前的背景颜色
- 注意: 第一行(thead里面的行)不需要变换颜色,因此我们获取的是 tbody 里面的行
<head><style>.bg {background-color: pink;}</style>
</head>
<body></table><script>// 1.获取元素 获取的是 tbody 里面所有的行var trs = document.querySelector('tbody').querySelectorAll('tr');// 2. 利用循环绑定注册事件for (var i = 0; i < trs.length; i++) {// 3. 鼠标经过事件 onmouseovertrs[i].onmouseover = function() {// console.log(11);this.className = 'bg';}// 4. 鼠标离开事件 onmouseouttrs[i].onmouseout = function() {this.className = '';}}</script>
</body>
案例14:全选,反选
全选和取消全选做法: 让下面所有复选框的checked属性(选中状态) 跟随 全选按钮即可
下面复选框需要全部选中, 上面全选才能选中做法: 给下面所有复选框绑定点击事件,每次点击,都要循环查看下面所有的复选框是否有没选中的,如果有一个没选中的, 上面全选就不选中。
可以设置一个变量,来控制全选是否选中
<script>// 1. 全选和取消全选做法: 让下面所有复选框的checked属性(选中状态) 跟随 全选按钮即可// 获取元素var j_cbAll = document.getElementById('j_cbAll'); // 全选按钮var j_tbs = document.getElementById('j_tb').getElementsByTagName('input'); // 下面所有的复选框// 注册事件j_cbAll.onclick = function() {// this.checked 它可以得到当前复选框的选中状态如果是true 就是选中,如果是false 就是未选中console.log(this.checked);for (var i = 0; i < j_tbs.length; i++) {j_tbs[i].checked = this.checked;}}// 2. 下面复选框需要全部选中, 上面全选才能选中做法: 给下面所有复选框绑定点击事件,每次点击,都要循环查看下面所有的复选框是否有没选中的,如果有一个没选中的, 上面全选就不选中。for (var i = 0; i < j_tbs.length; i++) {j_tbs[i].onclick = function() {// flag 控制全选按钮是否选中var flag = true;// 每次点击下面的复选框都要循环检查者4个小按钮是否全被选中,有一个未选中就是falsefor (var i = 0; i < j_tbs.length; i++) {if (!j_tbs[i].checked) {flag = false;break; // 退出for循环 这样可以提高执行效率 因为只要有一个没有选中,剩下的就无需循环判断了}}j_cbAll.checked = flag;}}</script>
案例15:tab栏切换
<body><div class="tab"><div class="tab_list"><ul><li class="current">商品介绍</li><li>规格与包装</li><li>售后保障</li><li>商品评价(50000)</li><li>手机社区</li></ul></div><div class="tab_con"><div class="item" style="display: block;">商品介绍模块内容</div><div class="item">规格与包装模块内容</div><div class="item">售后保障模块内容</div><div class="item">商品评价(50000)模块内容</div><div class="item">手机社区模块内容</div></div></div><script>// 获取元素var tab_list = document.querySelector('.tab_list');var lis = tab_list.querySelectorAll('li');var items = document.querySelectorAll('.item');// for循环绑定点击事件for (var i = 0; i < lis.length; i++) {// 开始给5个小li 设置索引号 lis[i].setAttribute('index', i);lis[i].onclick = function() {// 1. 上的模块选项卡,点击某一个,当前这一个底色会是红色,其余不变(排他思想) 修改类名的方式// 干掉所有人 其余的li清除 class 这个类for (var i = 0; i < lis.length; i++) {lis[i].className = '';}// 留下我自己 this.className = 'current';// 2. 下面的显示内容模块var index = this.getAttribute('index');console.log(index);// 干掉所有人 让其余的item 这些div 隐藏for (var i = 0; i < items.length; i++) {items[i].style.display = 'none';}// 留下我自己 让对应的item 显示出来items[index].style.display = 'block';}}</script>
</body>
案例16:新浪下拉菜单
<body><ul class="nav"><li><a href="#">微博</a><ul><li><a href="">私信</a></li><li><a href="">评论</a></li><li><a href="">@我</a></li></ul></li><li><a href="#">微博</a><ul><li><a href="">私信</a></li><li><a href="">评论</a></li><li><a href="">@我</a></li></ul></li><li><a href="#">微博</a><ul><li><a href="">私信</a></li><li><a href="">评论</a></li><li><a href="">@我</a></li></ul></li><li><a href="#">微博</a><ul><li><a href="">私信</a></li><li><a href="">评论</a></li><li><a href="">@我</a></li></ul></li></ul><script>// 1. 获取元素var nav = document.querySelector('.nav');var lis = nav.children; // 得到4个小li// 2.循环注册事件for (var i = 0; i < lis.length; i++) {lis[i].onmouseover = function() {this.children[1].style.display = 'block';}lis[i].onmouseout = function() {this.children[1].style.display = 'none';}}</script>
</body>
案例17:留言添加操作
<body><textarea name="" id=""></textarea><button>发布</button><ul></ul><script>// 1. 获取元素var btn = document.querySelector('button');var text = document.querySelector('textarea');var ul = document.querySelector('ul');// 2. 注册事件btn.onclick = function() {if (text.value == '') {alert('您没有输入内容');return false;} else {// console.log(text.value);// (1) 创建元素var li = document.createElement('li');// 先有li 才能赋值//留言显示相应内容li.innerHTML = text.value;// (2) 添加元素// ul.appendChild(li);//最新的留言置顶ul.insertBefore(li, ul.children[0]);}}</script>
</body>
案例18:留言删除操作
<body><textarea name="" id=""></textarea><button>发布</button><ul></ul><script>// 1. 获取元素var btn = document.querySelector('button');var text = document.querySelector('textarea');var ul = document.querySelector('ul');// 2. 注册事件btn.onclick = function() {if (text.value == '') {alert('您没有输入内容');return false;} else {// console.log(text.value);// (1) 创建元素var li = document.createElement('li');// 先有li 才能赋值li.innerHTML = text.value + "<a href='javascript:;'>删除</a>";// (2) 添加元素// ul.appendChild(li);ul.insertBefore(li, ul.children[0]);// (3) 删除元素 删除的是当前链接的li 它的父亲var as = document.querySelectorAll('a');for (var i = 0; i < as.length; i++) {as[i].onclick = function() {// node.removeChild(child); 删除的是 li 当前a所在的li this.parentNode;ul.removeChild(this.parentNode);}}}}</script>
</body>
案例19:动态生成表格
<body><table cellspacing="0"><thead><tr><th>姓名</th><th>科目</th><th>成绩</th><th>操作</th></tr></thead><tbody></tbody></table><script>// 1.先去准备好学生的数据var datas = [{name: '魏璎珞',subject: 'JavaScript',score: 100}, {name: '弘历',subject: 'JavaScript',score: 98}, {name: '傅恒',subject: 'JavaScript',score: 99}, {name: '明玉',subject: 'JavaScript',score: 88}, {name: '大猪蹄子',subject: 'JavaScript',score: 0}];// 2. 往tbody 里面创建行: 有几个人(通过数组的长度)我们就创建几行var tbody = document.querySelector('tbody');for (var i = 0; i < datas.length; i++) { // 外面的for循环管行 tr// 1. 创建 tr行var tr = document.createElement('tr');tbody.appendChild(tr);// 2. 行里面创建单元格(跟数据有关系的3个单元格) td 单元格的数量取决于每个对象里面的属性个数 for循环遍历对象 datas[i]for (var k in datas[i]) { // 里面的for循环管列 td// 创建单元格 var td = document.createElement('td');// 把对象里面的属性值 datas[i][k] 给 td // console.log(datas[i][k]);td.innerHTML = datas[i][k];tr.appendChild(td);}// 3. 创建有删除2个字的单元格 var td = document.createElement('td');td.innerHTML = '<a href="javascript:;">删除 </a>';tr.appendChild(td);}// 4. 删除操作 开始 var as = document.querySelectorAll('a');for (var i = 0; i < as.length; i++) {as[i].onclick = function() {// 点击a 删除 当前a 所在的行(链接的爸爸的爸爸) node.removeChild(child) tbody.removeChild(this.parentNode.parentNode)}}// for(var k in obj) {// k 得到的是属性名// obj[k] 得到是属性值// }</script>
</body>
案例20:模拟京东按键输入内容
<body><input type="text"><script>// 核心思路: 检测用户是否按下了s 键,如果按下s 键,就把光标定位到搜索框里面// 使用键盘事件对象里面的keyCode 判断用户按下的是否是s键// 搜索框获得焦点: 使用 js 里面的 focus() 方法var search = document.querySelector('input');document.addEventListener('keyup', function(e) {// console.log(e.keyCode);if (e.keyCode === 83) {search.focus();}})</script>
</body>
案例21:模拟京东快递单号查询案例
keydown和keypress在文本框里面的特点:他们两个事件触发的时候,文字还没有落入文本框中。
- 快递单号输入内容时, 上面的大号字体盒子(con)显示(这里面的文字
- 同时把快递单号里面的值(value)获取过来赋值给 con盒子(innerText)做为内容
- 如果快递单号里面内容为空,则隐藏大号字体盒子(con)盒子
- 注意: keydown 和 keypress 在文本框里面的特点: 他们两个事件触发的时候,文字还没有落入文本框中。
- keyup事件触发的时候, 文字已经落入文本框里面了
- 当我们失去焦点,就隐藏这个con盒子
- 当我们获得焦点,并且文本框内容不为空,就显示这个con盒子
<body><div class="search"><div class="con">123</div><input type="text" placeholder="请输入您的快递单号" class="jd"></div><script>// 快递单号输入内容时, 上面的大号字体盒子(con)显示(这里面的字号更大)// 表单检测用户输入: 给表单添加键盘事件// 同时把快递单号里面的值(value)获取过来赋值给 con盒子(innerText)做为内容// 如果快递单号里面内容为空,则隐藏大号字体盒子(con)盒子var con = document.querySelector('.con');var jd_input = document.querySelector('.jd');jd_input.addEventListener('keyup', function() {// console.log('输入内容啦');if (this.value == '') {con.style.display = 'none';} else {con.style.display = 'block';con.innerText = this.value;}})// 当我们失去焦点,就隐藏这个con盒子jd_input.addEventListener('blur', function() {con.style.display = 'none';})// 当我们获得焦点,就显示这个con盒子jd_input.addEventListener('focus', function() {if (this.value !== '') {con.style.display = 'block';}})</script>
</body>
案例22:倒计时效果
- 这个倒计时是不断变化的,因此需要定时器来自动变化(setInterval)
- 三个黑色盒子里面分别存放时分秒
- 三个黑色盒子利用innerHTML 放入计算的小时分钟秒数
- 第一次执行也是间隔毫秒数,因此刚刷新页面会有空白
- 最好采取封装函数的方式, 这样可以先调用一次这个函数,防止刚开始刷新页面有空白问题
<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"><title>Document</title><style>div {margin: 200px;}span {display: inline-block;width: 40px;height: 40px;background-color: #333;font-size: 20px;color: #fff;text-align: center;line-height: 40px;}</style>
</head>
<body><div><span class="hour">1</span><span class="minute">2</span><span class="second">3</span></div><script>// 1. 获取元素 var hour = document.querySelector('.hour'); // 小时的黑色盒子var minute = document.querySelector('.minute'); // 分钟的黑色盒子var second = document.querySelector('.second'); // 秒数的黑色盒子var inputTime = +new Date('2019-5-1 18:00:00'); // 返回的是用户输入时间总的毫秒数countDown(); // 我们先调用一次这个函数,防止第一次刷新页面有空白 // 2. 开启定时器setInterval(countDown, 1000);function countDown() {var nowTime = +new Date(); // 返回的是当前时间总的毫秒数var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数 var h = parseInt(times / 60 / 60 % 24); //时h = h < 10 ? '0' + h : h;hour.innerHTML = h; // 把剩余的小时给 小时黑色盒子var m = parseInt(times / 60 % 60); // 分m = m < 10 ? '0' + m : m;minute.innerHTML = m;var s = parseInt(times % 60); // 当前的秒s = s < 10 ? '0' + s : s;second.innerHTML = s;}</script>
</body>
案例23:发送短信案例
<body>手机号码: <input type="number"> <button>发送</button><script>// 按钮点击之后,会禁用 disabled 为true // 同时按钮里面的内容会变化, 注意 button 里面的内容通过 innerHTML修改// 里面秒数是有变化的,因此需要用到定时器// 定义一个变量,在定时器里面,不断递减// 如果变量为0 说明到了时间,我们需要停止定时器,并且复原按钮初始状态var btn = document.querySelector('button');var time = 3; // 定义剩下的秒数btn.addEventListener('click', function() {btn.disabled = true; //禁用var timer = setInterval(function() {if (time == 0) {// 清除定时器和复原按钮clearInterval(timer);btn.disabled = false;btn.innerHTML = '发送';} else {btn.innerHTML = '还剩下' + time + '秒';time--;}}, 1000);})</script>
</body>
案例24:5秒之后自动跳转页面
<body><button>点击</button><div></div><script>var btn = document.querySelector('button');var div = document.querySelector('div');btn.addEventListener('click', function() {// console.log(location.href);location.href = 'http://www.itcast.cn';})var timer = 5;setInterval(function() {if (timer == 0) {location.href = 'http://www.itcast.cn';} else {div.innerHTML = '您将在' + timer + '秒钟之后跳转到首页';timer--;}}, 1000);</script>
</body>
案例25:发送短信案例
location.search取到数据
<body><div></div><script>console.log(location.search); // ?uname=andy// 1.先去掉? substr('起始的位置',截取几个字符);var params = location.search.substr(1); // uname=andyconsole.log(params);// 2. 利用=把字符串分割为数组 split('=');var arr = params.split('=');console.log(arr); // ["uname", "ANDY"]var div = document.querySelector('div');// 3.把数据写入div中div.innerHTML = arr[1] + '欢迎您';</script>
</body>
案例26:拖动的模态框
弹出框,我们也称为模态框。
功能:
- 点击弹出层, 会弹出模态框, 并且显示灰色半透明的遮挡层。
- 点击关闭按钮,可以关闭模态框,并且同时关闭灰色半透明遮挡层。
- 鼠标放到模态框最上面一行,可以按住鼠标拖拽模态框在页面中移动。
- 鼠标松开,可以停止拖动模态框移动。
实现步骤:
- 点击弹出层, 模态框和遮挡层就会显示出来 display:block;
- 点击关闭按钮,模态框和遮挡层就会隐藏起来 display:none;
- 在页面中拖拽的原理: 鼠标按下并且移动, 之后松开鼠标
- 触发事件是鼠标按下 mousedown, 鼠标移动mousemove 鼠标松开 mouseup
- 拖拽过程: 鼠标移动过程中,获得最新的值赋值给模态框的left和top值, 这样模态框可以跟着鼠标走了
- 鼠标按下触发的事件源是 最上面一行,就是 id 为 title
- 鼠标的坐标 减去 鼠标在盒子内的坐标, 才是模态框真正的位置。
- 鼠标按下,我们要得到鼠标在盒子的坐标。
- 鼠标移动,就让模态框的坐标 设置为 : 鼠标坐标 减去盒子坐标即可,注意移动事件写到按下事件里面。
10.鼠标松开,就停止拖拽,就是可以让鼠标移动事件解除
<body><div class="login-header"><a id="link" href="javascript:;">点击,弹出登录框</a></div><div id="login" class="login"><div id="title" class="login-title">登录会员<span><a id="closeBtn" href="javascript:void(0);" class="close-login">关闭</a></span></div><div class="login-input-content"><div class="login-input"><label>用户名:</label><input type="text" placeholder="请输入用户名" name="info[username]" id="username" class="list-input"></div><div class="login-input"><label>登录密码:</label><input type="password" placeholder="请输入登录密码" name="info[password]" id="password" class="list-input"></div></div><div id="loginBtn" class="login-button"><a href="javascript:void(0);" id="login-button-submit">登录会员</a></div></div><!-- 遮盖层 --><div id="bg" class="login-bg"></div><script>// 1. 获取元素var login = document.querySelector('.login');var mask = document.querySelector('.login-bg');var link = document.querySelector('#link');var closeBtn = document.querySelector('#closeBtn');var title = document.querySelector('#title');// 2. 点击弹出层这个链接 link 让mask 和login 显示出来link.addEventListener('click', function() {mask.style.display = 'block';login.style.display = 'block';})// 3. 点击 closeBtn 就隐藏 mask 和 login closeBtn.addEventListener('click', function() {mask.style.display = 'none';login.style.display = 'none';})// 4. 开始拖拽// (1) 当我们鼠标按下, 就获得鼠标在盒子内的坐标title.addEventListener('mousedown', function(e) {var x = e.pageX - login.offsetLeft;var y = e.pageY - login.offsetTop;// (2) 鼠标移动的时候,把鼠标在页面中的坐标,减去 鼠标在盒子内的坐标就是模态框的left和top值document.addEventListener('mousemove', move)function move(e) {login.style.left = e.pageX - x + 'px';login.style.top = e.pageY - y + 'px';}// (3) 鼠标弹起,就让鼠标移动事件移除document.addEventListener('mouseup', function() {document.removeEventListener('mousemove', move);})})</script>
</body>
案例27:仿京东放大镜效果
- 黄色的遮挡层跟随鼠标功能。
- 把鼠标坐标给遮挡层不合适。因为遮挡层坐标以父盒子为准。
- 首先是获得鼠标在盒子的坐标。
- 之后把数值给遮挡层做为left 和top值。
- 此时用到鼠标移动事件,但是还是在小图片盒子内移动。
- 发现,遮挡层位置不对,需要再减去盒子自身高度和宽度的一半。
- 遮挡层不能超出小图片盒子范围。
- 如果小于零,就把坐标设置为0
- 如果大于遮挡层最大的移动距离,就把坐标设置为最大的移动距离
- 遮挡层的最大移动距离: 小图片盒子宽度 减去 遮挡层盒子宽度
window.addEventListener('load', function() {var preview_img = document.querySelector('.preview_img');var mask = document.querySelector('.mask');var big = document.querySelector('.big');// 1. 当我们鼠标经过 preview_img 就显示和隐藏 mask 遮挡层 和 big 大盒子preview_img.addEventListener('mouseover', function() {mask.style.display = 'block';big.style.display = 'block';})preview_img.addEventListener('mouseout', function() {mask.style.display = 'none';big.style.display = 'none';})// 2. 鼠标移动的时候,让黄色的盒子跟着鼠标来走preview_img.addEventListener('mousemove', function(e) {// (1). 先计算出鼠标在盒子内的坐标var x = e.pageX - this.offsetLeft;var y = e.pageY - this.offsetTop;// console.log(x, y);// (2) 减去盒子高度 300的一半 是 150 就是我们mask 的最终 left 和top值了// (3) 我们mask 移动的距离var maskX = x - mask.offsetWidth / 2;var maskY = y - mask.offsetHeight / 2;// (4) 如果x 坐标小于了0 就让他停在0 的位置// 遮挡层的最大移动距离var maskMax = preview_img.offsetWidth - mask.offsetWidth;if (maskX <= 0) {maskX = 0;} else if (maskX >= maskMax) {maskX = maskMax;}if (maskY <= 0) {maskY = 0;} else if (maskY >= maskMax) {maskY = maskMax;}mask.style.left = maskX + 'px';mask.style.top = maskY + 'px';// 3. 大图片的移动距离 = 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层的最大移动距离// 大图var bigIMg = document.querySelector('.bigImg');// 大图片最大移动距离var bigMax = bigIMg.offsetWidth - big.offsetWidth;// 大图片的移动距离 X Yvar bigX = maskX * bigMax / maskMax;var bigY = maskY * bigMax / maskMax;bigIMg.style.left = -bigX + 'px';bigIMg.style.top = -bigY + 'px';})
})
案例28:仿淘宝侧边栏
功能分析:
- 需要用到页面滚动事件 scroll 因为是页面滚动,所以事件源是 document
- 滚动到某个位置,就是判断页面被卷去的上部值。
- 页面被卷去的头部:可以通过window.pageYOffset 获得 如果是被卷去的左侧 window.pageXOffset
- 注意,元素被卷去的头部是 element.scrollTop , 如果是页面被卷去的头部 则是 window.pageYOffset
- 其实这个值 可以通过盒子的 offsetTop 可以得到,如果大于等于这个值,就可以让盒子固定定位了
<body><div class="slider-bar"><span class="goBack">返回顶部</span></div><div class="header w">头部区域</div><div class="banner w">banner区域</div><div class="main w">主体部分</div><script>//1. 获取元素var sliderbar = document.querySelector('.slider-bar');var banner = document.querySelector('.banner');// banner.offestTop 就是被卷去头部的大小 一定要写到滚动的外面var bannerTop = banner.offsetTop// 当我们侧边栏固定定位之后应该变化的数值var sliderbarTop = sliderbar.offsetTop - bannerTop;// 获取main 主体元素var main = document.querySelector('.main');var goBack = document.querySelector('.goBack');var mainTop = main.offsetTop;// 2. 页面滚动事件 scrolldocument.addEventListener('scroll', function() {// console.log(11);// window.pageYOffset 页面被卷去的头部// console.log(window.pageYOffset);// 3 .当我们页面被卷去的头部大于等于了 172 此时 侧边栏就要改为固定定位if (window.pageYOffset >= bannerTop) {sliderbar.style.position = 'fixed';sliderbar.style.top = sliderbarTop + 'px';} else {sliderbar.style.position = 'absolute';sliderbar.style.top = '300px';}// 4. 当我们页面滚动到main盒子,就显示 goback模块if (window.pageYOffset >= mainTop) {goBack.style.display = 'block';} else {goBack.style.display = 'none';}})</script>
</body>
案例29:轮播图制作
javaScript常用案例相关推荐
- 【JavaScript学习】JavaScript 常用工具类封装
文章目录 1.JavaScript 常用工具类封装 (1)获得浏览器地址所有参数 (2)将json转为get参数 (3)格式校验工具类 (4)数组操作工具类 (5)表单取值工具类 (6)时间转换工具类 ...
- HuTool工具的使用介绍和常用案例
HuTool工具的使用介绍和常用案例 一. 是什么 一个小而全的java工具类,静态方法封装.由开源项目作者的项目中一个util包衍变而来,里面包含了各种平时我们会用到的工具类. 官方文档 二 ...
- 7 种 Javascript 常用设计模式学习笔记
7 种 Javascript 常用设计模式学习笔记 由于 JS 或者前端的场景限制,并不是 23 种设计模式都常用. 有的是没有使用场景,有的模式使用场景非常少,所以只是列举 7 个常见的模式 本文的 ...
- JavaScript常用代码
在这存一下JavaScript常用代码: 1.封装输出 1 var log = function() { 2 console.log.apply(console, arguments) 3 } 4 5 ...
- javaScript常用知识点有哪些
javaScript常用知识点有哪些 一.总结 一句话总结:int = ~~myVar, // to integer | 是二进制或, x|0 永远等于x:^为异或,同0异1,所以 x^0 还是永远等 ...
- javascript常用代码大全
http://caibaojian.com/288.html 原文链接 jquery选中radio//如果之前有选中的,则把选中radio取消掉 $("#tj_cat .pro_ca ...
- javascript常用的事件
javascript常用的事件 目标:本章主要讲解一些日常学习中常用的事件种类,主要分为五种事件,分别为鼠标事件.键盘事件.表单事件,页面事件,监听器 1.鼠标事件 1.onclick 鼠标点击触发事 ...
- 107条javascript常用小技巧
107条javascript常用的方法技巧,呵呵!为什么就是108呢? 1.document.write(""); 输出语句 2.JS中的注释为// 3.传统的HTML文档顺序是: ...
- ML之FE:特征工程之数据处理常用案例总结(数值型数据处理、类别型数据处理)及其代码实现
ML之FE:特征工程之数据处理常用案例总结(数值型数据处理.类别型数据处理)及其代码实现 目录 特征工程之数据处理常用案例总结(数值型数据处理.类别型数据处理)及其代码实现
- Python语言学习之pandas:DataFrame二维表的简介、常用函数、常用案例之详细攻略
Python语言学习之pandas:DataFrame二维表的简介.常用函数.常用案例之详细攻略 目录 DataFrame的简介 DataFrame的常用案例 1.写入和读取excel表格文件
最新文章
- mysql is复制表结构_MySQL复制表结构和内容到另一张表中的SQL语句
- springboot集成环信sdk报错
- JDBC粗略学习( 阿巴阿巴阿巴阿巴)
- 自适应高度表格_React实现自适应高度的lt;textareagt;
- 写随笔写日记多参与评论
- 日期格式转换,正则匹配后转换;指定时间增加天数加转格式;js时间转换格式
- 如何用VB.Net创建一个三层的数据库应用程序
- MT4 缠论双线MACD面积背离指标
- Java后端开发需要的技术
- 超标量处理器设计 姚永斌 第6章 指令解码 摘录
- 工程点点app爬虫和sign算法破解
- 数据分析师与数据科学家的区别
- ARM裸机篇(三)——i.MX6ULL第一个裸机程序
- LR11补丁下载地址
- 连续52周,每周推出一个新的应用程序
- js向jsf调用后台方法并传递参数
- 06-02 标签管理
- @所有人,清明节借势文案素材大礼包已到!
- java毕业论文云笔记_java毕业设计_springboot框架的云笔记记事本
- 第五章、中台实践-技术平台建设