JS-WebAPIs-DOM练习题(tab栏/输入框)
JS-WebAPIs第2天-DOM练习题
参考:
pink老师JS基础 JavaScript基础语法-dom/bom-es6-jQuery-数据可视化echarts-包含笔记源码作业黑马程序员pink老师前端入门视频教程（持续更新）
MDN-Web API接口参考 文档对象模型
文章目录
- JS-WebAPIs第2天-DOM练习题
-
- 一, 常用元素属性操作练习
-
- 练习1: 点击按钮显示现在的时间
- 练习2: 根据不同时间显示不同提示语
- 二, 表单的属性操作练习
-
- 练习3: 点击显示密码
- 练习4: 京东关闭顶部/底部广告
- 练习5: 循环精灵图
- 练习6: 搜索框输入时隐藏默认字符
- 练习7: 通过className更改样式
- 三, 操作节点练习
-
- 练习8: [tab切换下拉菜单]
- 练习10: [留言板]
- 练习11: [动态生成表格]
-
一, 常用元素属性操作练习
练习1: 点击按钮显示现在的时间
<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>Documenttitle>
<style>
span {
display: block;
width: 250px;
height: 30px;
background-color: pink;
}
style>
head>
<body>
<input type="button" value="显示当前系统日期" class="btn">
<span>这里显示日期span>
<span class="congratulation">祝福你span>
<script>
/* 第一个事件: 点击按钮显示时间 */
// 获取元素
var btnTime = document.querySelector('.btn');
var spanTime = document.querySelector('span');
// 注册事件
btnTime.onclick = function() {
spanTime.innerHTML = getDate();
}
var date = new Date(); //new一个Date内置对象
//补充getDate()函数
function getDate() {
var year = date.getFullYear();
var month = date.getMonth() + 1; //注意月份从0开始计数
var dates = date.getDate();
var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
var day = date.getDay();
return '今天是' + year + '年' + month + '月' + dates + '日' + arr[day];
}
/* 第二个事件: 判断上午下午晚上显示祝福 */
var zhufu = document.querySelector('.congratulation');
var hours = date.getHours();
if (hours < 12) {
zhufu.innerHTML = '上午好';
} else if (hours < 18) {
zhufu.innerHTML = '下午好';
} else {
zhufu.innerHTML = '晚上好';
}
script>
body>
html>
练习2: 根据不同时间显示不同提示语
整合进练习1了
二, 表单的属性操作练习
练习3: 点击显示密码
核心思路: 对于同一个按钮对应两种触发事件的情况(按一下亮按一下暗), 设置flag变量代表两种状态
右侧小眼睛用更改图片路径实现img.src
<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="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>
练习4: 京东关闭顶部/底部广告
核心思路: 用display:none 和display:block隐藏和显示广告
点x关闭图片
<style>
#J_promotional-top {
position: relative;
width: 990px;
height: 66.5px;
margin: 0 auto;
background-image: url(images/jd_ad.jpg.webp);
background-size: cover;
}
#J_promotional-top .close-btn {
position: absolute;
top: 5px;
right: 0px;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
font-size: 20px;
font-style: normal;
background: rgba(255, 255, 255, 0.7);
cursor: pointer;
}
style>
head>
<body>
<div id="J_promotional-top">
<a href="#">
<div class="ad">div>
a>
<i class="close-btn" aria-label="关闭顶部推广">
×
i>
div>
<script>
var close = document.querySelector('.close-btn');
var ad = document.getElementById('J_promotional-top'); //此处ID前无#
close.onclick = function() {
ad.style.display = 'none'; //none一定要打引号
}
script>
body>
练习5: 循环精灵图
核心思路: 当且仅当精灵图满足一定分布规律(即可以用公式表示时), 可以通过JS改变多个图标的position.
<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>
var lis = document.querySelectorAll('li');
// 利用lis[]是个伪数组的性质, 遍历所有小li
for (var i = 0; i < lis.length; i++) {
var yCoordinate = 44 * i;
lis[i].style.backgroundPosition = '0 -' + yCoordinate +
'px'; //引号别忘了, 变量需要跟字符串用加号隔开, 0后面必须还要有空格(正常表示坐标时 x y 用空格隔开)
}
script>
body>
练习6: 搜索框输入时隐藏默认字符
核心思路: input.text框内是value值
对象: 输入框
事件: 得到焦点(鼠标点击成为输入状态)时隐藏value-onFocus, 失去焦点时显示value
<style>
input {
color: #999;
}
style>
head>
<body>
<input type="text" value="手机">
<script>
// 1.获取元素
var text = document.querySelector('input');
// 2.注册事件 获得焦点事件 onfocus
// 错误写法: 注意失去焦点时不能直接改变value值, 会使得输入文字后如果失去焦点文字同样被改变
// text.onfocus = function() {
// this.value = '';
// }
// text.onblur = function() {
// this.value = '手机';
// }
// 正确写法: 仍有不足,用户输入'手机'后再点击会消失,因为被当成默认value了
text.onfocus = function() {
// console.log('得到了焦点');
if (this.value === '手机') {
this.value = '';
}
// 获得焦点需要把文本框里面的文字颜色变黑
this.style.color = '#333';
}
// 3. 注册事件 失去焦点事件 onblur
text.onblur = function() {
// console.log('失去了焦点');
if (this.value === '') {
this.value = '手机';
}
// 失去焦点需要把文本框里面的文字颜色变浅色
this.style.color = '#999';
}
// 2021-3-6 京东搜索框是以输入状态(键盘)判断, 默认value一直显示, 即使输入同样的文字也不会消失. 完美!
script>
练习7: 通过className更改样式
<style>
.div {
width: 100px;
height: 100px;
background-color: pink;
}
.change {
background-color: purple;
color: #fff;
font-size: 25px;
margin-top: 100px;
}
style>
head>
<body>
<div class="first">文本div>
<script>
// 1. 使用 element.style 获得修改元素样式 如果样式比较少 或者 功能简单的情况下使用
// JS主控制, 避免在JS里写太多CSS
var test = document.querySelector('div');
test.onclick = function() {
// this.style.backgroundColor = 'purple';
// this.style.color = '#fff';
// this.style.fontSize = '25px';
// this.style.marginTop = '100px';
// 让我们当前元素的类名改为了 change
// 2. 我们可以通过 修改元素的className更改元素的样式 适合于样式较多或者功能复杂的情况
// 3. 如果想要保留原先的类名，我们可以这么做 多类名选择器
this.className = 'change'; // 覆盖掉了原先的类名
//this.className = 'first change'; //多类名选择器,保留原来的类名
}
script>
body>
三, 操作节点练习
练习8: [tab切换下拉菜单]
链接
要求: 移动到不同栏目显示不同选项
练习10: [留言板]
链接
要求: 用户输入信息,点击按钮即可发布留言
进阶: 删除留言
练习11: [动态生成表格]
链接