本节作业之显示不同问候语、显示密码、关闭二维码、循环精灵图背景、显示隐藏文本框内容、密码框格式提示错误、京东关闭广告、新浪下拉菜单、开关灯、换肤、表格隔行变色、表单取消全选、tab栏切换、发布删除留言
2024-05-13 17:35:04
本节作业之显示不同问候语、显示密码、关闭二维码、循环精灵图背景、显示隐藏文本框内容、密码框格式提示错误、京东关闭广告、新浪下拉菜单、开关灯、换肤、表格隔行变色、表单取消全选、tab栏切换、发布删除留言
- 1 根据不同时间，显示不同问候语
- 2 仿京东显示密码
- 3 淘宝点击关闭二维码
- 4 循环精灵图背景
- 5 显示隐藏文本框内容
- 6 密码框格式提示错误信息
- 7 世纪佳缘 用户名 显示隐藏内容
- 8 京东关闭广告(直接隐藏即可)
- 9 新浪下拉菜单(微博即可)
- 10 开关灯案例
- 11 百度换肤
- 12 表格隔行变色
- 13 表单全选取消全选案例
- 14 ★★tab栏切换★★
- 15 下拉菜单
- 16 简单版发布留言案例
- 17 删除留言案例
- 18 动态生成表格
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"><title>根据不同时间显示不同问候语</title><style>img {width: 300px;}</style>
</head>
<body><!-- 根据时间不同，页面显示不同图片，同时显示不同的问候语如果上午时间打开页面，显示上午好，显示上午的图片如果下午时间打开页面，显示下午好，显示下午的图片如果晚上时间打开页面，显示晚上好，显示晚上的图片 --><!-- 案例分析：根据系统不同时间来判断，所以需要用到日期内置对象利用多分支语句来设置不同的图片需要一个图片，并且根据时间修改图片，就需要用到操作元素src属性需要一个div元素，显示不同问候语，修改元素内容即可 --><img src="data:images/s.gif" alt=""><div>上午好！</div><script>// 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>
</html>
2 仿京东显示密码
<!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"><title>仿京东显示密码</title><style>.box {position: relative;width: 400px;border-bottom: 1px solid red;margin: 100px auto;}.box input {width: 370px;height: 30px;border: 0;/* 去掉输入密码时默认的边框 */outline: none;}.box img {position: absolute;top: 5px;right: 2px;width: 20px;}</style>
</head>
<body><!-- 点击按钮，将密码框切换为文本框，并可以查看密码明文 --><!-- 案例分析：1.核心思路：点击眼睛按钮，把密码框类型改为文本框就可以看见里面的密码2.一个按钮两个状态，点击一次，切换为文本框，继续点击一次切换为密码框3.算法：利用一个flag变量，来判断flag的值，如果是1，就切换为文本框，flag设置为0，如果是0就切换为密码框，flag为1 --><div class="box"><!-- label扩大点击范围 --><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>
</html>
3 淘宝点击关闭二维码
<!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"><title>淘宝点击关闭二维码</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><!-- 当鼠标点击二维码关闭按钮的时候，则关闭整个二维码 --><!-- 案例分析：1.核心思路：利用样式的显示和隐藏完成，display:none隐藏元素，display:block显示元素2.display:none隐藏后不占位 visibility:hidden占位3.点击按钮，就让这个盒子隐藏起来即可 --><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>
</html>
点击前：
点击后：
4 循环精灵图背景
<!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"><title>循环精灵图背景</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><!-- 可以利用for循环设置一组元素的精灵图背景 --><!-- 案例分析：1.首先精灵图图片排列有规律2.核心思路：利用for循环 修改精灵图片的背景位置background-position3.剩下的就是数学功底4.让循环里的i索引号*44就是每个图片的y坐标 --><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.获取元素 所有的livar lis = document.querySelectorAll('li');// 2.绑定事件for (var i = 0; i < lis.length; i++) {// 让索引号乘以44 就是每个li的背景坐标// index就是y坐标var index = i * 44;lis[i].style.backgroundPosition = '0 -' + index + 'px';}</script>
</body>
</html>
5 显示隐藏文本框内容
<!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"><title>显示隐藏文本框内容</title><style>input {color: #999;}</style>
</head>
<body><!-- 当鼠标点击文本框时，里面的默认文字隐藏，当鼠标离开文本框时，里面的文字显示 --><!-- 案例分析：1.首先表单需要两个新事件，获得焦点onfocus 失去焦点onblur2.如果获得焦点，判断表单里面内容是否为默认文字，如果是默认文字，就清空表单内容3.如果失去焦点，判断表单内容是否为空，如果为空，则表单内容改为默认文字 --><input type="text" value="手机"><script>// 1.获取元素var text = document.querySelector('input');// 2.绑定事件 获得焦点事件onfocustext.onfocus = function() {if (this.value === '手机') {this.value = '';}// 获得焦点需要把文本框里面的文字变黑this.style.color = '#333';}// 3.绑定事件 失去焦点事件onblurtext.onblur = function() {if (this.value === '') {this.value = '手机';}// 失去焦点需要把文本框里面的文字变浅this.style.color = '#999';}</script>
</body>
</html>
获得焦点前：
获得焦点未输入时：
获得焦点输入时：
失去焦点有输入时：
失去焦点无输入时：
6 密码框格式提示错误信息
<!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"><title>密码框格式提示错误信息</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><!-- 用户如果离开密码框，里面输入个数不是6~16,则提示错误信息，否则提示输入正确信息 --><!-- 案例分析：1.首先判断的事件是表单失去焦点onblur2.如果输入正确则提示正确的信息颜色为绿色小图标变化3.如果输入不是6到16位，则提示错误信息颜色为红色小图标变化4.因为里面变化样式较多，故采取className修改样式 --><div class="register"><input type="password" class="ipt"><p class="message">请输入6-16位密码</p></div><script>// 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) {message.className = 'message wrong';message.innerHTML = '您输入的位数不正确 要求6-16位';}else {message.className = 'message right';message.innerHTML = '您输入的正确';}}</script>
</body>
</html>
起始时：
输入错误时：
输入正确时：
7 世纪佳缘 用户名 显示隐藏内容
<!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"><title>世纪佳缘 用户名 显示隐藏内容</title><style>.login {position: relative;width: 410px;margin: 100px auto;}.login input {padding-left: 10px;outline: none;width: 150px;height: 20px;color: rgb(175, 174, 174);font-size: 12px;line-height: 20px;border: 1px solid #999;border-radius: 3px;}button {position: absolute;top: 1px;right: 8px;width: 60px;height: 23px;line-height: 21px;background-color: rgb(4, 98, 160);border: 0;color: #fff;}</style>
</head>
<body><div class="login"><input type="text" value="邮箱/ID/手机号" id="num"><input type="text" value="密码" id="pwd"><button>登录</button></div><script>// 1.获取元素var num = document.getElementById('num');var pwd = document.getElementById('pwd');// 2.注册事件 num获得焦点事件num.onfocus = function() {if (this.value === '邮箱/ID/手机号') {this.value = '';}this.style.color = '#333';this.style.borderColor = 'pink';}// 3.注册事件 num失去焦点事件num.onblur = function() {if (this.value === '') {this.value = '邮箱/ID/手机号';}this.style.color = '#999';this.style.borderColor = '#999';}// 4.注册事件 pwd获得焦点事件var flag = 0;pwd.onfocus = function() {if (flag == 0) {this.type = 'password';if (this.value === '密码') {this.value = '';}flag = 1;} else {pwd.type = 'text';flag = 0;}this.style.color = '#333';this.style.borderColor = 'pink';}// 5.注册事件 pwd失去焦点事件pwd.onblur = function() {if (flag == 1) {this.type = 'password';if (this.value === '') {this.type = 'text';this.value = '密码';}flag = 0;} else {this.type = 'text';if (this.value === '') {this.value = '密码';}flag = 1;}this.style.color = '#999';this.style.borderColor = '#999';}</script>
</body>
</html>
8 京东关闭广告(直接隐藏即可)
<!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"><title>京东关闭广告</title><style>.box {position: relative;width: 170px;height: 200px;margin: 100px auto;padding-top: 15px;border: 1px solid #ccc;background-color: pink;text-align: center;font-size: 12px;}.box img {width: 150px;margin-top: 13px;}.box .close-btn {position: absolute;top: -1px;right: -16px;width: 14px;height: 14px;line-height: 14px;border: 1px solid #ccc;font-family: Arial, Helvetica, sans-serif;/* 光标变成一只手 */cursor: pointer;}</style>
</head>
<body><div class="box">假装它是京东广告<img src="data:images/jdgg.png" alt=""><div class="close-btn">×</div></div>
</body>
</html>
9 新浪下拉菜单(微博即可)
<!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"><title>新浪下拉菜单</title><style>* {margin: 0;padding: 0;}li {list-style: none;}a {/* 去掉a链接自带的下划线 */text-decoration: none;font-size: 14px;}.nav {width: 400px;height: 50px;margin: 100px auto;border-top: 2px solid #ff8500;}.nav>li {float: left;width: 100px;height: 40px;text-align: center;}.nav li a {display: block;width: 100%;height: 100%;line-height: 40px;color: #333;}.nav>li:hover {background-color: rgb(239, 235, 235);}.nav>li>a:hover {background-color: #eee;color: #ff8400;}.nav ul {/* 隐藏 */display: none;width: 100%;border-left: 1px solid #fecc5b;border-right: 1px solid #fecc5b;}.nav ul li {border-bottom: 1px solid #fecc5b;}.nav ul li a:hover {background-color: #fff5da;}</style>
</head>
<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></ul></li><li><a href="#">邮箱</a><ul><li><a href="#">免费邮箱</a></li><li><a href="#">VIP邮箱</a></li><li><a href="#">企业邮箱</a></li><li><a href="#">新浪邮箱客户端</a></li></ul></li><li><a href="#">网站导航</a></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>
</html>
10 开关灯案例
<!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"><title>开关灯案例</title>
</head>
<body><button id="btn">开关灯</button><script>// 1.获取元素var btn = document.getElementById('btn');// 2.注册事件var flag = 0;btn.onclick = function() {if (flag == 0) {document.body.style.backgroundColor = 'black';flag = 1;} else {document.body.style.backgroundColor = '#fff';flag = 0;}}</script>
</body>
</html>
点击前：
点击后：
11 百度换肤
<!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"><title>百度换肤</title><style>* {margin: 0;padding: 0;}li {list-style: none;}body {background: url(images/1.jpg) no-repeat center top;}.baidu {overflow: hidden;width: 410px;margin: 100px auto;background-color: #fff;padding-top: 3px;}.baidu li {float: left;margin: 0 1px;/* 光标变为手 */cursor: pointer;}.baidu img {width: 100px;}</style>
</head>
<body><!-- 案例分析：1.这个案例练习的是给一组元素注册事件2.给4个小图片利用循环注册点击事件3.当我们点击了这个图片，让我们页面背景改为当前的图片4.核心算法：把当前图片的src路径取过来，给body做为背景即可 --><ul class="baidu"><li><img src="data:images/1.jpg" alt=""></li><li><img src="data:images/2.jpg" alt=""></li><li><img src="data:images/3.jpg" alt=""></li><li><img src="data:images/4.jpg" alt=""></li></ul><script>// 1.获取元素var imgs = document.querySelector('.baidu').querySelectorAll('img');// 2.循环注册事件for (var i = 0; i < imgs.length; i++) {imgs[i].onclick = function() {// 把当前图片的路径this.src取过来给bodydocument.body.style.backgroundImage = 'url(' + this.src + ')';}}</script>
</body>
</html>
点击第二张图片时：
12 表格隔行变色
<!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"><title>表格隔行变色</title><style>table {width: 800px;margin: 100px auto;text-align: center;border-collapse: collapse; /* 边框是否被合并为一个单一的边框 */font-size: 14px;}thead tr {height: 30px;background-color: skyblue;}tbody tr {height: 30px;}tbody td {border-bottom: 1px solid #d7d7d7;font-size: 12px;color: blue;}.bg {background-color: pink;}</style>
</head>
<body><table><thead><tr><th>代码</th><th>名称</th><th>最新公布净值</th><th>累计净值</th><th>前单位净值</th><th>净值增长率</th></tr></thead><tbody><tr><td>003526</td><td>农银金穗3个月定期开放债券</td><td>1.075</td><td>1.079</td><td>1.074</td><td>+0.047%</td></tr><tr><td>003526</td><td>农银金穗3个月定期开放债券</td><td>1.075</td><td>1.079</td><td>1.074</td><td>+0.047%</td></tr><tr><td>003526</td><td>农银金穗3个月定期开放债券</td><td>1.075</td><td>1.079</td><td>1.074</td><td>+0.047%</td></tr><tr><td>003526</td><td>农银金穗3个月定期开放债券</td><td>1.075</td><td>1.079</td><td>1.074</td><td>+0.047%</td></tr><tr><td>003526</td><td>农银金穗3个月定期开放债券</td><td>1.075</td><td>1.079</td><td>1.074</td><td>+0.047%</td></tr><tr><td>003526</td><td>农银金穗3个月定期开放债券</td><td>1.075</td><td>1.079</td><td>1.074</td><td>+0.047%</td></tr></tbody></table><script>/* 案例分析：1.用到新的鼠标事件：鼠标经过onmouseover 鼠标离开onmouseout2.核心思路：鼠标经过tr行，当前的行变背景颜色，鼠标离开去掉当前的背景颜色3.注意：第一行(thead里面的行)不需要变换颜色，因此我们获取的是tbody里面的行 */// 1.获取元素 获取的是tbody里面所有的行var trs = document.querySelector('tbody').querySelectorAll('tr');// 2.利用循环注册事件for (var i = 0; i < trs.length; i++) {// 3.鼠标经过事件trs[i].onmouseover = function() {this.className = 'bg';}// 4.鼠标离开事件trs[i].onmouseout = function () {this.className = '';}}</script>
</body>
</html>
当鼠标经过时：
13 表单全选取消全选案例
<!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"><title>表单全选取消全选案例</title><style>* {padding: 0;margin: 0;}.wrap {width: 300px;margin: 100px auto 0;}table {border-collapse: collapse;border-spacing: 0; /* 指定相邻单元格边框之间的距离 */border: 1px solid #c0c0c0;width: 300px;}th,td {border: 1px solid #d0d0d0;color: #404060;padding: 10px;}th {background-color: #09c;font: bold 16px "微软雅黑";color: #fff;}td {font: 14px "微软雅黑";} tbody tr {background-color: #f0f0f0;} tbody tr:hover {cursor: pointer; /* 设置光标类型 */background-color: #fafafa;}</style>
</head>
<body><div class="wrap"><table><thead><tr><th><input type="checkbox" id="j_cbAll" /></th><th>商品</th><th>价钱</th></tr></thead><tbody id="j_tb"><tr><td><input type="checkbox" /></td><td>iPhone8</td><td>8000</td></tr><tr><td><input type="checkbox" /></td><td>iPad Pro</td><td>5000</td></tr><tr><td><input type="checkbox" /></td><td>iPad Air</td><td>2000</td></tr><tr><td><input type="checkbox" /></td><td>Apple Watch</td><td>2000</td></tr></tbody></table></div><script>/* 案例分析：1.全选和取消全选做法：让下面所有复选框的checked属性(选中状态)跟随全选按钮即可2.下面复选框需要全部选中，上面全选才能选中做法：给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的，如果有一个没选中的，上面全选就不选中3.可设置一个变量，来控制全选是否选中 */// 1.获取元素var j_cbAll = document.getElementById('j_cbAll'); //获取全选按钮var j_tbs = document.getElementById('j_tb').getElementsByTagName('input'); //获取下面所有的复选框// 2.注册事件j_cbAll.onclick = function () {// this.checked可得到当前复选框的选中状态for (var i = 0; i < j_tbs.length; i++) {j_tbs[i].checked = this.checked;}}for (var i = 0; i < j_tbs.length; i++) {j_tbs[i].onclick = function() {// 每次点击下面的复选框都要循环检查这四个小按钮是否被全选中// flag控制全选按钮是否选中var flag = true;for (var i = 0; i < j_tbs.length; i++) {if(!j_tbs[i].checked) {// 有按钮未被选中flag = false;break; //flag已经变为false 下面的循环已经没意义了 所以加上break 退出for循环}}j_cbAll.checked = flag; }}</script>
</body>
</html>
14 ★★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, initial-scale=1.0"><title>tab栏切换</title><style>* {margin: 0;padding: 0;}li {list-style-type: none; /* 设置列表项标记的类型 */}.tab {width: 978px;margin: 100px auto;}.tab_list {height: 39px;border: 1px solid #ccc;background-color: #f1f1f1;}.tab_list li {float: left;height: 39px;line-height: 39px;padding: 0 20px;text-align: center;cursor: pointer; /* 指针为一只手 */}.tab_list .current {background-color: #c81623;color: #fff;}.item_info {padding: 20px 0 0 20px;}.item {display: none; /* 该元素被隐藏 */}</style>
</head>
<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"><!-- 将style设置为display: block; 不仅有转换为块级元素 还有显示元素 --><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>/* 案例分析：1.Tab栏切换有两个大的模块2.上的模块选项卡，点击某一个，当前这一个底色会是红色，其余不变(排他思想) 修改类名的方式3.下面的模块内容，会跟随上面的选项卡变化，所以将下面模块变化写到点击事件里面4.规律：下面的模块显示内容和上面的选项卡一一对应，相匹配5.核心思路：给上面的tab_list里面的所有小li添加自定义属性，属性值从0开始编号6.当我们点击tab_list里面的某个小li，让tab_con里面对应序号的内容显示，其余隐藏(排他思想) */// 1.获取元素var tab_list = document.querySelector('.tab_list');var lis = tab_list.querySelectorAll('li');var items = document.querySelectorAll('.item');// 2.for循环绑定点击事件for (var i = 0; i < lis.length; i++) {// 开始给五个小li设置索引号lis[i].setAttribute('index', i);lis[i].onclick = function() {// 干掉所有人 其余li清除class这个类for(var i = 0; i < lis.length; i++) {lis[i].className = '';}// 留下我自己this.className = 'current';// 显示下面内容模块var index = this.getAttribute('index');// 干掉所有人 让其余的item 这些div隐藏for (var i = 0; i < items.length; i++) {items[i].style.display = 'none';}// 留下我自己 让对应的item 显示出来items[index].style.display = 'block';}}</script>
</body>
</html>
15 下拉菜单
<!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"><title>新浪下拉菜单</title><style>* {margin: 0;padding: 0;}li {list-style-type: none;}a {text-decoration: none;font-size: 14px;}.nav {margin: 100px;}.nav>li {position: relative;float: left;width: 80px;height: 41px;text-align: center;}.nav li a {display: block;width: 100%;height: 100%;line-height: 41px;color: #333;}.nav>li>a:hover {background-color: #eee;}.nav ul {display: none;position: absolute;top: 41px;left: 0;width: 100%;border-left: 1px solid #FECC5B;border-right: 1px solid #FECC5B;}.nav ul li {border-bottom: 1px solid #FECC5B;}.nav ul li a:hover {background-color: #FFF5DA;}</style>
</head>
<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.导航栏里面的li都要有鼠标经过效果，所以要循环注册鼠标事件2.核心原理：当鼠标经过li 里面的第二个孩子ul显示，当鼠标离开，则ul隐藏 */// 1.获取元素var nav = document.querySelector('.nav');var lis = nav.children; // 得到四个小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>
</html>
当鼠标经过时：
16 简单版发布留言案例
<!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"><title>简单版发布留言案例</title><style>* {margin: 0;padding: 0;}body {padding: 100px;}textarea {width: 200px;height: 100px;border: 1px solid pink;outline: none; /* 使绘制于元素周围的一条线无效*/resize: none; /* resize 属性规定是否可由用户调整元素的尺寸 */}ul {margin-top: 50px;}li {width: 300px;padding: 5px;background-color: rgb(245, 209, 243);color: red;font-size: 14px;margin: 15px 0;}</style>
</head>
<body><textarea name="" id=""></textarea><button>发布</button><ul></ul><script>/* 案例分析：1.核心思路：点击按钮之后，就动态创建一个li，添加到ul里面2.创建li的同时，把文本域里面的值通过li.innerHTML赋值给li3.如果想要新的留言后面显示就用appendChild 如果想要前面显示就用insertBefore */// 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 {// (1)创建节点var li = document.createElement('li');// 先有li才能赋值li.innerHTML = text.value;// (2)添加节点// ul.appendChild(li); 在后面插入// 在前面插入ul.insertBefore(li,ul.children[0]);}}</script>
</body>
</html>
未输入时：
先输入‘123’再输入‘456’最后输入‘789’：
17 删除留言案例
<!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"><title>删除留言案例</title><style>* {margin: 0;padding: 0;}body {padding: 100px;}textarea {width: 200px;height: 100px;border: 1px solid pink;outline: none; /* 使绘制于元素周围的一条线无效*/resize: none; /* resize 属性规定是否可由用户调整元素的尺寸 */}ul {margin-top: 50px;}li {width: 300px;padding: 5px;background-color: rgb(245, 209, 243);color: red;font-size: 14px;margin: 15px 0;}li a {float: right;}</style>
</head>
<body><textarea name="" id=""></textarea><button>发布</button><ul></ul><script>/* 案例分析：1.当我们把文本域里面的值赋给li的时候，多添加一个删除的链接2.需要把所有的链接获取过来，当我们点击当前的链接的时候，删除当前链接所在的li3.阻止链接跳转需要添加javascript:void(0);或者javascript:; */ // 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 {// (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 此时的li时as所在的li 所以可写为this.parentNode;// 删除的是父亲ul的子节点li ul.removeChild(this.parentNode);}}}}</script>
</body>
</html>
删除前：
删除‘小螺号嘀嘀嘀吹！’后：
18 动态生成表格
<!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"><title>动态生成表格</title><style>table {width: 500px;margin: 100px auto;border-collapse: collapse; /* border-collapse 属性设置表格的边框被合并为一个单一的边框 */text-align: center;}td,th {border: 1px solid #333;}thead tr {height: 40px;background-color: #ccc;}</style>
</head>
<body><!-- cellspacing="0"意思是table表格中的单元格子之间的空白距离为0像素 --><table cellspacing="0"><thead><tr><th>姓名</th><th>科目</th><th>成绩</th><th>操作</th></tr></thead><tbody></tbody></table><script>/* 案例分析：1.因为里面的学生数据都是动态的，我们需要js动态生成，这里我们模拟数据，自己定义好数据，数据我们采取对象形式存储2.所有的数据都是放到tbody里面的行里面3.因为行很多，我们需要循环创建多个行(对应多少人)4.每个行里面又有很多单元格(对应里面的数据)，还继续使用循环创建多个单元格，并把数据存入里面(双重for循环)5.最后一列单元格是删除，需单独创建单元格 */// 1.先准备好学生的数据var datas = [{name: '小王',subject: 'JavaScript',score: 150},{name: '翠花',subject: 'JavaScript',score: 100},{name: '二狗',subject: 'JavaScript',score: 60},{name: '大山',subject: 'JavaScript',score: 95},{name: '小美',subject: 'JavaScript',score: 53}];// 2.往tbody里面创建行：有几个人(通过数组长度可得)就创建几行var tbody = document.querySelector('tbody');for(var i = 0; i < datas.length; i++) { // 外面的for循环管行tr// (1)创建tr行var tr = document.createElement('tr');// 插入tbodytbody.appendChild(tr);// (2)行里面创建单元格(跟数据有关系的三个单元格)td 单元格的数量取决于每个对象的属性个数 for循环遍历对象/* for(var k in obj) {k得到的是属性名obj[k]得到的是属性值} */for(var k in datas[i]) { // 里面的for循环管列td// 创建单元格var td = document.createElement('td');// 创建的同时，把对象里面的属性值datas[i][k]给tdtd.innerHTML = datas[i][k];// 创建好后 放入行里面tr.appendChild(td);}// (3)创建有删除两个字的单元格var td = document.createElement('td');td.innerHTML = '<a href = "javascript:;">删除</a>';tr.appendChild(td); }// 3.删除操作开始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);}}</script>
</body>
</html>
删除前：
点击‘二狗’行后的删除后：
本节作业之显示不同问候语、显示密码、关闭二维码、循环精灵图背景、显示隐藏文本框内容、密码框格式提示错误、京东关闭广告、新浪下拉菜单、开关灯、换肤、表格隔行变色、表单取消全选、tab栏切换、发布删除留言相关推荐
- 新浪下拉菜单案例淘宝服饰精品案例
目录 1.新浪下拉菜单 2.淘宝服饰精品 1.新浪下拉菜单 利用jQuery基础选择器$("选择器") 选择对应的方法实现 实现效果 实现代码 <script>$(fu ...
- JS 新浪下拉菜单+jQuery
思考:首先在CSS布局上就出错了,导致后面设置JS时就有很大的问题 <!DOCTYPE html> <html lang="en"><head> ...
- b站pink老师JavaScript的jQuery 案例代码——新浪下拉菜单
目录 jQuery中:[使用jquery,记得要引入jquery文件] 用到的重点代码/原理: 1.原案例版本(不简洁,效果较为僵硬) 2.简洁+优化1.0版部分:(中等简洁,效果较柔和) 3.简洁+ ...
- js的项目1:世纪佳缘、京东关闭广告、新浪下拉菜单、开关灯案例
1.世纪佳缘 用户名 显示隐藏内容 <!DOCTYPE html> <html lang="en"> <head><meta charse ...
- 新浪下拉菜单(js原生版本)
效果展示: 代码展示: <!DOCTYPE html> <html><head><meta charset="utf-8">< ...
- js新浪下拉菜单 pink
在这里插入代码片 ```<!DOCTYPE html> <html><head><meta charset="utf-8">< ...
- Unity3D:问题(已解决):如何:实现手机扫描电脑二维码，然后手机上显示此二维码对应的图片
目录 一.目的 1.想知道:如何:实现手机扫描电脑二维码,然后手机上显示此二维码对应的图片 二.参考 1. 三.注意 四.操作:1:失败:草料二维码官方不提供API.SDK等 1. 四.操作:2:失败 ...
- excel2019如何做下拉菜单选项（数据源不占用原表上的单元格）
作为一个傻不拉几的菜鸟,今天又有收获了,好开心的,虽然被实验室一小姐姐给嫌弃得,不过谁让我脸皮够厚呢,哈哈哈哈. 目的:想在excel表格上增加单独的一列,如,某一列的第一行是姓名,剩下若干行增加一个 ...
- postman显示返回的base64图片验证码、二维码
在开发中,有些接口返回的数据是base64的图片数据,有时需要实时查看,如图片验证码.二维码等. 在postman的tests输入JS代码,点击SEND // 将接口返回数据赋值处理 var data ...
最新文章
- java做个简单的登录界面_java一个简单的登录界面制作
- 这么详细的Python matplotlib 绘制图形 还不赶紧收藏
- 记录：开始整合以前的微信预约与内部系统，进行一体化管理。
- 初中计算机应用教什么,信息技术在初中数学教学中的应用
- 笔记-项目整体管理-有难度的题目（转）
- 推荐系统 embedding 技术实践总结
- Fiori应用的书签模式 - bookmark
- 听说你做IT的，帮我做个网站呗！
- Python版——博客网站九 编写Android版本的移动App
- [转载] Python 从字符串匹配相同元素的所有下标位置（两种办法解析）
- Java 8并发工具包简介
- FPGA的I2S采集数据处理
- 软件项目管理/ IT项目管理 总复习
- spring boot图书管理系统 毕业设计-附源码160934
- spring框架 -- IOC
- 如何对系统声音进行选择与设置
- STM32控制步进电机：基于定时器中断的ULN2003驱动器/步进电机驱动程序
- 语音合成学习（一）综述
- FTTB+NAT+DHCP+pppoe+CBAC+*** client+Authentication AAA
- 水立方是高级场馆，人立方同样
热门文章
- Noteexpress将中文文献引用成为英文的方法
- excel怎么快速删除整个表格所有图片
- fateskins国内最新可直接取回饰品皮肤的CSGO网页开箱子网站!
- 华为手机丢失定位网站_华为手机丢了怎么办？华为手机使用定位找回的方法介绍...
- 数据源不定时间段后连接中断(解决方法：连接关闭后设置自启动，重新自动连接
- 系统学习javaweb-13-SpringMVC+Hibernate
- python os的cmd类似指令cd 文件夹
- PHP实现微信提现V3版本2022-5更新接口：商家转账到零钱
- 一个基于Bmob的OPPO锁屏壁纸小程序，写过之后发现...好像没什么卵用...一脸懵逼...
- 电脑的二进制、八进制、十进制、十六进制转换