DOM案例
一.鼠标点击显示当前时间:
- 需求描述:当我们点击了按钮, div里面的文字会动态发生变化 显示当前的时间
- 用来实现的元素:innerText改变元素内容 +封装一个获取日期函数
代码:
<body>
<button>显示当前系统时间</button>
<div>某个时间</div>
<p>今天日期</p>
<script>
// 1. 获取元素
var btn = document.querySelector('button');
var div = document.querySelector('div');
var p = document.querySelector('p');
// 2.注册事件
btn.onclick = function(){
// 当我们点击了按钮, div里面的文字会动态发生变化 显示当前的时间
div.innerHTML = getDate();
p.innerHTML = getDateMonth();
}
function getDate() {
var date = new Date();
// 获取4位年份:从 Date 对象以四位数字返回年份。
var year = date.getFullYear();
// 获取月份:从 Date 对象返回月份 (0 ~ 11) 一个12月 所以需要+1
var month = date.getMonth() + 1;
// 获取日: 从 Date 对象返回一个月中的某一天 (1 ~ 31)
var dates = date.getDate();
var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
//获取星期: 从 Date 对象返回一周中的某一天 (0 ~ 6) 此函数输出结果为数字
// 通过一个数组把对应的数字和星期绑定在一起 0表示星期日 6表示星期6
var day = date.getDay();
return '今天是:' + year + '年' + month + '月' + dates + '日 ' + arr[day];
}
function getDateMonth() {
var date = new Date();
// 获取月份:从 Date 对象返回月份 (0 ~ 11) 一个12月 所以需要+1
var month = date.getMonth() + 1;
// 获取日: 从 Date 对象返回一个月中的某一天 (1 ~ 31)
var dates = date.getDate();
return '今天是:'+month + '月' + dates + '日 ';
}
</script>
</body>
页面效果:
- 点击前:
- 点击后:
二.仿京东显示密码:
- 分析步骤:
代码:
<style>
.box {
/* 大盒子 */
width: 400px;
border-bottom: 1px solid #ccc;
margin: 100px auto;
position: relative;
}
.box input {
/* 左边输入框 */
width: 370px;
height: 30px;
border: 0;
}
.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');
// 分析:一个按钮两个状态 点击一次状态就发生变化
var flag = 0; //初始状态
eye.onclick = function () {
// 点击一次后 flag一定要变化 0表示文本框 眼睛睁开 1表示密码框 眼睛闭上
if (flag == 0) {
// 状态初始值等于0时候 点击后赋值为1
pwd.type = 'text';
eye.src = 'images/open.png';
flag = 1; //赋值
} else {
// 状态值等于1时候 点击后赋值为0
pwd.type = 'password';
eye.src = 'images/close.png';
flag = 0;
}
}
</script>
</body>
显示效果:
三.淘宝点击关闭二维码案例:
- 分析步骤
代码:
<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="images/tao.png" alt="">
<i class="close-btn">×</i>
</div>
<script>
// 获取元素
var btn = document.querySelector('.close-btn');
var box = document.querySelector('.box');
// 点击事件:盒子隐藏和显示
btn.onclick = function () {
box.style.display = 'none';
}
</script>
</body>
效果图:
四.循环精灵图背景案例:
- 分析步骤:
代码:
<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');
for (var i = 0; i < lis.length; i++) {
//让索引号乘以44 就是每个li的背景y坐标
var index = i * 44;
//图片移动到当前索引的y坐标位置
lis[i].style.backgroundPosition = '0 -' + index + 'px';
}
</script>
</body>
效果图:
五.显示隐藏文本框内容:
- 分析步骤:
代码:
<style>
input {
color: #999;
}
</style>
</head>
<body>
<input type="text" value="手机">
<script>
var text = document.querySelector('input');
text.onfocus = function () {
// console.log('得到焦点');
if (text.value == '手机') {
this.value = '';
}
//获得焦点 需要把文本框里面的文字颜色变黑
this.style.color = '#333';
}
text.onblur = function () {
// console.log('失去焦点');
if (text.value == '') {
this.value = '手机';
}
this.style.color = '#999';
}
</script>
</body>
效果图:
六.密码框格式提示错误信息:
- 分析步骤:
代码:
<style>
input {
color: #999;
}
</style>
</head>
<body>
<input type="text" value="手机">
<script>
var text = document.querySelector('input');
text.onfocus = function () {
// console.log('得到焦点');
if (text.value == '手机') {
this.value = '';
}
//获得焦点 需要把文本框里面的文字颜色变黑
this.style.color = '#333';
}
text.onblur = function () {
// console.log('失去焦点');
if (text.value == '') {
this.value = '手机';
}
this.style.color = '#999';
}
</script>
</body>